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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
_includes/nav.njk
View File

@ -2,14 +2,9 @@
<h2 class="visually-hidden">Top level navigation menu</h2> <h2 class="visually-hidden">Top level navigation menu</h2>
<ul class="nav"> <ul class="nav">
{%- for entry in collections.all | eleventyNavigation %} {%- for entry in collections.all | eleventyNavigation %}
<a class="nav-item" href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}> <li class="nav-item" {% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}><a href="{{ entry.url }}">{{ entry.title }}</a></li>
<li>{{ entry.title }}</li>
</a>
{%- endfor %} {%- endfor %}
<a class="nav-item" href="/feed/feed.xml"> <li class="subscribe nav-item"><a href="/feed/feed.xml">{% include "rssLogo.njk" %}Feed</a>
<li class="subscribe"> </li>
{% include "rssLogo.njk" %}Feed
</li>
</a>
</ul> </ul>
</nav> </nav>

37
public/css/index.css
View File

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