fix: improve tab-based navigation

graphcommerce-org · Dec 13, 2023 · 011afa0 · 011afa0
1 parent 165c34a
commit 011afa0
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx b/packages/next-ui/LayoutDefault/components/LayoutDefault.tsx
@@ -147,7 +147,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
           <div />
         )}
         <div className={classes.children}>
-          <div id='skip-nav' />
+          <div id='skip-nav' tabIndex={-1} />
           {children}
         </div>
         <div className={classes.footer}>{footer}</div>

diff --git a/packages/next-ui/Navigation/components/NavigationOverlay.tsx b/packages/next-ui/Navigation/components/NavigationOverlay.tsx
@@ -81,6 +81,10 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
 
   useEffect(() => {
     animating.set(true)
+
+    if (activeAndNotClosing) {
+      a11yFocusRef.current?.focus()
+    }
   }, [activeAndNotClosing, animating])
 
   const afterClose = useEventCallback(() => {
@@ -127,16 +131,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
         },
       }}
     >
-      <MotionDiv
-        layout
-        layoutDependency={selectionValue}
-        sx={{ display: 'grid' }}
-        onLayoutAnimationComplete={() => {
-          if (selectedLevel === 1 && a11yFocusRef.current) {
-            a11yFocusRef.current.focus()
-          }
-        }}
-      >
+      <MotionDiv layout layoutDependency={selectionValue} sx={{ display: 'grid' }}>
         <Box
           className={classes.header}
           sx={(theme) => ({
@@ -160,7 +155,6 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
                   sx={{ boxShadow: 'none', my: fabMarginY }}
                   size='responsive'
                   aria-label={i18n._(/* i18n */ 'Back')}
-                  ref={a11yFocusRef}
                 >
                   <IconSvg src={iconChevronLeft} size='large' aria-hidden />
                 </Fab>
@@ -173,6 +167,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
                 sx={{ boxShadow: 'none', my: fabMarginY }}
                 size='responsive'
                 aria-label={i18n._(/* i18n */ 'Close')}
+                ref={a11yFocusRef}
               >
                 <IconSvg src={iconClose} size='large' aria-hidden />
               </Fab>

diff --git a/packages/next-ui/SkipLink/SkipLink.tsx b/packages/next-ui/SkipLink/SkipLink.tsx
@@ -2,10 +2,22 @@ import { Trans } from '@lingui/react'
 import { Link } from '@mui/material'
 
 export function SkipLink() {
+  const setFocus = (e) => {
+    e.preventDefault()
+    globalThis.document.querySelector<HTMLDivElement>('#skip-nav')?.focus()
+    globalThis.document.querySelector<HTMLDivElement>('#skip-nav')?.scrollIntoView()
+  }
+
   return (
     <Link
       href='#skip-nav'
       tabIndex={0}
+      onClick={setFocus}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          setFocus(e)
+        }
+      }}
       sx={(theme) => ({
         position: 'absolute',
         top: theme.page.vertical,