@graphcommerce/next-ui 8.0.0-canary.75 → 8.0.0-canary.77

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 8.0.0-canary.77
+
+### Patch Changes
+
+- [`e33660f`](https://github.com/graphcommerce-org/graphcommerce/commit/e33660f172466dcfa0ab7262cee612d9a3e47776) - a11y improvements (see https://github.com/graphcommerce-org/graphcommerce/issues/1995 for more info)
+  ([@FrankHarland](https://github.com/FrankHarland))
+
+## 8.0.0-canary.76
+
 ## 8.0.0-canary.75
 
 ## 8.0.0-canary.74

package/LayoutDefault/components/LayoutDefault.tsx

@@ -3,6 +3,7 @@ import { dvh } from '@graphcommerce/framer-utils'
 import { Box, SxProps, Theme } from '@mui/material'
 import { useTransform, useScroll } from 'framer-motion'
 import { LayoutProvider } from '../../Layout/components/LayoutProvider'
+import { SkipLink } from '../../SkipLink/SkipLink'
 import { extendableComponent } from '../../Styles'
 import { useFabSize } from '../../Theme'
 
@@ -67,6 +68,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
+      <SkipLink />
       <LayoutProvider scroll={scrollYOffset}>
         {beforeHeader}
         <Box
@@ -144,7 +146,10 @@ export function LayoutDefault(props: LayoutDefaultProps) {
         ) : (
           <div />
         )}
-        <div className={classes.children}>{children}</div>
+        <div className={classes.children}>
+          <div id='skip-nav' tabIndex={-1} />
+          {children}
+        </div>
         <div className={classes.footer}>{footer}</div>
       </LayoutProvider>
     </Box>

package/LayoutParts/DesktopNavBar.tsx

@@ -69,6 +69,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
           }}
           direction='left'
           size='small'
+          tabIndex={-1}
           className={`${classes.left} ${classes.button}`}
         >
           <IconSvg src={iconLeft ?? iconChevronLeft} />
@@ -94,6 +95,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
           }}
           direction='right'
           size='small'
+          tabIndex={-1}
           className={`${classes.right} ${classes.button}`}
         >
           <IconSvg src={iconRight ?? iconChevronRight} />

package/Navigation/components/NavigationFab.tsx

@@ -1,5 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Fab, styled, Box, SxProps, Theme, FabProps } from '@mui/material'
+import { Fab, styled, Box, SxProps, Theme, FabProps, useTheme } from '@mui/material'
 import { m } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
@@ -35,6 +35,8 @@ export function NavigationFab(props: NavigationFabProps) {
   const scrollY = useScrollY()
   const scrolled = useMotionValueValue(scrollY, (y) => y > 10)
 
+  const theme = useTheme()
+
   useEffect(() => {
     const clear = () => setOpenEl(null)
     router.events.on('routeChangeStart', clear)
@@ -54,19 +56,19 @@ export function NavigationFab(props: NavigationFabProps) {
     >
       <MotionDiv
         className={classes.wrapper}
-        sx={(theme) => ({
+        sx={{
           [theme.breakpoints.down('md')]: {
             opacity: '1 !important',
             transform: 'none !important',
           },
-        })}
+        }}
         style={{ opacity }}
       >
         <Fab
           color='inherit'
           aria-label='Open Menu'
           size='responsive'
-          sx={(theme) => ({
+          sx={{
             boxShadow: 'none',
             '&:hover, &:focus': {
               boxShadow: 'none',
@@ -75,7 +77,7 @@ export function NavigationFab(props: NavigationFabProps) {
             background: theme.palette.text.primary,
             pointerEvents: 'all',
             color: theme.palette.background.paper,
-          })}
+          }}
           className={classes.fab}
           {...fabProps}
         >
@@ -87,7 +89,7 @@ export function NavigationFab(props: NavigationFabProps) {
           )}
         </Fab>
         <MotionDiv
-          sx={(theme) => ({
+          sx={{
             pointerEvents: 'none',
             borderRadius: '99em',
             position: 'absolute',
@@ -96,7 +98,7 @@ export function NavigationFab(props: NavigationFabProps) {
             boxShadow: theme.shadows[6],
             top: 0,
             [theme.breakpoints.down('md')]: { opacity: '1 !important' },
-          })}
+          }}
           className={classes.shadow}
           style={{ opacity: shadowOpacity }}
         />

package/Navigation/components/NavigationOverlay.tsx

@@ -2,7 +2,7 @@ import { useMotionValueValue, useMotionSelector, dvw } from '@graphcommerce/fram
 import { i18n } from '@lingui/core'
 import { useTheme, Box, Fab, SxProps, Theme, useEventCallback, styled } from '@mui/material'
 import { m } from 'framer-motion'
-import React, { useEffect } from 'react'
+import React, { useEffect, useRef } from 'react'
 import type { LiteralUnion } from 'type-fest'
 import { IconSvg, useIconSvgSize } from '../../IconSvg'
 import { LayoutHeaderContent } from '../../Layout/components/LayoutHeaderContent'
@@ -71,12 +71,22 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
     } else selection.set([])
   })
 
+  const a11yFocusRef = useRef<HTMLButtonElement | null>(null)
+
   const selectedLevel = useMotionValueValue(selection, (s) => (s === false ? -1 : s.length))
   const selectionValue = useMotionValueValue(selection, (s) => (s ? s.join('') : s))
   const activeAndNotClosing = useMotionSelector([selection, closing], ([s, c]) =>
     c ? false : s !== false,
   )
 
+  useEffect(() => {
+    animating.set(true)
+
+    if (activeAndNotClosing) {
+      a11yFocusRef.current?.focus()
+    }
+  }, [activeAndNotClosing, animating])
+
   const afterClose = useEventCallback(() => {
     if (!closing.get()) return
     setTimeout(() => {
@@ -157,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>

package/SkipLink/SkipLink.tsx

@@ -0,0 +1,38 @@
+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,
+        zIndex: '-1',
+        marginLeft: theme.page.horizontal,
+        padding: theme.spacings.xxs,
+        backgroundColor: theme.palette.background.paper,
+        border: theme.palette.text.primary,
+        borderRadius: theme.shape.borderRadius,
+        '&:focus': {
+          zIndex: 9999,
+        },
+      })}
+    >
+      <Trans id='Skip to main content' />
+    </Link>
+  )
+}

package/TextInputNumber/TextInputNumber.tsx

@@ -162,8 +162,8 @@ export function TextInputNumber(props: TextInputNumberProps) {
         updateDisabled(e.target)
       }}
       inputProps={{
-        ...inputProps,
         'aria-label': i18n._(/* i18n */ 'Number'),
+        ...inputProps,
         sx: [
           {
             typography: 'body1',

package/index.ts

@@ -42,6 +42,7 @@ export * from './Row'
 export * from './SectionContainer/SectionContainer'
 export * from './SectionHeader/SectionHeader'
 export * from './Separator/Separator'
+export * from './SkipLink/SkipLink'
 export * from './Snackbar/ErrorSnackbar'
 export * from './Snackbar/MessageSnackbar'
 export * from './Snackbar/MessageSnackbarImpl'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.0-canary.75",
+  "version": "8.0.0-canary.77",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -26,13 +26,13 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.0.0-canary.75",
-    "@graphcommerce/framer-next-pages": "^8.0.0-canary.75",
-    "@graphcommerce/framer-scroller": "^8.0.0-canary.75",
-    "@graphcommerce/framer-utils": "^8.0.0-canary.75",
-    "@graphcommerce/image": "^8.0.0-canary.75",
-    "@graphcommerce/prettier-config-pwa": "^8.0.0-canary.75",
-    "@graphcommerce/typescript-config-pwa": "^8.0.0-canary.75",
+    "@graphcommerce/eslint-config-pwa": "^8.0.0-canary.77",
+    "@graphcommerce/framer-next-pages": "^8.0.0-canary.77",
+    "@graphcommerce/framer-scroller": "^8.0.0-canary.77",
+    "@graphcommerce/framer-utils": "^8.0.0-canary.77",
+    "@graphcommerce/image": "^8.0.0-canary.77",
+    "@graphcommerce/prettier-config-pwa": "^8.0.0-canary.77",
+    "@graphcommerce/typescript-config-pwa": "^8.0.0-canary.77",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",