From d175a30242a2b5a2ea1844a68be09dd77f4b1820 Mon Sep 17 00:00:00 2001 From: Rowan Cockett Date: Mon, 30 Sep 2024 12:19:59 -0600 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=B9=20Improve=20keyboard=20accessibili?= =?UTF-8?q?ty=20(#481)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/modern-steaks-destroy.md | 5 +++++ packages/site/src/components/DocumentOutline.tsx | 5 ++++- packages/site/src/components/SkipToArticle.tsx | 5 ++++- 3 files changed, 13 insertions(+), 2 deletions(-) create mode 100644 .changeset/modern-steaks-destroy.md diff --git a/.changeset/modern-steaks-destroy.md b/.changeset/modern-steaks-destroy.md new file mode 100644 index 00000000..957afa02 --- /dev/null +++ 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 index d3cd63a3..2446b82b 100644 --- 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 index 96afc8ed..2e17fe36 100644 --- 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) => { 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 }); }; }