totole/sapper-template
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper-template.git synced 2026-01-14 11:14:39 +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;
}
.selected {
[aria-current] {
position: relative;
display: inline-block;
}
.selected::after {
[aria-current]::after {
position: absolute;
content: '';
width: calc(100% - 1em);
@@ -50,11 +50,11 @@
<nav>
<ul>
<li><a class:selected='{segment === undefined}' href='.'>home</a></li>
<li><a class:selected='{segment === "about"}' href='about'>about</a></li>
<li><a aria-current='{segment === undefined ? "page" : undefined}' href='.'>home</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
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>
</nav>