@W-12627114: Set aria label for the address forms based on the address type

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

@@ -2,6 +2,7 @@
 
 ### Bug Fixes
 
+- A11y: Add aria-label to the address form based on the address type [#1904](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1904)
 - A11y: Account Nav fixes [#1884](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1884)
 - A11y: Replace `<p>` tags with header tag in home page Features section [#1902](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1902)
 - Out of stock and low stock items are removed from cart and checkout as unavailable products [#1865](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1865)

packages/template-retail-react-app/app/components/forms/address-fields.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, useRef} from 'react'
-import {useIntl} from 'react-intl'
+import {defineMessage, useIntl} from 'react-intl'
 import PropTypes from 'prop-types'
 import {
     Grid,
@@ -16,8 +16,14 @@ import {
 import useAddressFields from '@salesforce/retail-react-app/app/components/forms/useAddressFields'
 import Field from '@salesforce/retail-react-app/app/components/field'
 import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
+import {MESSAGE_PROPTYPE} from '@salesforce/retail-react-app/app/utils/locale'
 
-const AddressFields = ({form, prefix = ''}) => {
+const defaultFormTitleAriaLabel = defineMessage({
+    defaultMessage: 'Address Form',
+    id: 'use_address_fields.label.address_form'
+})
+
+const AddressFields = ({form, prefix = '', formTitleAriaLabel = defaultFormTitleAriaLabel}) => {
     const {data: customer} = useCurrentCustomer()
     const fields = useAddressFields({form, prefix})
     const intl = useIntl()
@@ -31,10 +37,7 @@ const AddressFields = ({form, prefix = ''}) => {
     return (
         <Stack
             spacing={5}
-            aria-label={intl.formatMessage({
-                id: 'use_address_fields.label.address_form',
-                defaultMessage: 'Address Form'
-            })}
+            aria-label={intl.formatMessage(formTitleAriaLabel)}
             tabIndex="0"
             ref={addressFormRef}
         >
@@ -64,7 +67,10 @@ AddressFields.propTypes = {
     form: PropTypes.object.isRequired,
 
     /** Optional prefix for field names */
-    prefix: PropTypes.string
+    prefix: PropTypes.string,
+
+    /** Optional aria label to use for the address form */
+    formTitleAriaLabel: MESSAGE_PROPTYPE
 }
 
 export default AddressFields

packages/template-retail-react-app/app/pages/account/addresses.test.js

@@ -100,7 +100,27 @@ test('Allows customer to add addresses', async () => {
         expect(screen.getByText(/no saved addresses/i)).toBeInTheDocument()
     })
 
-    await helperAddNewAddress(user)
+    // Add new address
+    await user.click(screen.getByText(/add address/i))
+
+    // Address Form must be present
+    expect(screen.getByLabelText('Address Form')).toBeInTheDocument()
+
+    await user.type(screen.getByLabelText('First Name'), 'Test')
+    await user.type(screen.getByLabelText('Last Name'), 'McTester')
+    await user.type(screen.getByLabelText('Phone'), '7275551234')
+    await user.type(screen.getByLabelText('Address'), '123 Main St')
+    await user.type(screen.getByLabelText('City'), 'Tampa')
+    await user.selectOptions(screen.getByLabelText(/state/i), ['FL'])
+    await user.type(screen.getByLabelText('Zip Code'), '33712')
+
+    global.server.use(
+        rest.get('*/customers/:customerId', (req, res, ctx) =>
+            res(ctx.delay(0), ctx.status(200), ctx.json(mockedRegisteredCustomer))
+        )
+    )
+    await user.click(screen.getByText(/^Save$/i))
+
     expect(await screen.findByText(/123 Main St/i)).toBeInTheDocument()
 })
 

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

@@ -347,6 +347,9 @@ test('Can proceed through checkout steps as guest', async () => {
     // Email should be displayed in previous step summary
     expect(screen.getByText('[email protected]')).toBeInTheDocument()
 
+    // Shipping Address Form must be present
+    expect(screen.getByLabelText('Shipping Address Form')).toBeInTheDocument()
+
     // Fill out shipping address form and submit
     await user.type(screen.getByLabelText(/first name/i), 'Tester')
     await user.type(screen.getByLabelText(/last name/i), 'McTesting')
@@ -540,6 +543,8 @@ test('Can edit address during checkout as a registered customer', async () => {
         expect(screen.getByTestId('sf-shipping-address-edit-form')).not.toBeEmptyDOMElement()
     )
 
+    // Shipping Address Form must be present
+    expect(screen.getByLabelText('Shipping Address Form')).toBeInTheDocument()
     expect(screen.getByLabelText(/first name/i)).toBeInTheDocument()
 
     // Edit and save the address
@@ -581,6 +586,9 @@ test('Can add address during checkout as a registered customer', async () => {
     // Add address
     await user.click(screen.getByText(/add new address/i))
 
+    // Shipping Address Form must be present
+    expect(screen.getByLabelText('Shipping Address Form')).toBeInTheDocument()
+
     const firstName = await screen.findByLabelText(/first name/i)
     await user.type(firstName, 'Test2')
     await user.type(screen.getByLabelText(/last name/i), 'McTester')

packages/template-retail-react-app/app/pages/checkout/partials/payment.jsx

@@ -6,7 +6,7 @@
  */
 import React, {useState} from 'react'
 import PropTypes from 'prop-types'
-import {FormattedMessage, useIntl} from 'react-intl'
+import {defineMessage, FormattedMessage, useIntl} from 'react-intl'
 import {
     Box,
     Button,
@@ -141,6 +141,11 @@ const Payment = () => {
         }
     })
 
+    const billingAddressAriaLabel = defineMessage({
+        defaultMessage: 'Billing Address Form',
+        id: 'checkout_payment.label.billing_address_form'
+    })
+
     return (
         <ToggleCard
             id="step-3"
@@ -220,6 +225,7 @@ const Payment = () => {
                         <ShippingAddressSelection
                             form={billingAddressForm}
                             selectedAddress={selectedBillingAddress}
+                            formTitleAriaLabel={billingAddressAriaLabel}
                             hideSubmitButton
                         />
                     )}

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

@@ -38,7 +38,8 @@ const ShippingAddressEditForm = ({
     toggleAddressEdit,
     hideSubmitButton,
     form,
-    submitButtonLabel
+    submitButtonLabel,
+    formTitleAriaLabel
 }) => {
     const {formatMessage} = useIntl()
 
@@ -62,7 +63,7 @@ const ShippingAddressEditForm = ({
                 )}
 
                 <Stack spacing={6}>
-                    <AddressFields form={form} />
+                    <AddressFields form={form} formTitleAriaLabel={formTitleAriaLabel} />
 
                     {hasSavedAddresses && !hideSubmitButton ? (
                         <FormActionButtons
@@ -96,7 +97,8 @@ ShippingAddressEditForm.propTypes = {
     toggleAddressEdit: PropTypes.func,
     hideSubmitButton: PropTypes.bool,
     form: PropTypes.object,
-    submitButtonLabel: MESSAGE_PROPTYPE
+    submitButtonLabel: MESSAGE_PROPTYPE,
+    formTitleAriaLabel: MESSAGE_PROPTYPE
 }
 
 const submitButtonMessage = defineMessage({
@@ -108,6 +110,7 @@ const ShippingAddressSelection = ({
     form,
     selectedAddress,
     submitButtonLabel = submitButtonMessage,
+    formTitleAriaLabel,
     hideSubmitButton = false,
     onSubmit = async () => null
 }) => {
@@ -322,6 +325,7 @@ const ShippingAddressSelection = ({
                                                         hideSubmitButton={hideSubmitButton}
                                                         form={form}
                                                         submitButtonLabel={submitButtonLabel}
+                                                        formTitleAriaLabel={formTitleAriaLabel}
                                                     />
                                                 )}
                                         </React.Fragment>
@@ -375,6 +379,7 @@ const ShippingAddressSelection = ({
                         hideSubmitButton={hideSubmitButton}
                         form={form}
                         submitButtonLabel={submitButtonLabel}
+                        formTitleAriaLabel={formTitleAriaLabel}
                     />
                 )}
 
@@ -406,6 +411,9 @@ ShippingAddressSelection.propTypes = {
     /** Override the submit button label */
     submitButtonLabel: MESSAGE_PROPTYPE,
 
+    /** aria label to use for the address group */
+    formTitleAriaLabel: MESSAGE_PROPTYPE,
+
     /** Show or hide the submit button (for controlling the form from outside component) */
     hideSubmitButton: PropTypes.bool,
 

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

@@ -26,6 +26,10 @@ const submitButtonMessage = defineMessage({
     defaultMessage: 'Continue to Shipping Method',
     id: 'shipping_address.button.continue_to_shipping'
 })
+const shippingAddressAriaLabel = defineMessage({
+    defaultMessage: 'Shipping Address Form',
+    id: 'shipping_address.label.shipping_address_form'
+})
 
 export default function ShippingAddress() {
     const {formatMessage} = useIntl()
@@ -120,6 +124,7 @@ export default function ShippingAddress() {
                     selectedAddress={selectedShippingAddress}
                     submitButtonLabel={submitButtonMessage}
                     onSubmit={submitAndContinue}
+                    formTitleAriaLabel={shippingAddressAriaLabel}
                 />
             </ToggleCardEdit>
             {selectedShippingAddress && (

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

@@ -843,6 +843,12 @@
       "value": "Credit Card"
     }
   ],
+  "checkout_payment.label.billing_address_form": [
+    {
+      "type": 0,
+      "value": "Billing Address Form"
+    }
+  ],
   "checkout_payment.label.same_as_shipping": [
     {
       "type": 0,
@@ -2899,6 +2905,12 @@
       "value": "Continue to Shipping Method"
     }
   ],
+  "shipping_address.label.shipping_address_form": [
+    {
+      "type": 0,
+      "value": "Shipping Address Form"
+    }
+  ],
   "shipping_address.title.shipping_address": [
     {
       "type": 0,

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

@@ -843,6 +843,12 @@
       "value": "Credit Card"
     }
   ],
+  "checkout_payment.label.billing_address_form": [
+    {
+      "type": 0,
+      "value": "Billing Address Form"
+    }
+  ],
   "checkout_payment.label.same_as_shipping": [
     {
       "type": 0,
@@ -2899,6 +2905,12 @@
       "value": "Continue to Shipping Method"
     }
   ],
+  "shipping_address.label.shipping_address_form": [
+    {
+      "type": 0,
+      "value": "Shipping Address Form"
+    }
+  ],
   "shipping_address.title.shipping_address": [
     {
       "type": 0,

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

@@ -1707,6 +1707,20 @@
       "value": "]"
     }
   ],
+  "checkout_payment.label.billing_address_form": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Ɓīŀŀīƞɠ Ȧḓḓřḗḗşş Ƒǿǿřḿ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "checkout_payment.label.same_as_shipping": [
     {
       "type": 0,
@@ -6147,6 +6161,20 @@
       "value": "]"
     }
   ],
+  "shipping_address.label.shipping_address_form": [
+    {
+      "type": 0,
+      "value": "["
+    },
+    {
+      "type": 0,
+      "value": "Şħīƥƥīƞɠ Ȧḓḓřḗḗşş Ƒǿǿřḿ"
+    },
+    {
+      "type": 0,
+      "value": "]"
+    }
+  ],
   "shipping_address.title.shipping_address": [
     {
       "type": 0,

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

@@ -325,6 +325,9 @@
   "checkout_payment.heading.credit_card": {
     "defaultMessage": "Credit Card"
   },
+  "checkout_payment.label.billing_address_form": {
+    "defaultMessage": "Billing Address Form"
+  },
   "checkout_payment.label.same_as_shipping": {
     "defaultMessage": "Same as shipping address"
   },
@@ -1232,6 +1235,9 @@
   "shipping_address.button.continue_to_shipping": {
     "defaultMessage": "Continue to Shipping Method"
   },
+  "shipping_address.label.shipping_address_form": {
+    "defaultMessage": "Shipping Address Form"
+  },
   "shipping_address.title.shipping_address": {
     "defaultMessage": "Shipping Address"
   },

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

@@ -325,6 +325,9 @@
   "checkout_payment.heading.credit_card": {
     "defaultMessage": "Credit Card"
   },
+  "checkout_payment.label.billing_address_form": {
+    "defaultMessage": "Billing Address Form"
+  },
   "checkout_payment.label.same_as_shipping": {
     "defaultMessage": "Same as shipping address"
   },
@@ -1232,6 +1235,9 @@
   "shipping_address.button.continue_to_shipping": {
     "defaultMessage": "Continue to Shipping Method"
   },
+  "shipping_address.label.shipping_address_form": {
+    "defaultMessage": "Shipping Address Form"
+  },
   "shipping_address.title.shipping_address": {
     "defaultMessage": "Shipping Address"
   },