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

[joeluong-sfcc]

Description

This PR fixes several focus accessibility issues:

• When entering invalid promo code, error message is now read when focusing on the input field
  • This works on v2 but not on v3 due to a documented regression where there is no feedback provided when entering an invalid promo code
• Navigating through the my account pages (account details, wishlist, order history, addresses) sets the focus onto the corresponding page heading instead of staying on the navigation link
• after removing a product from wishlist, focus is set to Wishlist heading instead of onto the body
• Opening up an address form causes focus to shift to the address form
• Closing out of address form by saving or cancelling changes focus to the edit button that opened the address form
• removing an address changes focus to the Addresses heading on the Addresses page
• Canceling out of address form or removing address in checkout page changes focus to the Shipping Addresses heading

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• (change1)

How to Test-Drive This PR

• (step1)

1. git checkout ju/fix-focus.W-14338017
2. npm ci
3. cd packages/template-retail-react-app
4. npm run start
5. navigate to my account pages, specifically addresses
6. observe that focus shifts automatically to the heading of the corresponding page
7. observe that hitting the adding/editting address buttons sets focus to address form
8. observe that canceling or saving address form sets focus to address heading

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[adamraya]

Similarly, we are missing handling the focus when users click the Cancel or Save buttons on the form opened by clicking the 'Edit' button in the Account Details page.

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

Line 158 in 2875980

<FormActionButtons onCancel={() => setIsEditing(false)} />

[joeluong-sfcc]

There wasn't a straightforward way to maintain a reference to the edit buttons since the edit buttons disappear from the DOM when in edit mode and get re-rendered after the form is closed, so for now I set the focus to the Profile/Password heading when you click the Cancel/Save buttons in edit mode