Improve accessibility of addresses field

[gcamacho079]

Description

• Adjust address card label background to meet contrast minimum (Resolves DEV-688)
• Update address labels to use semantic headings (Resolves DEV-697)
• Add edit menu option to address card for keyboard users (Resolves DEV-689, DEV-690)
• Use semantic buttons in menu for added keyboard support (i.e. activation via spacebar press) (Resolves DEV-699)
• Uses semantic list for addresses and moves “add” button out of container (Resolves DEV-691)

Related issues

[linear]

DEV-688 My Address badge text doesn't meet minimum contrast

Page Area:

Address tab

Issue Description:

Text inside the badge is not contrasted enough from background

Action:

Darken the text color or lighten the background so there's a 4.5:1 ratio between colors

Screenshot/Code Snippet:

Screen Shot 2022-06-02 at 2.22.23 PM.png

Resolves CMS-235

DEV-697 Address badges serve as headings for addresses, but do not have heading markup

Page Area:

Address tab - address card

Issue Description:

Blue badges on the address cards serve as a heading for the card, but do not have heading markup

Action:

Use a semantic heading for the badge text

Screenshot/Code Snippet:

Screenshot showing a "My Address" badge at the top of an address card

Screen Shot 2022-06-02 at 2.22.23 PM.png

Resolves CMS-244

DEV-689 Users can't edit addresses using keyboard only

Page Area:

Address tab

Issue Description:

The edit address functionality is tied to a click handler on a div, making it inaccessible to keyboard users

Action:

Because there is already a button inside the div, the recommendation is to create an Edit action inside the disclosure menu

Screenshot/Code Snippet:

.address-card

Resolves CMS-236

DEV-690 When the Add an address slideout is closed, focus is not returned to the triggering button

Page Area:

Address tab

Issue Description:

When closing the slideout, keyboard focus is dropped and lands at the top of the document

Action:

Focus should return to the Add an address button

Screenshot/Code Snippet:

Resolves CMS-237

DEV-699 Delete button in address setting menu doesn't respond to spacebar press

Page Area:

Address tab - disclosure menus

Issue Description:

The delete button is a link with role="button", but it doesn't respond to the spacebar keypress

Action:

Add a spacebar keypress handler to the link element, or use a semantic button

Screenshot/Code Snippet:

data-action="delete"

Resolves CMS-242

DEV-691 List of addresses does not have list markup

Page Area:

Address tab

Issue Description:

User addresses are listed in this tab, but do not use list markup to convey the number of addresses

Action:

Use a semantic list element as the wrapper and ensure each address uses a list item tag

Screenshot/Code Snippet:

.address-cards

Resolves CMS-