add keyboard focus to scroll top and remove wording to keep one button (

github#24817)
fpehar · Jan 31, 2022 · 934b255 · 934b255
1 parent 26829bb
commit 934b255
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/components/sidebar/SidebarNav.tsx b/components/sidebar/SidebarNav.tsx
@@ -19,6 +19,7 @@ export const SidebarNav = () => {
       role="banner"
     >
       <div
+        tabIndex={-1}
         className="d-flex flex-items-center p-4 position-sticky top-0 color-bg-default"
         style={{ zIndex: 3 }}
         id="github-logo"

diff --git a/components/ui/ScrollButton/ScrollButton.tsx b/components/ui/ScrollButton/ScrollButton.tsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
 import cx from 'classnames'
 import { ChevronUpIcon } from '@primer/octicons-react'
-import { useTranslation } from '../../hooks/useTranslation'
 
 export type ScrollButtonPropsT = {
   className?: string
@@ -10,7 +9,6 @@ export type ScrollButtonPropsT = {
 
 export const ScrollButton = ({ className, ariaLabel }: ScrollButtonPropsT) => {
   const [show, setShow] = useState(false)
-  const { t } = useTranslation(['scroll_button'])
 
   useEffect(() => {
     // show scroll button only when view is scrolled down
@@ -30,20 +28,21 @@ export const ScrollButton = ({ className, ariaLabel }: ScrollButtonPropsT) => {
   }, [])
 
   const onClick = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' })
+    window.scrollTo(0, 0)
+    const topOfPage = document.getElementById('github-logo')
+    if (topOfPage) topOfPage.focus()
   }
 
   return (
-    <div className={cx(className, 'transition-200', show ? 'opacity-100' : 'opacity-0')}>
+    <div
+      role="tooltip"
+      className={cx(className, 'transition-200', show ? 'opacity-100' : 'opacity-0')}
+    >
       <button
         onClick={onClick}
-        className="color-bg-default color-fg-default border-0 d-inline-block mr-2 f6"
-      >
-        {t('scroll_to_top')}
-      </button>
-      <button
-        onClick={onClick}
-        className={cx('color-bg-accent-emphasis color-fg-on-emphasis circle border-0')}
+        className={cx(
+          'tooltipped tooltipped-n tooltipped-no-delay color-bg-accent-emphasis color-fg-on-emphasis circle border-0'
+        )}
         style={{ width: 40, height: 40 }}
         aria-label={ariaLabel}
       >