@graphcommerce/next-ui 3.13.1 → 3.13.2

package/AppShell/AppShellHeader/index.tsx

@@ -323,12 +323,13 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
         type='button'
         classes={{ root: classes.fab }}
         onClick={() => router.go(closeSteps * -1)}
+        aria-label='Close'
       >
         <SvgImageSimple src={iconClose} />
       </Fab>
     ) : (
       <PageLink href='/' passHref>
-        <Fab size='small' classes={{ root: classes.fab }}>
+        <Fab size='small' classes={{ root: classes.fab }} aria-label='Close'>
           <SvgImageSimple src={iconClose} />
         </Fab>
       </PageLink>
@@ -345,6 +346,7 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
         size='small'
         className={classes.backButton}
         startIcon={backIcon}
+        aria-label='Back'
       >
         {historyOnClick ? up?.title : 'Back'}
       </Button>
@@ -353,7 +355,12 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
   if (!canClickBack && up?.href) {
     back = (
       <PageLink href={up?.href} passHref>
-        <Button variant='pill-link' className={classes.backButton} startIcon={backIcon}>
+        <Button
+          variant='pill-link'
+          className={classes.backButton}
+          startIcon={backIcon}
+          aria-label='Back'
+        >
           {up?.title ?? 'Back'}
         </Button>
       </PageLink>

package/AppShell/Logo.tsx

@@ -44,7 +44,7 @@ export default function Logo(props: LogoProps) {
 
   return (
     <PageLink href={href ?? '/'} passHref>
-      <a className={classes.link}>
+      <a className={classes.link} aria-label='Logo'>
         <Image
           {...{ ...image }}
           className={clsx(classes.logo, !alwaysShow && classes.logoHideOnMobile)}

package/AppShell/PlaceholderFab/index.tsx

@@ -20,7 +20,7 @@ export default function PlaceholderFab(props: PlaceholderFabProps) {
   const classes = useStyles(props)
 
   return (
-    <Fab className={classes.placeholderCartFab} size='large' {...fabProps}>
+    <Fab className={classes.placeholderCartFab} size='large' {...fabProps} aria-label='Placeholder'>
       <></>
     </Fab>
   )

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.13.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.13.1...@graphcommerce/next-ui@3.13.2) (2021-11-03)
+
+
+### Bug Fixes
+
+* various accessibility improvements ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
+
+
+
+
+
 ## [3.13.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.13.0...@graphcommerce/next-ui@3.13.1) (2021-11-03)
 
 

package/FlagAvatar/index.tsx

@@ -19,7 +19,7 @@ export default function FlagAvatar(props: FlagAvatarProps) {
       {...avatarProps}
       classes={classes}
       imgProps={{ loading: 'lazy' }}
-      alt=''
+      alt={country}
       src={`https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/4x3/${country}.svg`}
     >
       {country.toLocaleUpperCase()}

package/FramerScroller/components/SidebarGallery.tsx

@@ -261,7 +261,12 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
               ))}
             </Scroller>
             <m.div layout className={classes.topRight}>
-              <Fab size='small' className={classes.toggleIcon} onMouseUp={toggle}>
+              <Fab
+                size='small'
+                className={classes.toggleIcon}
+                onMouseUp={toggle}
+                aria-label='Toggle Fullscreen'
+              >
                 {!zoomed ? (
                   <SvgImageSimple src={iconFullscreen} />
                 ) : (

package/Pagination/index.tsx

@@ -66,13 +66,13 @@ export default function Pagination(props: PagePaginationProps) {
   const nextBtnProps = items[items.length - 1]
 
   const chevronLeft = (
-    <Fab size='medium' disabled={page === 1} color='inherit'>
+    <Fab size='medium' disabled={page === 1} color='inherit' aria-label='Previous page'>
       <SvgImageSimple src={iconChevronLeft} />
     </Fab>
   )
 
   const chevronRight = (
-    <Fab size='medium' disabled={page === count} color='inherit'>
+    <Fab size='medium' disabled={page === count} color='inherit' aria-label='Next page'>
       <SvgImageSimple src={iconChevronRight} />
     </Fab>
   )

package/Row/ContentLinks/index.tsx

@@ -33,7 +33,7 @@ export default function ContentLinks(props: ContentLinksProps) {
     <Container className={classes.root} maxWidth={false}>
       <ScrollerProvider scrollSnapAlign='none'>
         <Scroller className={classes.scroller} hideScrollbar>
-          <Typography variant='body1' component='h4' className={classes.title}>
+          <Typography variant='body1' component='h3' className={classes.title}>
             {title}
           </Typography>
           {children}

package/Snackbar/MessageSnackbarImpl.tsx

@@ -177,12 +177,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
                   {action}
                 </div>
               )}
-              <Fab
-                className={classes.close}
-                aria-label='Close snackbar'
-                size='small'
-                onClick={hideSnackbar}
-              >
+              <Fab className={classes.close} aria-label='Close' size='small' onClick={hideSnackbar}>
                 <SvgImageSimple src={iconClose} />
               </Fab>
             </>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.13.1",
+  "version": "3.13.2",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -11,7 +11,7 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@graphcommerce/framer-next-pages": "^2.107.3",
-    "@graphcommerce/framer-scroller": "^1.0.1",
+    "@graphcommerce/framer-scroller": "^1.0.2",
     "@graphcommerce/framer-sheet": "^2.105.15",
     "@graphcommerce/framer-utils": "^2.103.13",
     "@graphcommerce/graphql": "^2.105.3",
@@ -53,5 +53,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "c9eac9065491268d26c187d9fe864f7e9232c0fb"
+  "gitHead": "db0c7ff1a81b75e4e6eeee3717a1fc608d9c3c86"
 }