Change all ARIA labels to translatable messages

packages/template-retail-react-app/CHANGELOG.md

@@ -1,4 +1,5 @@
 ## v2.2.0-dev (Nov 3, 2023)
+
 - Replace max-age with s-maxage to only cache shared caches [#1564](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1564)
 
 ### Accessibility Improvements
@@ -12,6 +13,7 @@
 - Make security code tooltip receive keyboard focus [#1551](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1551)
 - Improve accessibility of quantity picker [#1552](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1552)
 - Improve keyboard accessibility of product scroller [#1559](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1559)
+- Improve keyboard accessibility of account menu and nav bar [#1572](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1572)
 
 ### Other Features
 

packages/template-retail-react-app/app/components/_app/index.jsx

@@ -257,18 +257,13 @@ const App = (props) => {
     }
 
     const onAccountClick = () => {
-        // Link to account page for registered customer, open auth modal otherwise
-        if (isRegistered) {
-            const path = buildUrl('/account')
-            history.push(path)
-        } else {
-            // if they already are at the login page, do not show login modal
-            if (new RegExp(`^/login$`).test(location.pathname)) return
-            authModal.onOpen()
-        }
+        // Link to account page if registered; Header component will show auth modal for guest users
+        const path = buildUrl('/account')
+        history.push(path)
     }
 
     const onWishlistClick = () => {
+        // Link to wishlist page if registered; Header component will show auth modal for guest users
         const path = buildUrl('/account/wishlist')
         history.push(path)
     }

packages/template-retail-react-app/app/components/field/index.jsx

@@ -19,6 +19,7 @@ import {
     Checkbox
 } from '@salesforce/retail-react-app/app/components/shared/ui'
 import {VisibilityIcon, VisibilityOffIcon} from '@salesforce/retail-react-app/app/components/icons'
+import {useIntl} from 'react-intl'
 
 const Field = ({
     name,
@@ -35,8 +36,18 @@ const Field = ({
     helpText,
     children
 }) => {
+    const intl = useIntl()
     const [hidePassword, setHidePassword] = useState(true)
     const PasswordIcon = hidePassword ? VisibilityIcon : VisibilityOffIcon
+    const passwordIconLabel = hidePassword
+        ? intl.formatMessage({
+              id: 'field.password.assistive_msg.show_password',
+              defaultMessage: 'Show password'
+          })
+        : intl.formatMessage({
+              id: 'field.password.assistive_msg.hide_password',
+              defaultMessage: 'Hide password'
+          })
     const inputType =
         type === 'password' && hidePassword ? 'password' : type === 'password' ? 'text' : type
     return (
@@ -51,8 +62,7 @@ const Field = ({
 
                 return (
                     <FormControl id={name} isInvalid={error}>
-                        {!['checkbox', 'radio'].includes(type) &&
-                            type !== 'hidden' &&
+                        {!['checkbox', 'radio', 'hidden'].includes(type) &&
                             (formLabel || <FormLabel>{label}</FormLabel>)}
 
                         <InputGroup>
@@ -83,7 +93,7 @@ const Field = ({
                                 <InputRightElement>
                                     <IconButton
                                         variant="ghosted"
-                                        aria-label="Show password"
+                                        aria-label={passwordIconLabel}
                                         icon={<PasswordIcon color="gray.500" boxSize={6} />}
                                         onClick={() => setHidePassword(!hidePassword)}
                                     />
@@ -120,7 +130,7 @@ const Field = ({
                             {children}
                         </InputGroup>
 
-                        {error && !type !== 'hidden' && (
+                        {error && type !== 'hidden' && (
                             <FormErrorMessage color="red.600">{error.message}</FormErrorMessage>
                         )}
 

packages/template-retail-react-app/app/components/header/index.jsx

@@ -49,8 +49,6 @@ import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation
 import LoadingSpinner from '@salesforce/retail-react-app/app/components/loading-spinner'
 import {isHydrated, noop} from '@salesforce/retail-react-app/app/utils/utils'
 
-const ENTER_KEY = 'Enter'
-
 const IconButtonWithRegistration = withRegistration(IconButton)
 /**
  * The header is the main source for accessing
@@ -86,7 +84,13 @@ const Header = ({
     const {isRegistered} = useCustomerType()
     const logout = useAuthHelper(AuthHelpers.Logout)
     const navigate = useNavigation()
-    const {isOpen, onClose, onOpen} = useDisclosure()
+    const {
+        getButtonProps: getAccountMenuButtonProps,
+        getDisclosureProps: getAccountMenuDisclosureProps,
+        isOpen: isAccountMenuOpen,
+        onClose: onAccountMenuClose,
+        onOpen: onAccountMenuOpen
+    } = useDisclosure()
     const [isDesktop] = useMediaQuery('(min-width: 992px)')
 
     const [showLoading, setShowLoading] = useState(false)
@@ -103,15 +107,10 @@ const Header = ({
         setShowLoading(false)
     }
 
-    const keyMap = {
-        Escape: () => onClose(),
-        Enter: () => onOpen()
-    }
-
     const handleIconsMouseLeave = () => {
         // don't close the menu if users enter the popover content
         setTimeout(() => {
-            if (!hasEnterPopoverContent.current) onClose()
+            if (!hasEnterPopoverContent.current) onAccountMenuClose()
         }, 100)
     }
 
@@ -154,51 +153,51 @@ const Header = ({
                             {...styles.search}
                         />
                     </Box>
-                    <AccountIcon
-                        {...styles.accountIcon}
-                        tabIndex={0}
-                        onMouseOver={isDesktop ? onOpen : noop}
-                        onKeyDown={(e) => {
-                            e.key === ENTER_KEY ? onMyAccountClick() : noop
-                        }}
-                        onClick={onMyAccountClick}
+                    <IconButtonWithRegistration
+                        icon={<AccountIcon {...styles.accountIcon} />}
                         aria-label={intl.formatMessage({
                             id: 'header.button.assistive_msg.my_account',
                             defaultMessage: 'My account'
                         })}
+                        variant="unstyled"
+                        onClick={onMyAccountClick}
+                        onMouseOver={isDesktop ? onAccountMenuOpen : noop}
                     />
 
                     {isRegistered && isHydrated() && (
                         <Popover
                             isLazy
                             arrowSize={15}
-                            isOpen={isOpen}
+                            isOpen={isAccountMenuOpen}
                             placement="bottom-end"
-                            onClose={onClose}
-                            onOpen={onOpen}
+                            onClose={onAccountMenuClose}
+                            onOpen={onAccountMenuOpen}
                         >
                             <PopoverTrigger>
-                                <ChevronDownIcon
-                                    aria-label="My account trigger"
+                                <IconButton
+                                    aria-label={intl.formatMessage({
+                                        id: 'header.button.assistive_msg.my_account_menu',
+                                        defaultMessage: 'Open account menu'
+                                    })}
+                                    icon={<ChevronDownIcon {...styles.arrowDown} />}
+                                    variant="unstyled"
+                                    {...getAccountMenuButtonProps()}
+                                    onMouseOver={onAccountMenuOpen}
                                     onMouseLeave={handleIconsMouseLeave}
-                                    onKeyDown={(e) => {
-                                        keyMap[e.key]?.(e)
-                                    }}
-                                    {...styles.arrowDown}
-                                    onMouseOver={onOpen}
-                                    tabIndex={0}
+                                    onClick={(e) => console.log('click', e.target)}
                                 />
                             </PopoverTrigger>
 
                             <PopoverContent
                                 {...styles.popoverContent}
                                 onMouseLeave={() => {
                                     hasEnterPopoverContent.current = false
-                                    onClose()
+                                    onAccountMenuClose()
                                 }}
                                 onMouseOver={() => {
                                     hasEnterPopoverContent.current = true
                                 }}
+                                {...getAccountMenuDisclosureProps()}
                             >
                                 <PopoverArrow />
                                 <PopoverHeader>

packages/template-retail-react-app/app/components/header/index.test.js

@@ -62,11 +62,11 @@ test('renders Header', async () => {
     renderWithProviders(<Header />)
 
     await waitFor(() => {
-        const menu = document.querySelector('button[aria-label="Menu"]')
-        const logo = document.querySelector('button[aria-label="Logo"]')
-        const account = document.querySelector('svg[aria-label="My account"]')
-        const cart = document.querySelector('button[aria-label="My cart, number of items: 0"]')
-        const wishlist = document.querySelector('button[aria-label="Wishlist"]')
+        const menu = screen.getByLabelText('Menu')
+        const logo = screen.getByLabelText('Logo')
+        const account = screen.getByLabelText('My account')
+        const cart = screen.getByLabelText('My cart, number of items: 0')
+        const wishlist = screen.getByLabelText('Wishlist')
         const searchInput = document.querySelector('input[type="search"]')
         expect(menu).toBeInTheDocument()
         expect(logo).toBeInTheDocument()
@@ -91,10 +91,10 @@ test('renders Header with event handlers', async () => {
         />
     )
     await waitFor(() => {
-        const menu = document.querySelector('button[aria-label="Menu"]')
-        const logo = document.querySelector('button[aria-label="Logo"]')
-        const account = document.querySelector('svg[aria-label="My account"]')
-        const cart = document.querySelector('button[aria-label="My cart, number of items: 0"]')
+        const menu = screen.getByLabelText('Menu')
+        const logo = screen.getByLabelText('Logo')
+        const account = screen.getByLabelText('My account')
+        const cart = screen.getByLabelText('My cart, number of items: 0')
         expect(menu).toBeInTheDocument()
         fireEvent.click(menu)
         expect(onMenuClick).toHaveBeenCalledTimes(1)
@@ -124,7 +124,7 @@ test.each(testBaskets)(
         renderWithProviders(<Header />)
 
         await waitFor(() => {
-            const cart = document.querySelector('button[aria-label="My cart, number of items: 0"]')
+            const cart = screen.getByLabelText('My cart, number of items: 0')
             const badge = document.querySelector(
                 'button[aria-label="My cart, number of items: 0"] .chakra-badge'
             )
@@ -141,9 +141,7 @@ test('renders cart badge when basket is loaded', async () => {
 
     await waitFor(() => {
         // Look for badge.
-        const badge = document.querySelector(
-            'button[aria-label="My cart, number of items: 2"] .chakra-badge'
-        )
+        const badge = screen.getByLabelText('My cart, number of items: 2')
         expect(badge).toBeInTheDocument()
     })
 })
@@ -156,10 +154,10 @@ test('route to account page when an authenticated users click on account icon',
 
     await waitFor(() => {
         // Look for account icon
-        const accountTrigger = document.querySelector('svg[aria-label="My account trigger"]')
+        const accountTrigger = screen.getByLabelText('Open account menu')
         expect(accountTrigger).toBeInTheDocument()
     })
-    const accountIcon = document.querySelector('svg[aria-label="My account"]')
+    const accountIcon = screen.getByLabelText('My account')
     fireEvent.click(accountIcon)
     await waitFor(() => {
         expect(history.push).toHaveBeenCalledWith(createPathWithDefaults('/account'))
@@ -181,7 +179,7 @@ test('route to wishlist page when an authenticated users click on wishlist icon'
 
     await waitFor(() => {
         // Look for account icon
-        const accountTrigger = document.querySelector('svg[aria-label="My account trigger"]')
+        const accountTrigger = screen.getByLabelText('Open account menu')
         expect(accountTrigger).toBeInTheDocument()
     })
     const wishlistIcon = screen.getByRole('button', {name: /wishlist/i})
@@ -207,10 +205,10 @@ test('shows dropdown menu when an authenticated users hover on the account icon'
 
     await waitFor(() => {
         // Look for account icon
-        const accountTrigger = document.querySelector('svg[aria-label="My account trigger"]')
+        const accountTrigger = screen.getByLabelText('Open account menu')
         expect(accountTrigger).toBeInTheDocument()
     })
-    const accountIcon = document.querySelector('svg[aria-label="My account"]')
+    const accountIcon = screen.getByLabelText('My account')
     fireEvent.click(accountIcon)
     await waitFor(() => {
         expect(history.push).toHaveBeenCalledWith(createPathWithDefaults('/account'))

packages/template-retail-react-app/app/components/list-menu/index.jsx

@@ -225,6 +225,7 @@ const ListMenu = ({root, maxColumns = MAXIMUM_NUMBER_COLUMNS}) => {
     const theme = useTheme()
     const {baseStyle} = theme.components.ListMenu
     const [ariaBusy, setAriaBusy] = useState(true)
+    const intl = useIntl()
 
     useEffect(() => {
         setAriaBusy(false)
@@ -233,7 +234,10 @@ const ListMenu = ({root, maxColumns = MAXIMUM_NUMBER_COLUMNS}) => {
     return (
         <nav
             id="list-menu"
-            aria-label="main"
+            aria-label={intl.formatMessage({
+                id: 'list_menu.nav.assistive_msg',
+                defaultMessage: 'Main navigation'
+            })}
             aria-live="polite"
             aria-busy={ariaBusy}
             aria-atomic="true"

packages/template-retail-react-app/app/components/list-menu/index.test.js

@@ -19,7 +19,7 @@ describe('ListMenu', () => {
         const categoryTrigger = screen.getByText(/Mens/i)
         await user.hover(categoryTrigger)
         expect(categoryTrigger).toBeInTheDocument()
-        expect(screen.getByRole('navigation', {name: 'main'})).toBeInTheDocument()
+        expect(screen.getByRole('navigation', {name: 'Main navigation'})).toBeInTheDocument()
         const suit = screen.getByText(/suits/i)
         expect(suit).toBeInTheDocument()
     })

packages/template-retail-react-app/app/components/pagination/index.jsx

@@ -53,7 +53,10 @@ const Pagination = (props) => {
                 // as intended, the workaround is to use the current url when its disabled.
                 href={prev || currentURL}
                 to={prev || currentURL}
-                aria-label="Previous Page"
+                aria-label={intl.formatMessage({
+                    id: 'pagination.link.prev.assistive_msg',
+                    defaultMessage: 'Previous Page'
+                })}
                 isDisabled={!prev}
                 variant="link"
             >
@@ -102,7 +105,10 @@ const Pagination = (props) => {
                 // as intended, the workaround is to use the current url when its disabled.
                 href={next || currentURL}
                 to={next || currentURL}
-                aria-label="Next Page"
+                aria-label={intl.formatMessage({
+                    id: 'pagination.link.next.assistive_msg',
+                    defaultMessage: 'Next Page'
+                })}
                 isDisabled={!next}
                 variant="link"
             >

packages/template-retail-react-app/app/page-designer/layouts/carousel/index.jsx

@@ -18,6 +18,7 @@ import {
 import {Component, regionPropType} from '@salesforce/commerce-sdk-react/components'
 import {ChevronLeftIcon, ChevronRightIcon} from '@salesforce/retail-react-app/app/components/icons'
 import {useEffect} from 'react'
+import {useIntl} from '@salesforce/retail-react-app/node_modules/react-intl/index'
 
 /**
  * Display child components in a carousel slider manner. Configurations include the number of
@@ -37,6 +38,7 @@ import {useEffect} from 'react'
  * @returns {React.ReactElement} - Carousel component.
  */
 export const Carousel = (props = {}) => {
+    const intl = useIntl()
     const scrollRef = useRef()
     const breakpoint = useBreakpoint()
     const [hasOverflow, setHasOverflow] = useState(false)
@@ -172,11 +174,14 @@ export const Carousel = (props = {}) => {
                     {/* boxShadow requires !important --> https://github.com/chakra-ui/chakra-ui/issues/3553 */}
                     <IconButton
                         data-testid="carousel-nav-left"
-                        aria-label="Scroll carousel left"
+                        aria-label={intl.formatMessage({
+                            id: 'carousel.button.scroll_left.assistive_msg',
+                            defaultMessage: 'Scroll carousel left'
+                        })}
                         icon={<ChevronLeftIcon color="black" />}
                         borderRadius="full"
                         colorScheme="whiteAlpha"
-                        boxShadow={'0 3px 10px rgb(0 0 0 / 20%) !important'}
+                        boxShadow="0 3px 10px rgb(0 0 0 / 20%) !important"
                         onClick={() => scroll(-1)}
                     />
                 </Box>
@@ -191,11 +196,14 @@ export const Carousel = (props = {}) => {
                     {/* boxShadow requires !important --> https://github.com/chakra-ui/chakra-ui/issues/3553 */}
                     <IconButton
                         data-testid="carousel-nav-right"
-                        aria-label="Scroll carousel right"
+                        aria-label={intl.formatMessage({
+                            id: 'carousel.button.scroll_right.assistive_msg',
+                            defaultMessage: 'Scroll carousel right'
+                        })}
                         icon={<ChevronRightIcon color="black" />}
                         borderRadius="full"
                         colorScheme="whiteAlpha"
-                        boxShadow={'0 3px 10px rgb(0 0 0 / 20%) !important'}
+                        boxShadow="0 3px 10px rgb(0 0 0 / 20%) !important"
                         onClick={() => scroll(1)}
                     />
                 </Box>