feat(checkout): CHECKOUT-6652 provide accessibility label for Address…

src/app/address/AddressSelect.tsx

@@ -7,6 +7,7 @@ import { DropdownTrigger } from '../ui/dropdown';
 
 import isEqualAddress from './isEqualAddress';
 import './AddressSelect.scss';
+import AddressSelectButton from './AddressSelectButton';
 import StaticAddress from './StaticAddress';
 
 export interface AddressSelectProps {
@@ -25,7 +26,7 @@ class AddressSelect extends PureComponent<AddressSelectProps> {
 
         return (
             <div className="form-field">
-                <div className="dropdown--select" role="combobox">
+                <div className="dropdown--select">
                     <DropdownTrigger
                         dropdown={
                             <AddressSelectMenu
@@ -99,21 +100,4 @@ const AddressSelectMenu: FunctionComponent<AddressSelectProps> = ({
     </ul>
 );
 
-type AddressSelectButtonProps = Pick<AddressSelectProps, 'selectedAddress' | 'addresses'>;
-
-const AddressSelectButton: FunctionComponent<AddressSelectButtonProps> = ({
-    selectedAddress,
-}) => (
-    <a
-        className="button dropdown-button dropdown-toggle--select"
-        href="#"
-        id="addressToggle"
-        onClick={ preventDefault() }
-    >
-        { selectedAddress ?
-            <StaticAddress address={ selectedAddress } /> :
-            <TranslatedString id="address.enter_address_action" /> }
-    </a>
-);
-
 export default memo(AddressSelect);

src/app/address/AddressSelectButton.tsx

@@ -0,0 +1,28 @@
+import React, { FunctionComponent } from 'react';
+
+import { preventDefault } from '../common/dom';
+import { withLanguage, TranslatedString, WithLanguageProps } from '../locale';
+
+import { AddressSelectProps } from './AddressSelect';
+import StaticAddress from './StaticAddress';
+
+type AddressSelectButtonProps = Pick<AddressSelectProps, 'selectedAddress' | 'addresses'>;
+
+const AddressSelectButton: FunctionComponent<AddressSelectButtonProps & WithLanguageProps> = ({
+    selectedAddress,
+    language,
+}) => (
+    <a
+        aria-description={ language.translate('address.enter_or_select_address_action') }
+        className="button dropdown-button dropdown-toggle--select"
+        href="#"
+        id="addressToggle"
+        onClick={ preventDefault() }
+    >
+        { selectedAddress ?
+            <StaticAddress address={ selectedAddress } /> :
+            <TranslatedString id="address.enter_address_action" /> }
+    </a>
+);
+
+export default withLanguage(AddressSelectButton);

src/app/locale/translations/en.json

@@ -22,6 +22,7 @@
             "custom_valid_error": "{label} is not valid",
             "edit_address_action": "Edit address",
             "enter_address_action": "Enter a new address",
+            "enter_or_select_address_action": "Enter or select a different address",
             "add_address_heading": "Add Address",
             "save_address_action": "Save Address",
             "first_name_label": "First Name",

src/app/shipping/ShippingAddress.spec.tsx

@@ -1,11 +1,15 @@
-import { mount, shallow } from 'enzyme';
+import { createCheckoutService, CheckoutService } from '@bigcommerce/checkout-sdk';
+import { mount, shallow, ReactWrapper } from 'enzyme';
 import { Formik } from 'formik';
 import { noop } from 'lodash';
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 
 import { StaticAddress } from '../address/';
 import { getFormFields } from '../address/formField.mock';
+import { CheckoutProvider } from '../checkout';
+import { getStoreConfig } from '../config/config.mock';
 import { getCustomer } from '../customer/customers.mock';
+import { createLocaleContext, LocaleContext, LocaleContextType } from '../locale';
 
 import { getConsignment } from './consignment.mock';
 import { getShippingAddress } from './shipping-addresses.mock';
@@ -15,26 +19,53 @@ import ShippingAddressForm from './ShippingAddressForm';
 import StaticAddressEditable from './StaticAddressEditable';
 
 describe('ShippingAddress Component', () => {
-    const defaultProps: ShippingAddressProps = {
-        consignments: [ getConsignment() ],
-        addresses: getCustomer().addresses,
-        shippingAddress: {
-            ...getShippingAddress(),
-            address1: 'x',
-        },
-        countriesWithAutocomplete: [],
-        isLoading: false,
-        isShippingStepPending: false,
-        hasRequestedShippingOptions: false,
-        formFields: getFormFields(),
-        onAddressSelect: jest.fn(),
-        onFieldChange: jest.fn(),
-        initialize: jest.fn(),
-        deinitialize: jest.fn(),
-        onUnhandledError: jest.fn(),
-        onUseNewAddress: jest.fn(),
+    let checkoutService: CheckoutService;
+    let localeContext: LocaleContextType;
+    let wrapperComponent: ReactWrapper;
+    let TestComponent: FunctionComponent<Partial<ShippingAddressProps>>;
+    let defaultProps: ShippingAddressProps;
+
+    beforeAll(() => {
+        checkoutService = createCheckoutService();
+        localeContext = createLocaleContext(getStoreConfig());
+
+        defaultProps = {
+            consignments: [ getConsignment() ],
+            addresses: getCustomer().addresses,
+            shippingAddress: {
+                ...getShippingAddress(),
+                address1: 'x',
+            },
+            countriesWithAutocomplete: [],
+            isLoading: false,
+            isShippingStepPending: false,
+            hasRequestedShippingOptions: false,
+            formFields: getFormFields(),
+            onAddressSelect: jest.fn(),
+            onFieldChange: jest.fn(),
+            initialize: jest.fn(),
+            deinitialize: jest.fn(),
+            onUnhandledError: jest.fn(),
+            onUseNewAddress: jest.fn(),
     };
 
+        TestComponent = props => (
+        <CheckoutProvider checkoutService={ checkoutService }>
+            <LocaleContext.Provider value={ localeContext }>
+                  <Formik
+                      initialValues={ {} }
+                      onSubmit={ noop }
+                  >
+                    <ShippingAddress
+                        { ...props }
+                        { ...defaultProps }
+                    />
+                </Formik>
+            </LocaleContext.Provider>
+        </CheckoutProvider>
+        );
+    });
+
     describe('when no method id is provided', () => {
         it('renders ShippingAddressForm with expected props', () => {
             const component = shallow(<ShippingAddress { ...defaultProps } />);
@@ -50,17 +81,9 @@ describe('ShippingAddress Component', () => {
         });
 
         it('calls onAddressSelect when an address is selected', async () => {
-            const component = mount(
-                <Formik
-                    initialValues={ {} }
-                    onSubmit={ noop }
-                >
-                    <ShippingAddress { ...defaultProps } />
-                </Formik>
-            );
-
-            component.find('#addressToggle').simulate('click');
-            component.find('#addressDropdown li').at(1).find('a').simulate('click');
+            wrapperComponent = mount(<TestComponent />);
+            wrapperComponent.find('#addressToggle').simulate('click');
+            wrapperComponent.find('#addressDropdown li').at(1).find('a').simulate('click');
 
             await new Promise(resolve => process.nextTick(resolve));