n_u/nathanupchurch.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix accessibility issue

Browse Source 
Fix <li> inside <a> so screenreader can parse nav
This commit is contained in:
Nathan Upchurch
2024-08-13 22:34:00 -05:00
parent d64b6e15cd
commit c5121f01ca
2 changed files with 17 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/css/index.css
View File

@ -492,13 +492,8 @@ nav ul {
width: var(--space-2xs);
}
.nav-item {
display: inline-block;
text-decoration: none;
border-top: var(--border-nav);
}
.nav-item li {
align-items: baseline;
color: var(--text-color);
border-top: var(--border-nav);
display: flex;
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
@ -509,37 +504,33 @@ nav ul {
transition: var(--transition-normal);
letter-spacing: var(--ui-letter-spacing);
}
.nav-item:hover {
border-top: var(--border-nav-hover);
.nav-item a {
color: var(--text-color);
margin-top: calc(var(--space-xs-s) * -1); /* Compensate for padding */
padding-top: var(--space-xs-s); /* Give <a> a larger click area */
}
/* Compensate for increased border thickness on hover of a.nav-item */
.nav-item:hover li {
margin-top: calc(var(--space-xs-s) * -1);
.nav-item:hover {
border-top: var(--border-nav-hover); /* Increase border thickness */
}
.nav-item:hover a {
margin-top: calc(var(--space-xs-s) * -2); /* Compensate for border thickness */
}
.nav-item a[href]:visited {
color: var(--text-color);
}
.nav-item a[href]:hover {
.nav-item:hover a[href] {
color: var(--text-color);
text-decoration: none;
}
.nav-item a[href]:not(:hover) {
color: var(--text-color);
text-decoration: none;
}
.nav-item[data-currentpage="true"] {
border-top: var(--border-nav-currentpage);
}
.nav-item[data-currentpage="true"] a {
color: var(--contrast-color);
}
.nav-item[data-currentpage="true"] li {
margin-top: calc(var(--space-xs-s) * -1);
}
.nav a[href][aria-current="page"] li {
color: var(--contrast-color);
}
.subscribe:hover {
color: var(--text-color);
margin-top: calc(var(--space-xs-s) * -2); /* Compensate for border thickness */
}
/* Posts list */