Use @aria-current attribute instead of class on nav items

This commit is contained in:
Alex Cabal 2023-02-22 15:39:07 -06:00
parent 749e7d245f
commit c335ad331d
2 changed files with 9 additions and 9 deletions

View file

@ -79,19 +79,19 @@ if(!$isXslt){
<nav>
<ul>
<li>
<a<? if($highlight == 'ebooks'){ ?> class="highlighted"<? } ?> href="/ebooks">Ebooks</a>
<a<? if($highlight == 'ebooks'){ ?> aria-current="page"<? } ?> href="/ebooks">Ebooks</a>
</li>
<li>
<a<? if($highlight == 'about'){ ?> class="highlighted"<? } ?> href="/about">About</a>
<a<? if($highlight == 'about'){ ?> aria-current="page"<? } ?> href="/about">About</a>
</li>
<li>
<a<? if($highlight == 'newsletter'){ ?> class="highlighted"<? } ?> href="/newsletter">Newsletter</a>
<a<? if($highlight == 'newsletter'){ ?> aria-current="page"<? } ?> href="/newsletter">Newsletter</a>
</li>
<li>
<a<? if($highlight == 'contribute'){ ?> class="highlighted"<? } ?> href="/contribute">Get Involved</a>
<a<? if($highlight == 'contribute'){ ?> aria-current="page"<? } ?> href="/contribute">Get Involved</a>
</li>
<li>
<a<? if($highlight == 'donate'){ ?> class="highlighted"<? } ?> href="/donate">Donate</a>
<a<? if($highlight == 'donate'){ ?> aria-current="page"<? } ?> href="/donate">Donate</a>
</li>
</ul>
</nav>

View file

@ -420,18 +420,18 @@ header nav li a:visited{
}
header nav li a:hover,
header nav li a.highlighted:hover{
header nav li a[aria-current]:hover{
color: #fff;
border-bottom: 5px solid var(--button);
transition: none;
}
header nav li a.highlighted{
header nav li a[aria-current]{
color: #fff;
border-bottom: 5px solid var(--button);
}
header nav li a.highlighted::after{
header nav li a[aria-current]::after{
position: absolute;
content: "";
width: 0px;
@ -3509,7 +3509,7 @@ ul.feed p{
body > header > a,
header nav li a,
header nav li a:hover,
header nav li a.highlighted:hover,
header nav li a[aria-current]:hover,
a.button.next::after,
.ebooks nav > a:last-child::after,
a[href].button.next:hover::after,