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>
<ul class="nav">
{%- 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>{{ entry.title }}</li>
</a>
<li class="nav-item" {% if entry.url == page.url %} aria-current="page" data-currentpage="true"{% endif %}><a href="{{ entry.url }}">{{ entry.title }}</a></li>
{%- endfor %}
<a class="nav-item" href="/feed/feed.xml">
<li class="subscribe">
{% include "rssLogo.njk" %}Feed
</li>
</a>
<li class="subscribe nav-item"><a href="/feed/feed.xml">{% include "rssLogo.njk" %}Feed</a>
</li>
</ul>
</nav>

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 */