From b0a315b9d856c43a1bbdd37a7a23488d986d50a2 Mon Sep 17 00:00:00 2001
From: Steve S <steves@users.noreply.github.com>
Date: Wed, 17 Jun 2026 16:55:56 -0400
Subject: [PATCH] Fix scroll-to-top button accessibility at small viewports
 (#61793)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../ui/ScrollButton/ScrollButton.module.scss          |  9 +++++++++
 src/frame/components/ui/ScrollButton/ScrollButton.tsx | 11 ++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/frame/components/ui/ScrollButton/ScrollButton.module.scss b/src/frame/components/ui/ScrollButton/ScrollButton.module.scss
index ca0df1e259c4..6c1b83ad9be1 100644
--- a/src/frame/components/ui/ScrollButton/ScrollButton.module.scss
+++ b/src/frame/components/ui/ScrollButton/ScrollButton.module.scss
@@ -4,10 +4,12 @@
 
 .opacity0 {
   opacity: 0;
+  pointer-events: none;
 }
 
 .opacity100 {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .customFocus:focus:not(:focus-visible), // override primer css specificity
@@ -21,3 +23,10 @@
   width: 2.5rem;
   height: 2.5rem;
 }
+
+// When the viewport is too short to show the button permanently,
+// reveal it on keyboard focus so it remains accessible (a11y #16466).
+.scrollWrapper:has(.scrollButton:focus-visible) {
+  opacity: 1;
+  pointer-events: auto;
+}
diff --git a/src/frame/components/ui/ScrollButton/ScrollButton.tsx b/src/frame/components/ui/ScrollButton/ScrollButton.tsx
index b022583f798b..0e190ea7383d 100644
--- a/src/frame/components/ui/ScrollButton/ScrollButton.tsx
+++ b/src/frame/components/ui/ScrollButton/ScrollButton.tsx
@@ -64,12 +64,17 @@ export const ScrollButton = ({ className, ariaLabel }: ScrollButtonPropsT) => {
   return (
     <div
       role="tooltip"
-      className={cx(className, transition200, isVisible ? opacity100 : opacity0)}
-      aria-hidden={!isVisible}
+      className={cx(
+        className,
+        transition200,
+        isVisible ? opacity100 : opacity0,
+        styles.scrollWrapper,
+      )}
+      aria-hidden={!show}
     >
       <button
         onClick={onClick}
-        tabIndex={isVisible ? 0 : -1}
+        tabIndex={show ? 0 : -1}
         className={cx(
           'ghd-scroll-to-top', // for data tracking, see events.ts
           'tooltipped tooltipped-n tooltipped-no-delay btn circle border-1',