aem-core-cif-components [Accessibility] [Mini Cart] Kebab menu buttons lack visual indication of focus.

[Accessibility] [Mini Cart] Kebab menu buttons lack visual indication of focus.

Open LevelAccessA11y opened this issue 4 years ago • 3 comments

Steps to Reproduce

Open page in Google Chrome.
Use TAB or TAB + SHIFT to navigate through kebab menus in the cart components.

Current Behavior When focused, kebab menu button element has no discernible visual indication of focus, because the CSS outline property's value is set to none. It is difficult for sighted keyboard users to understand where their keyboard focus is and how to interact with their intended control.

Expected behavior/code Actionable/focusable items should provide a visual indicator of focus. Authors can use browser defaults by not overriding them with CSS. When the default focus indicator is removed, it must be replaced with a focus indicator that provides at least a 3:1 contrast ratio with the background colors.

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

Affected Users Sighted keyboard-only users

WCAG SC 2.4.7 Focus Visible