🎹 Improve keyboard accessibility (#481)

jupyter-book · Sep 30, 2024 · d175a30 · d175a30
1 parent 23e9f9a
commit d175a30
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/.changeset/modern-steaks-destroy.md b/.changeset/modern-steaks-destroy.md
@@ -0,0 +1,5 @@
+---
+'@myst-theme/site': patch
+---
+
+Change focus when selecting titles or skip-to-article
diff --git a/packages/site/src/components/DocumentOutline.tsx b/packages/site/src/components/DocumentOutline.tsx
@@ -60,11 +60,14 @@ const Headings = ({ headings, activeId }: Props) => (
           href={`#${heading.id}`}
           onClick={(e) => {
             e.preventDefault();
-            const el = document.querySelector(`#${heading.id}`);
+            const el = document.querySelector(`#${heading.id}`) as HTMLElement | undefined;
             if (!el) return;
 
             el.scrollIntoView({ behavior: 'smooth' });
             history.replaceState(undefined, '', `#${heading.id}`);
+            // Changes keyboard tab-index location
+            if (el.tabIndex === -1) el.tabIndex = -1;
+            el.focus({ preventScroll: true });
           }}
           // Note that the title can have math in it!
           dangerouslySetInnerHTML={{ __html: heading.titleHTML }}

diff --git a/packages/site/src/components/SkipToArticle.tsx b/packages/site/src/components/SkipToArticle.tsx
@@ -3,10 +3,13 @@ import React, { useCallback } from 'react';
 function makeSkipClickHandler(hash: string) {
   return (e: React.UIEvent<HTMLElement, Event>) => {
     e.preventDefault();
-    const el = document.querySelector(`#${hash}`);
+    const el = document.querySelector(`#${hash}`) as HTMLElement;
     if (!el) return;
     (el.nextSibling as HTMLElement).focus();
     history.replaceState(undefined, '', `#${hash}`);
+    // Changes keyboard tab-index location
+    if (el.tabIndex === -1) el.tabIndex = -1;
+    el.focus({ preventScroll: true });
   };
 }