michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

docs: use aria-current="page" rather than .is-active in SiteSidebar.astro (#770)

Browse source
This commit is contained in:
Caleb Jasik 2021-07-20 08:55:35 -05:00 committed by GitHub
parent 3ba17a78e5
commit 59e558bbc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
docs/src/components/SiteSidebar.astro
View file

@ -3,7 +3,6 @@ import { sidebar } from '../config.ts';
const {currentPage} = Astro.props;
---
<nav>
<ul class="nav-groups">
{sidebar.map(category => (
@ -12,7 +11,7 @@ const {currentPage} = Astro.props;
<h2 class="nav-group-title">{category.text}</h2>
<ul>
{category.children.map(child => (
<li class={`nav-link ${currentPage === child.link ? 'is-active' : ''}`}><a href={`${Astro.site.pathname}${child.link}`}>{child.text}</a></li>
<li class="nav-link"><a href={`${Astro.site.pathname}${child.link}`} aria-current={`${currentPage === child.link ? 'page' : ''}`}>{child.text}</a></li>
))}
</ul>
</div>
@ -23,7 +22,7 @@ const {currentPage} = Astro.props;
<script>
window.addEventListener('DOMContentLoaded', (event) => {
var target = document.querySelector('.nav-link.is-active');
var target = document.querySelector('[aria-current="page"]');
if (target && (target.offsetTop > (window.innerHeight - 100))) {
document.querySelector('.nav-groups').scrollTop = target.offsetTop;
}
@ -78,13 +77,13 @@ const {currentPage} = Astro.props;
background-color: var(--theme-bg-hover);
}
.nav-link.is-active a {
.nav-link a[aria-current="page"] {
color: var(--theme-text-accent);
background-color: var(--theme-bg-accent);
font-weight: 600;
}
:global(:root.theme-dark) .nav-link.is-active a {
:global(:root.theme-dark) .nav-link a[aria-current="page"] {
color: var(--color-white);
}