Merge pull request #44799 from github/repo-sync

Repo sync

Author: docs-bot

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

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',