[Issue] BUG#AC-2481 Icon buttons with no accessible name. (pattern: Icon butt…

[m2-assistant]

This issue is automatically created based on existing pull request: #3988: BUG#AC-2481 Icon buttons with no accessible name. (pattern: Icon butt…

---

…ons lack accessible name)

Description

Reproduction Steps
Locations (representative sample):

Global Header
Landing Page
Search Results
Product Detail Page
Shopping Bag Mini Cart
Shopping Bag

• Checkout - Confirmation / Create an Account
  Account - Order History

1. With JAWS operating, press Tab to move through the content to move focus to one of the identified controls.

Actual Behavior
There are icon buttons that do not provide accessible descriptive name. Examples include:

Module 01 - Global Header:
Close button on expanded mobile navigation

Module 02 - Landing Page:
Dot icon buttons for homepage hero carousel
"Slider" buttons of "Top Sellers" carousel

Module 03 - Search Results page:
Close button on filters menu

Module 04 - Product Detail page:
Product Image buttons
At 200% browser zoom, product image gallery controls including previous and next arrow buttons and pagination dot buttons.

Module 05a - Shopping Bag mini cart:
Delete buttons

Module 05b - Shopping Bag:
Options three dots/"kebab" icon buttons

Module 06c - Checkout - Confirmation / Create an Account:
Eye icon button

Module 08 - Account - Order History:
Search button
Close button on search field
Accordion buttons

When controls do not provide accessible names, screen reader users will not know their purpose.

Expected Behavior
Ensure that all buttons communicate descriptive accessible names.

Provide a meaningful name for the control that communicates the purpose of the control. Note - Do not include the role as part of the accessible name, which can lead screen readers to announce controls in confusing ways, such as "Click Here button, button". For icon buttons, an accessible name can be provided with visually-hidden text or with an aria-label attribute.

Related Issue

Closes https://jira.corp.adobe.com/browse/AC-2481

Acceptance

Verification Stakeholders

Specification

Verification Steps

Test scenario(s) for direct fix/feature

Test scenario(s) for any existing impacted features/areas

Test scenario(s) for any Magento Backend Supported Configurations

Is Browser/Device testing needed?

Any ad-hoc/edge case scenarios that need to be considered?

Screenshots / Screen Captures (if appropriate)

Breaking Changes (if any)

Checklist

• I have added tests to cover my changes, if necessary.
• I have added translations for new strings, if necessary.
• I have updated the documentation accordingly, if necessary.

[anthoula]

@adobe export issue to JIRA project PWA as Story

[github-jira-sync-bot]

✅ Jira issue https://jira.corp.adobe.com/browse/PWA-3023 is successfully created for this GitHub issue.