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 }); }; }