Merge pull request #2130 from graphcommerce-org/feature/GCOM-1221

Feature/gcom 1221 (a11y improvements)
graphcommerce-org · Jan 10, 2024 · f49f204 · f49f204 · vercel · Jan 10, 2024
2 parents 303d4ed + 7f02b50
commit f49f204
Show file tree

Hide file tree

Showing 22 changed files with 178 additions and 65 deletions.
diff --git a/.changeset/itchy-tables-drive.md b/.changeset/itchy-tables-drive.md
@@ -0,0 +1,5 @@
+---
+"@graphcommerce/cli": patch
+---
+
+fix: add graphql-codegen-typescript-validation-schema to resolutions …
diff --git a/examples/magento-graphcms/components/Layout/LayoutFull.tsx b/examples/magento-graphcms/components/Layout/LayoutFull.tsx
@@ -62,7 +62,7 @@ export function LayoutFull(props: LayoutFullProps) {
             )}
             <Fab
               href='/service'
-              aria-label={i18n._(/* i18n*/ `Account`)}
+              aria-label={i18n._(/* i18n*/ `Customer Service`)}
               size='large'
               color='inherit'
             >

diff --git a/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx b/examples/magento-graphcms/components/Layout/LayoutNavigation.tsx
@@ -128,7 +128,15 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
                 </DesktopNavItem>
               ))}
 
-              <DesktopNavItem onClick={() => selection.set([menu?.items?.[0]?.uid || ''])}>
+              <DesktopNavItem
+                onClick={() => selection.set([menu?.items?.[0]?.uid || ''])}
+                onKeyUp={(evt) => {
+                  if (evt.key === 'Enter') {
+                    selection.set([menu?.items?.[0]?.uid || ''])
+                  }
+                }}
+                tabIndex={0}
+              >
                 {menu?.items?.[0]?.name}
                 <IconSvg src={iconChevronDown} />
               </DesktopNavItem>
@@ -148,7 +156,7 @@ export function LayoutNavigation(props: LayoutNavigationProps) {
               )}
               <Fab
                 href='/service'
-                aria-label={i18n._(/* i18n */ 'Account')}
+                aria-label={i18n._(/* i18n */ 'Customer Service')}
                 size='large'
                 color='inherit'
               >

diff --git a/examples/magento-graphcms/locales/de.po b/examples/magento-graphcms/locales/de.po
@@ -40,6 +40,9 @@ msgstr "Neue Adresse hinzufügen"
 msgid "Add to Cart"
 msgstr "Zum Warenkorb hinzufügen"
 
+msgid "Add to cart quantity"
+msgstr "Zum Warenkorb hinzufügen Menge"
+
 msgid "Add to comparison"
 msgstr "Zum Vergleich hinzufügen"
 
@@ -334,9 +337,6 @@ msgstr "Ihr Kundenkonto wird geladen"
 msgid "Loading your data"
 msgstr "Ihre Daten werden geladen"
 
-msgid "Log in"
-msgstr "Anmelden"
-
 msgid "Log in to continue shopping"
 msgstr "Anmelden, um den Einkauf fortzusetzen"
 
@@ -563,10 +563,13 @@ msgid "Results for ‘{search}’"
 msgstr "Ergebnisse für ‘{search}’"
 
 msgid "Review"
-msgstr "Bewertung"
+msgstr "Rezension"
+
+msgid "Review score"
+msgstr "Rezensionsergebnis"
 
 msgid "Reviews"
-msgstr "Bewertungen"
+msgstr "Rezensions"
 
 msgid "Save changes"
 msgstr "Änderungen speichern"
@@ -622,6 +625,9 @@ msgstr "Abmelden"
 msgid "Sign up for our newsletter and stay updated"
 msgstr "Abonnieren Sie unseren Newsletter und bleiben Sie auf dem Laufenden"
 
+msgid "Skip to main content"
+msgstr "Zum Hauptinhalt springen"
+
 msgid "Some items in your cart contain errors, please update or remove them, then try again."
 msgstr "Einige Artikel im Warenkorb enthalten Fehler, bitte aktualisieren oder entfernen Sie diese, und versuchen Sie es erneut."
 
@@ -760,9 +766,6 @@ msgstr "Wir konnten keine Ergebnisse für {term} finden"
 msgid "We couldn't find the page you were looking for"
 msgstr "Die von Ihnen gesuchte Seite konnte nicht gefunden werden"
 
-msgid "Welcome back!"
-msgstr "Willkommen zurück!"
-
 msgid "We’re processing your payment, this will take a few seconds."
 msgstr "Wir bearbeiten Ihre Zahlung, dies dauert ein paar Sekunden."
 

diff --git a/examples/magento-graphcms/locales/en.po b/examples/magento-graphcms/locales/en.po
@@ -40,6 +40,9 @@ msgstr "Add new address"
 msgid "Add to Cart"
 msgstr "Add to Cart"
 
+msgid "Add to cart quantity"
+msgstr "Add to cart quantity"
+
 msgid "Add to comparison"
 msgstr "Add to comparison"
 
@@ -334,9 +337,6 @@ msgstr "Loading your account"
 msgid "Loading your data"
 msgstr "Loading your data"
 
-msgid "Log in"
-msgstr "Log in"
-
 msgid "Log in to continue shopping"
 msgstr "Log in to continue shopping"
 
@@ -565,6 +565,9 @@ msgstr "Results for ‘{search}’"
 msgid "Review"
 msgstr "Review"
 
+msgid "Review score"
+msgstr "Review score"
+
 msgid "Reviews"
 msgstr "Reviews"
 
@@ -622,6 +625,9 @@ msgstr "Sign out"
 msgid "Sign up for our newsletter and stay updated"
 msgstr "Sign up for our newsletter and stay updated"
 
+msgid "Skip to main content"
+msgstr "Skip to main content"
+
 msgid "Some items in your cart contain errors, please update or remove them, then try again."
 msgstr "Some items in your cart contain errors, please update or remove them, then try again."
 
@@ -760,9 +766,6 @@ msgstr "We couldn't find any results for {term}"
 msgid "We couldn't find the page you were looking for"
 msgstr "We couldn't find the page you were looking for"
 
-msgid "Welcome back!"
-msgstr "Welcome back!"
-
 msgid "We’re processing your payment, this will take a few seconds."
 msgstr "We’re processing your payment, this will take a few seconds."
 

diff --git a/examples/magento-graphcms/locales/es.po b/examples/magento-graphcms/locales/es.po
@@ -40,6 +40,9 @@ msgstr "Añadir nueva dirección"
 msgid "Add to Cart"
 msgstr "Añadir al carrito"
 
+msgid "Add to cart quantity"
+msgstr "Añadir al carrito cantidad"
+
 msgid "Add to comparison"
 msgstr "Añadir a la comparación"
 
@@ -334,9 +337,6 @@ msgstr "Cargando tu cuenta"
 msgid "Loading your data"
 msgstr "Cargando sus datos"
 
-msgid "Log in"
-msgstr "Iniciar sesión"
-
 msgid "Log in to continue shopping"
 msgstr "Iniciar sesión para continuar comprando"
 
@@ -565,6 +565,9 @@ msgstr "Resultados para ‘{search}’"
 msgid "Review"
 msgstr "Review"
 
+msgid "Review score"
+msgstr "Puntuación de revisión"
+
 msgid "Reviews"
 msgstr "Comentarios"
 
@@ -622,6 +625,9 @@ msgstr "Cerrar sesión"
 msgid "Sign up for our newsletter and stay updated"
 msgstr "Regístrese para nuestro boletín y manténgase actualizado"
 
+msgid "Skip to main content"
+msgstr "Saltar al contenido principal"
+
 msgid "Some items in your cart contain errors, please update or remove them, then try again."
 msgstr "Algunos artículos de su carrito contienen errores, actualícelos o elimínelos y vuelva a intentarlo."
 
@@ -760,9 +766,6 @@ msgstr "No se encontraron resultados para {term}"
 msgid "We couldn't find the page you were looking for"
 msgstr "No se encontró la página que estaba buscando"
 
-msgid "Welcome back!"
-msgstr "¡Bienvenido de nuevo!"
-
 msgid "We’re processing your payment, this will take a few seconds."
 msgstr "Estamos procesando su pago, esto tardará unos segundos."
 

diff --git a/examples/magento-graphcms/locales/fr.po b/examples/magento-graphcms/locales/fr.po
@@ -40,6 +40,9 @@ msgstr "Ajouter une nouvelle adresse"
 msgid "Add to Cart"
 msgstr "Ajouter au panier"
 
+msgid "Add to cart quantity"
+msgstr "Ajouter au panier quantité"
+
 msgid "Add to comparison"
 msgstr "Ajouter à la comparaison"
 
@@ -334,9 +337,6 @@ msgstr "Chargement de votre compte"
 msgid "Loading your data"
 msgstr "Chargement de vos données"
 
-msgid "Log in"
-msgstr "Identifiant"
-
 msgid "Log in to continue shopping"
 msgstr "Identifiez-vous pour continuer les achats"
 
@@ -565,6 +565,9 @@ msgstr "Résultats pour ‘{search}’"
 msgid "Review"
 msgstr "Review"
 
+msgid "Review score"
+msgstr "Note d'évaluation"
+
 msgid "Reviews"
 msgstr "Évaluations"
 
@@ -622,6 +625,9 @@ msgstr "Déconnexion"
 msgid "Sign up for our newsletter and stay updated"
 msgstr "Inscrivez-vous à notre newsletter et restez à jour"
 
+msgid "Skip to main content"
+msgstr "Passer au contenu principal"
+
 msgid "Some items in your cart contain errors, please update or remove them, then try again."
 msgstr "Certains articles de votre panier contiennent des erreurs, veuillez les mettre à jour ou les supprimer, puis réessayer."
 
@@ -760,9 +766,6 @@ msgstr "Nous n'avons trouvé aucun résultat pour {term}"
 msgid "We couldn't find the page you were looking for"
 msgstr "Nous n'avons pas pu trouver la page que vous cherchiez"
 
-msgid "Welcome back!"
-msgstr "Bienvenue !"
-
 msgid "We’re processing your payment, this will take a few seconds."
 msgstr "Nous traitons votre paiement, cela prendra quelques secondes."
 

diff --git a/examples/magento-graphcms/locales/it.po b/examples/magento-graphcms/locales/it.po
@@ -40,6 +40,9 @@ msgstr "Aggiungi nuovo indirizzo"
 msgid "Add to Cart"
 msgstr "Aggiungi al carrello"
 
+msgid "Add to cart quantity"
+msgstr "Aggiungi al carrello quantità"
+
 msgid "Add to comparison"
 msgstr "Aggiungi al confronto"
 
@@ -334,9 +337,6 @@ msgstr "Caricamento del tuo account"
 msgid "Loading your data"
 msgstr "Caricamento dati"
 
-msgid "Log in"
-msgstr "Accedi"
-
 msgid "Log in to continue shopping"
 msgstr "Accedi per continuare gli acquisti"
 
@@ -565,6 +565,9 @@ msgstr "Risultati per ‘{search}’"
 msgid "Review"
 msgstr "Review"
 
+msgid "Review score"
+msgstr "Punteggio di revisione"
+
 msgid "Reviews"
 msgstr "Recensioni"
 
@@ -622,6 +625,9 @@ msgstr "Esci"
 msgid "Sign up for our newsletter and stay updated"
 msgstr "Iscriviti alla nostra newsletter e rimani aggiornato"
 
+msgid "Skip to main content"
+msgstr "Passa al contenuto principale"
+
 msgid "Some items in your cart contain errors, please update or remove them, then try again."
 msgstr "Alcuni articoli nel tuo carrello contengono errori, aggiorna o rimuovi e riprova."
 
@@ -760,9 +766,6 @@ msgstr "Non abbiamo trovato nessun risultato per {term}"
 msgid "We couldn't find the page you were looking for"
 msgstr "Non abbiamo trovato la pagina che stavi cercando"
 
-msgid "Welcome back!"
-msgstr "Benvenuto!"
-
 msgid "We’re processing your payment, this will take a few seconds."
 msgstr "Stiamo elaborando il tuo pagamento, questo richiederà alcuni secondi."
 

diff --git a/examples/magento-graphcms/locales/nl.po b/examples/magento-graphcms/locales/nl.po
@@ -40,6 +40,9 @@ msgstr "Voeg nieuw adres toe"
 msgid "Add to Cart"
 msgstr "In winkelwagen"
 
+msgid "Add to cart quantity"
+msgstr "Voeg toe aan winkelwagen aantal"
+
 msgid "Add to comparison"
 msgstr "Toevoegen aan vergelijking"
 
@@ -334,9 +337,6 @@ msgstr "Uw account laden"
 msgid "Loading your data"
 msgstr "Uw gegevens laden"
 
-msgid "Log in"
-msgstr "Log in"
-
 msgid "Log in to continue shopping"
 msgstr "Log in om verder te winkelen"
 
@@ -565,6 +565,9 @@ msgstr "Resultaten voor ‘{search}’"
 msgid "Review"
 msgstr "Review"
 
+msgid "Review score"
+msgstr "Review score"
+
 msgid "Reviews"
 msgstr "Reviews"
 
@@ -622,6 +625,9 @@ msgstr "Uitloggen"
 msgid "Sign up for our newsletter and stay updated"
 msgstr "Abonneer u op onze nieuwsbrief en blijf op de hoogte"
 
+msgid "Skip to main content"
+msgstr "Ga naar hoofdinhoud"
+
 msgid "Some items in your cart contain errors, please update or remove them, then try again."
 msgstr "Sommige items in uw winkelwagen bevatten fouten, pas deze aan of verwijder ze en probeer het opnieuw."
 
@@ -760,9 +766,6 @@ msgstr "We konden geen resultaten vinden voor {term}"
 msgid "We couldn't find the page you were looking for"
 msgstr "We kunnen de pagina niet vinden waar u naar op zoek bent."
 
-msgid "Welcome back!"
-msgstr "Welkom terug!"
-
 msgid "We’re processing your payment, this will take a few seconds."
 msgstr "Uw betaling wordt verwerkt, dit duurt een paar seconden"
 

diff --git a/examples/magento-graphcms/pages/checkout/added.tsx b/examples/magento-graphcms/pages/checkout/added.tsx
@@ -14,6 +14,7 @@ import { LayoutHeaderClose } from '@graphcommerce/next-ui/Layout/components/Layo
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
 import { Box, Container, Divider, Typography } from '@mui/material'
+import { useEffect, useRef } from 'react'
 import { LayoutOverlay, LayoutOverlayProps, productListRenderer } from '../../components'
 import { graphqlSharedClient } from '../../lib/graphql/graphqlSsrClient'
 
@@ -22,6 +23,11 @@ type GetPageStaticProps = GetStaticProps<LayoutOverlayProps, Props>
 
 function CheckoutAdded() {
   const [addedItem, crossSellItems] = useCrosssellItems()
+  const a11yFocusRef = useRef<HTMLHeadingElement | null>(null)
+
+  useEffect(() => {
+    a11yFocusRef.current?.focus()
+  }, [])
 
   return (
     <>
@@ -77,15 +83,15 @@ function CheckoutAdded() {
         )}
 
         <Box gridArea='children'>
-          <Box sx={{ typography: 'h6' }}>
+          <Box sx={{ typography: 'h6' }} tabIndex={-1} ref={a11yFocusRef}>
             <Trans
               id='<0>{name}</0> has been added to your shopping cart!'
               components={{ 0: <strong /> }}
               values={{ name: addedItem?.product.name }}
             />
           </Box>
           {crossSellItems.length > 0 && (
-            <Box sx={{ typography: 'body1', display: { xs: 'none', md: 'block' } }}>
+            <Box sx={{ typography: 'body1', display: { xs: 'none', md: 'block' } }} tabIndex={0}>
               <Trans id='Complete your purchase' />
             </Box>
           )}

diff --git a/packages/ecommerce-ui/components/FormComponents/NumberFieldElement.tsx b/packages/ecommerce-ui/components/FormComponents/NumberFieldElement.tsx
@@ -146,8 +146,8 @@ export function NumberFieldElement<T extends FieldValues>(props: NumberFieldElem
               ),
             }}
             inputProps={{
-              ...inputProps,
               'aria-label': i18n._(/* i18n */ 'Number'),
+              ...inputProps,
               className: `${inputProps?.className ?? ''} ${classes.quantityInput}`,
               sx: {
                 typography: 'body1',