From 8443761199266ebaa37ee3306ac666d60a012561 Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Wed, 27 Sep 2023 12:23:45 -0600
Subject: [PATCH] =?UTF-8?q?=E2=8C=A8=EF=B8=8F=20Simplifications=20to=20the?=
 =?UTF-8?q?=20skip-to-content=20handler=20(#240)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/fast-onions-thank.md                |  5 +++++
 packages/site/src/components/SkipToArticle.tsx | 12 +++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/fast-onions-thank.md

diff --git a/.changeset/fast-onions-thank.md b/.changeset/fast-onions-thank.md
new file mode 100644
index 000000000..bab8fabb9
--- /dev/null
+++ b/.changeset/fast-onions-thank.md
@@ -0,0 +1,5 @@
+---
+'@myst-theme/site': patch
+---
+
+Simplifications to skip-handler.
diff --git a/packages/site/src/components/SkipToArticle.tsx b/packages/site/src/components/SkipToArticle.tsx
index c07bd081e..eb3294e36 100644
--- a/packages/site/src/components/SkipToArticle.tsx
+++ b/packages/site/src/components/SkipToArticle.tsx
@@ -1,14 +1,12 @@
 import { useCallback } from 'react';
 
-function makeSkipClickHander(hash: string) {
+function makeSkipClickHandler(hash: string) {
   return (e: React.UIEvent<HTMLElement, Event>) => {
     e.preventDefault();
     const el = document.querySelector(`#${hash}`);
     if (!el) return;
-    el.scrollIntoView({ behavior: 'smooth' });
+    (el.nextSibling as HTMLElement).focus();
     history.replaceState(undefined, '', `#${hash}`);
-    (el.nextSibling as HTMLElement).focus({ preventScroll: true });
-    (e.target as HTMLElement).blur();
   };
 }
 
@@ -22,8 +20,8 @@ export function SkipToArticle({
   const fm = 'skip-to-frontmatter';
   const art = 'skip-to-article';
 
-  const frontmatterHander = useCallback(() => makeSkipClickHander(fm), [frontmatter]);
-  const articleHandler = useCallback(() => makeSkipClickHander(art), [article]);
+  const frontmatterHandler = useCallback(() => makeSkipClickHandler(fm), [frontmatter]);
+  const articleHandler = useCallback(() => makeSkipClickHandler(art), [article]);
   return (
     <div
       className="fixed top-1 left-1 h-[0px] w-[0px] focus-within:z-40 focus-within:h-auto focus-within:w-auto bg-white overflow-hidden focus-within:p-2 focus-within:ring-1"
@@ -33,7 +31,7 @@ export function SkipToArticle({
         <a
           href={`#${fm}`}
           className="block px-2 py-1 text-black underline"
-          onClick={frontmatterHander}
+          onClick={frontmatterHandler}
         >
           Skip to article frontmatter
         </a>