aem-core-cif-components [Accessibility][Mini Cart] The "Enter your code" input receives keyboard focus when it is hidden by the checkout

[Accessibility][Mini Cart] The "Enter your code" input receives keyboard focus when it is hidden by the checkout

Open LevelAccessA11y opened this issue 3 years ago • 3 comments

Steps to Reproduce

Enable NVDA screen reader.
Open page in Google Chrome.
Use TAB to move focus to the Checkout button, then press Enter to activate it.
Press Enter to activate it.or TAB + SHIFT to navigate through the checkout form.
Press TAB to move focus to the "Ship To Add Shipping Information" button.
Press SHIFT + TAB and observe focus moving behind the Checkout and the "Enter your code" input being announced, although it is not visible.

Current Behavior Interactive elements in the Mini Cart receive keyboard focus when they are visually obscured by the checkout form. This includes the "Enter your code" input, but if multiple items are in the cart it might also include kebab menu buttons and menu items for each item. Sighted keyboard users may find it difficult to determine where their focus is, and/or to return to the Checkout in order to dismiss it with the "Back to cart" button.

Expected behavior/code Visually hidden content should not receive keyboard focus. Ensure that when the Checkout is expanded, interactive elements behind it do not receive focus.

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

Affected Users Keyboard-only users

WCAG SC 2.4.3 Focus Order