Switch to aria-current="page" for the TOC items (#2499)

GitbookIO · Sep 27, 2024 · b075f0f · b075f0f
1 parent 0ca32af
commit b075f0f
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 3 deletions.
diff --git a/.changeset/tricky-hounds-smoke.md b/.changeset/tricky-hounds-smoke.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Fix accessibility of the table of contents by using `aria-current` instead of `aria-selected`
diff --git a/packages/gitbook/src/components/TableOfContents/TOCPageIcon.tsx b/packages/gitbook/src/components/TableOfContents/TOCPageIcon.tsx
@@ -15,8 +15,8 @@ export function TOCPageIcon({ page }: { page: RevisionPage }) {
                 'text-base',
                 'text-dark/6',
                 'dark:text-light/6',
-                'group-aria-selected/toclink:text-primary',
-                'group-aria-selected/toclink:dark:text-primary-400',
+                'group-aria-current-page/toclink:text-primary',
+                'group-aria-current-page/toclink:dark:text-primary-400',
             )}
         />
     );

diff --git a/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx b/packages/gitbook/src/components/TableOfContents/ToggleableLinkItem.tsx
@@ -96,7 +96,7 @@ export function ToggleableLinkItem(props: {
             <Link
                 ref={linkRef}
                 href={href}
-                aria-selected={isActive}
+                {...(isActive ? { 'aria-current': 'page' } : {})}
                 className={tcls(
                     'group/toclink',
                     'flex',

diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts
@@ -58,6 +58,9 @@ const config: Config = {
     ],
     theme: {
         extend: {
+            aria: {
+                'current-page': 'current="page"',
+            },
             fontFamily: {
                 sans: ['var(--font-content)'],
                 mono: ['var(--font-mono)'],