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
Steps to Reproduce
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