[Accessibility] [Mini Cart] The kebab menu items are in the focus order when they are not visible

[LevelAccessA11y]

Steps to Reproduce

1. Open page in Google Chrome.
2. Use TAB or TAB + SHIFT to navigate through kebab menus in the cart components.
3. Notice the "disappearance" of focus as it moves through the visually hidden menu items.

Current Behavior The kebab menu options receive keyboard focus even when the menu is not expanded. Sighted keyboard users cannot tell which element has focus.

Expected behavior/code Visually-hidden elements should not receive keyboard focus.

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

Affected Users Sighted keyboard-only users

WCAG SC 2.4.3 Focus Order

Possible Solution Consider using the WAI-ARIA Authoring Practices Menu Button design pattern , implementing all expected roles, states, properties, and keyboard interactions.

[richardhand]

@adobe export issue to Jira project SITES

[github-jira-sync-bot]

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

[mhaack]

Tracked via CIF-2353