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

1 files changed, 4 insertions, 5 deletions

diff --git a/docs/src/components/SiteSidebar.astro b/docs/src/components/SiteSidebar.astro
index 03bced101..02a17d99d 100644
--- a/docs/src/components/SiteSidebar.astro
+++ b/docs/src/components/SiteSidebar.astro
@@ -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);
   }