[Accessibility][Mini Cart] Quantity input has no accessible name

[LevelAccessA11y]

Steps to Reproduce

1. With NVDA operating, open the page in Google Chrome.
2. Press the TAB key to move focus to the Quantity input.
3. Observe that only the value is announced, not the "Quantity" label text above the input.

Current Behavior The Quantity select input is not programmatically associated with its visible label, and has no accessible name. When a screen reader user navigates to the field, they hear only the value of the input (e.g. "1"). Users of speech input will not be able to target this field directly.

Expected behavior/code Both the visible label and the value are announced by NVDA when the input receives keyboard focus.

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

Affected Users Screen reader users, users of speech input

WCAG SC 4.1.2 Name, Role, Value 2.5.3 Label in Name

Possible Solution Wrap the visible label text in a label element, with a for attribute that references the ID of the input.

[richardhand]

@adobe export issue to Jira project SITES

[github-jira-sync-bot]

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

[mhaack]

Tracked via CIF-2356