[Accessibility] [Cart Trigger] Cart information (# of items or empty) is not communicated to screen reader users

[LevelAccessA11y]

Steps to Reproduce

1. Enable NVDA screen reader.
2. Open page in Google Chrome.
3. Navigate to cart trigger buttons using TAB or SHIFT + TAB.
4. Notice the identical name announcements despite differing cart states.

Current Behavior The cart trigger buttons use an aria-label attribute to identify their accessible name. The aria-label attribute overrides the content of the button, so the text within the button that identifies the number of items in the cart is not announced to screen reader users.

Expected behavior/code Authors should ensure that any information revealed to sighted users is also available to screen reader users. The number of items in the cart should be included in the accessible name.

Environment Chrome 92, Windows 10, NVDA 2020.4 AEM Core Components v. 2.17

Affected Users Without Vision; Limited Vision; Limited Manipulation

WCAG SC 2.4.6 Headings and Labels

Possible Solution Communicate the cart state by adding the number of items to the aria-label, or by removing the aria-label and adding the cart label to a visually-hidden element within the button.

[richardhand]

@adobe export issue to Jira project SITES

[github-jira-sync-bot]

:white_check_mark: Jira issue SITES-2525 is successfully created for this GitHub issue.

[mhaack]

Tracked via CIF-2360