totole/sapper-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper-template.git synced 2026-01-22 14:35:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Use aria-current instead of visual only indicator (#173)

Browse Source
This commit is contained in:
Sebastian Silbermann
2020-02-22 20:28:23 +01:00
committed by GitHub
parent 3a7d96d3eb
commit f52c6869f2
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Nav.svelte
View File

@@ -26,12 +26,12 @@
float: left; float: left;
} }
.selected { [aria-current] {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.selected::after { [aria-current]::after {
position: absolute; position: absolute;
content: ''; content: '';
width: calc(100% - 1em); width: calc(100% - 1em);
@@ -50,11 +50,11 @@
<nav> <nav>
<ul> <ul>
<li><a class:selected='{segment === undefined}' href='.'>home</a></li> <li><a aria-current='{segment === undefined ? "page" : undefined}' href='.'>home</a></li>
<li><a class:selected='{segment === "about"}' href='about'>about</a></li> <li><a aria-current='{segment === "about" ? "page" : undefined}' href='about'>about</a></li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen --> the blog data when we hover over the link or tap it on a touchscreen -->
<li><a rel=prefetch class:selected='{segment === "blog"}' href='blog'>blog</a></li> <li><a rel=prefetch aria-current='{segment === "blog" ? "page" : undefined}' href='blog'>blog</a></li>
</ul> </ul>
</nav> </nav>