@W-14338017@ Fix: accessibility focus for my account pages and promo code

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

@@ -6,6 +6,7 @@
 - Add correct keyboard interaction behavior for variation attribute radio buttons [#1587](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1587)
 - Change radio refinements (for example, filtering by Price) from radio inputs to styled buttons [#1605](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1605)
 - Update search refinements ARIA labels to include "add/remove filter" [#1607](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1607)
+- Improve focus behavior on my account pages, address forms, and promo codes [#1625](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1625)
 
 ### Other features
 

packages/template-retail-react-app/app/components/forms/address-fields.jsx

@@ -4,7 +4,8 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-import React from 'react'
+import React, {useEffect, useRef} from 'react'
+import {useIntl} from 'react-intl'
 import PropTypes from 'prop-types'
 import {
     Grid,
@@ -19,9 +20,24 @@ import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-cur
 const AddressFields = ({form, prefix = ''}) => {
     const {data: customer} = useCurrentCustomer()
     const fields = useAddressFields({form, prefix})
+    const intl = useIntl()
+
+    const addressFormRef = useRef()
+    useEffect(() => {
+        // Focus on the form when the component mounts for accessibility
+        addressFormRef?.current?.focus()
+    }, [])
 
     return (
-        <Stack spacing={5}>
+        <Stack
+            spacing={5}
+            aria-label={intl.formatMessage({
+                id: 'use_address_fields.label.address_form',
+                defaultMessage: 'Address Form'
+            })}
+            tabIndex="0"
+            ref={addressFormRef}
+        >
             <SimpleGrid columns={[1, 1, 2]} gap={5}>
                 <Field {...fields.firstName} />
                 <Field {...fields.lastName} />

packages/template-retail-react-app/app/components/forms/promo-code-fields.jsx

@@ -17,7 +17,7 @@ const PromoCodeFields = ({form, prefix = '', ...props}) => {
     const code = form.watch('code')
 
     return (
-        <Box {...props}>
+        <Box aria-labelledby="code-feedback" {...props}>
             <Field inputProps={{flex: 1, mr: 2}} {...fields.code}>
                 <Button
                     type="submit"

packages/template-retail-react-app/app/components/toggle-card/index.jsx

@@ -50,6 +50,7 @@ export const ToggleCard = ({
                             fontSize="lg"
                             lineHeight="30px"
                             color={disabled && !editing && 'gray.600'}
+                            tabIndex="0"
                         >
                             {title}
                         </Heading>

packages/template-retail-react-app/app/pages/account/addresses.jsx

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import React, {useState} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import {defineMessage, FormattedMessage, useIntl} from 'react-intl'
 import PropTypes from 'prop-types'
 
@@ -147,6 +147,12 @@ const AccountAddresses = () => {
     const showToast = useToast()
     const form = useForm()
 
+    const headingRef = useRef()
+    useEffect(() => {
+        // Focus the 'Addresses' header when the component mounts for accessibility
+        headingRef?.current?.focus()
+    }, [])
+
     const hasAddresses = addresses?.length > 0
     const showError = () => {
         showToast({
@@ -216,6 +222,8 @@ const AccountAddresses = () => {
                             status: 'success',
                             isClosable: true
                         })
+                        // Move focus to header after we successfully remove address
+                        headingRef?.current?.focus()
                     }
                 }
             )
@@ -234,12 +242,13 @@ const AccountAddresses = () => {
         } else {
             setSelectedAddressId(undefined)
             setIsEditing(!isEditing)
+            headingRef?.current?.focus()
         }
     }
 
     return (
         <Stack spacing={4} data-testid="account-addresses-page">
-            <Heading as="h1" fontSize="2xl">
+            <Heading as="h1" fontSize="2xl" tabIndex="0" ref={headingRef}>
                 <FormattedMessage
                     defaultMessage="Addresses"
                     id="account_addresses.title.addresses"

packages/template-retail-react-app/app/pages/account/order-history.jsx

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import React, {useEffect} from 'react'
+import React, {useEffect, useRef} from 'react'
 import {FormattedMessage, FormattedNumber, useIntl} from 'react-intl'
 import {useLocation} from 'react-router'
 import {
@@ -99,14 +99,20 @@ const AccountOrderHistory = () => {
 
     const pageUrls = usePageUrls({total: paging.total, limit})
 
+    const headingRef = useRef()
+    useEffect(() => {
+        // Focus the 'Order History' header when the component mounts for accessibility
+        headingRef?.current?.focus()
+    }, [])
+
     useEffect(() => {
         window.scrollTo(0, 0)
     }, [customer, searchParams.offset])
 
     return (
         <Stack spacing={4} data-testid="account-order-history-page">
             <Stack>
-                <Heading as="h1" fontSize="2xl">
+                <Heading as="h1" fontSize="2xl" tabIndex="0" ref={headingRef}>
                     <FormattedMessage
                         defaultMessage="Order History"
                         id="account_order_history.title.order_history"

packages/template-retail-react-app/app/pages/account/profile.jsx

 <FormActionButtons onCancel={() => setIsEditing(false)} /> 
 <FormActionButtons onCancel={() => setIsEditing(false)} /> 
@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
 
-import React, {useEffect, useState} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import {FormattedMessage, useIntl} from 'react-intl'
 import {
     Alert,
@@ -335,9 +335,15 @@ const PasswordCard = () => {
 }
 
 const AccountDetail = () => {
+    const headingRef = useRef()
+    useEffect(() => {
+        // Focus the 'Account Details' header when the component mounts for accessibility
+        headingRef?.current?.focus()
+    }, [])
+
     return (
         <Stack data-testid="account-detail-page" spacing={6}>
-            <Heading as="h1" fontSize="24px">
+            <Heading as="h1" fontSize="24px" tabIndex="0" ref={headingRef}>
                 <FormattedMessage
                     defaultMessage="Account Details"
                     id="account_detail.title.account_details"

packages/template-retail-react-app/app/pages/account/wishlist/index.jsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-import React, {useState} from 'react'
+import React, {useState, useEffect, useRef} from 'react'
 import {Stack, Heading} from '@chakra-ui/layout'
 import {FormattedMessage, useIntl} from 'react-intl'
 import {Box, Flex, Skeleton} from '@salesforce/retail-react-app/app/components/shared/ui'
@@ -30,6 +30,12 @@ const AccountWishlist = () => {
     const {formatMessage} = useIntl()
     const toast = useToast()
 
+    const headingRef = useRef()
+    useEffect(() => {
+        // Focus the 'Wishlist' header when the component mounts for accessibility
+        headingRef?.current?.focus()
+    }, [])
+
     const [selectedItem, setSelectedItem] = useState(undefined)
     const [isWishlistItemLoading, setWishlistItemLoading] = useState(false)
 
@@ -112,7 +118,7 @@ const AccountWishlist = () => {
 
     return (
         <Stack spacing={4} data-testid="account-wishlist-page">
-            <Heading as="h1" fontSize="2xl">
+            <Heading as="h1" fontSize="2xl" tabIndex="0" ref={headingRef}>
                 <FormattedMessage defaultMessage="Wishlist" id="account_wishlist.title.wishlist" />
             </Heading>
 
@@ -184,6 +190,8 @@ const AccountWishlist = () => {
                         secondaryActions={
                             <WishlistSecondaryButtonGroup
                                 productListItemId={item.id}
+                                // Focus to 'Wishlist' header after remove for accessibility
+                                focusElementOnRemove={headingRef}
                                 onClick={handleSecondaryAction}
                             />
                         }

packages/template-retail-react-app/app/pages/account/wishlist/partials/wishlist-secondary-button-group.jsx

@@ -47,7 +47,11 @@ export const REMOVE_WISHLIST_ITEM_CONFIRMATION_DIALOG_CONFIG = {
  * Renders secondary actions on a product-item card in the form of a button group.
  * Represents other actions you want the user to perform with the product-item (eg.: Remove or Edit)
  */
-const WishlistSecondaryButtonGroup = ({productListItemId, onClick = noop}) => {
+const WishlistSecondaryButtonGroup = ({
+    productListItemId,
+    focusElementOnRemove,
+    onClick = noop
+}) => {
     const variant = useItemVariant()
     const {data: customer} = useCurrentCustomer()
     const {data: wishList} = useWishList()
@@ -57,6 +61,9 @@ const WishlistSecondaryButtonGroup = ({productListItemId, onClick = noop}) => {
 
     const showRemoveItemConfirmation = () => {
         modalProps.onOpen()
+        // After we remove an item from the wishlist
+        // we need to place focus to the next logical place for accessibility
+        focusElementOnRemove?.current?.focus()
     }
 
     const deleteCustomerProductListItem = useShopperCustomersMutation(
@@ -118,6 +125,7 @@ const WishlistSecondaryButtonGroup = ({productListItemId, onClick = noop}) => {
 
 WishlistSecondaryButtonGroup.propTypes = {
     productListItemId: PropTypes.string,
+    focusElementOnRemove: PropTypes.object,
     onClick: PropTypes.func
 }
 

packages/template-retail-react-app/app/pages/checkout/index.test.js

@@ -329,7 +329,7 @@ test('Can proceed through checkout steps as guest', async () => {
     await user.type(screen.getByLabelText(/first name/i), 'Tester')
     await user.type(screen.getByLabelText(/last name/i), 'McTesting')
     await user.type(screen.getByLabelText(/phone/i), '(727) 555-1234')
-    await user.type(screen.getByLabelText(/address/i), '123 Main St')
+    await user.type(screen.getAllByLabelText(/address/i)[0], '123 Main St')
     await user.type(screen.getByLabelText(/city/i), 'Tampa')
     await user.selectOptions(screen.getByLabelText(/state/i), ['FL'])
     await user.type(screen.getByLabelText(/zip code/i), '33610')
@@ -564,7 +564,7 @@ test('Can add address during checkout as a registered customer', async () => {
     await user.type(screen.getByLabelText(/last name/i), 'McTester')
     await user.type(screen.getByLabelText(/phone/i), '7275551234')
     await user.selectOptions(screen.getByLabelText(/country/i), ['US'])
-    await user.type(screen.getByLabelText(/address/i), 'Tropicana Field')
+    await user.type(screen.getAllByLabelText(/address/i)[0], 'Tropicana Field')
     await user.type(screen.getByLabelText(/city/i), 'Tampa')
     await user.selectOptions(screen.getByLabelText(/state/i), ['FL'])
     await user.type(screen.getByLabelText(/zip code/i), '33712')

packages/template-retail-react-app/app/pages/checkout/partials/shipping-address-selection.jsx

@@ -195,19 +195,35 @@ const ShippingAddressSelection = ({
         form.reset({...address})
     }
 
+    const headingText = formatMessage({
+        defaultMessage: 'Shipping Address',
+        id: 'shipping_address.title.shipping_address'
+    })
+    const shippingAddressHeading = Array.from(document.querySelectorAll('h2')).find(
+        (element) => element.textContent === headingText
+    )
+
     const removeSavedAddress = async (addressId) => {
         if (addressId === selectedAddressId) {
             setSelectedAddressId(undefined)
             setIsEditingAddress(false)
             form.reset({addressId: ''})
         }
 
-        await removeCustomerAddress.mutateAsync({
-            parameters: {
-                customerId: customer.customerId,
-                addressName: addressId
+        await removeCustomerAddress.mutateAsync(
+            {
+                parameters: {
+                    customerId: customer.customerId,
+                    addressName: addressId
+                }
+            },
+            {
+                onSuccess: () => {
+                    // Focus on header after successful remove for accessibility
+                    shippingAddressHeading?.focus()
+                }
             }
-        })
+        )
     }
 
     // Opens/closes the 'add address' form. Notice that when toggling either state,
@@ -221,6 +237,8 @@ const ShippingAddressSelection = ({
             setSelectedAddressId(undefined)
             form.reset({addressId: ''})
             setIsEditingAddress(!isEditingAddress)
+            // Set focus to header after canceling out of form
+            shippingAddressHeading?.focus()
         }
 
         form.trigger()

packages/template-retail-react-app/app/static/translations/compiled/en-GB.json

@@ -2965,6 +2965,12 @@
       "value": "Address"
     }
   ],
+  "use_address_fields.label.address_form": [
+    {
+      "type": 0,
+      "value": "Address Form"
+    }
+  ],
   "use_address_fields.label.city": [
     {
       "type": 0,

packages/template-retail-react-app/app/static/translations/compiled/en-US.json

@@ -2965,6 +2965,12 @@
       "value": "Address"
     }
   ],
+  "use_address_fields.label.address_form": [
+    {
+      "type": 0,
+      "value": "Address Form"
+    }
+  ],
   "use_address_fields.label.city": [
     {
       "type": 0,

packages/template-retail-react-app/app/static/translations/compiled/en-XA.json

@@ -6317,6 +6317,20 @@
       "value": "]"
     }
   ],
+  "use_address_fields.label.address_form": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ȧḓḓřḗḗşş Ƒǿǿřḿ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "use_address_fields.label.city": [
     {
       "type": 0,

packages/template-retail-react-app/translations/en-GB.json

@@ -1270,6 +1270,9 @@
   "use_address_fields.label.address": {
     "defaultMessage": "Address"
   },
+  "use_address_fields.label.address_form": {
+    "defaultMessage": "Address Form"
+  },
   "use_address_fields.label.city": {
     "defaultMessage": "City"
   },

packages/template-retail-react-app/translations/en-US.json

@@ -1270,6 +1270,9 @@
   "use_address_fields.label.address": {
     "defaultMessage": "Address"
   },
+  "use_address_fields.label.address_form": {
+    "defaultMessage": "Address Form"
+  },
   "use_address_fields.label.city": {
     "defaultMessage": "City"
   },