Fix collapsed sidebar group keyboard navigation#2649
Open
joshhanley wants to merge 1 commit into
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This has a corresponding Flux Pro PR https://github.com/livewire/flux-pro/pull/506
The Scenario
Currently, if you have a collapsed sidebar that contains an expanded sidebar group, you cannot focus the group trigger, open the dropdown, and then reliably navigate inside the dropdown using the keyboard.
Pressing Space or Enter opens the dropdown, but focus does not move to the first item. That leaves keyboard users without a working path into the dropdown links. When focus does land on an item, it can also show a focus ring instead of matching the active background treatment used by standard Flux dropdown menu items.
The Problem
Collapsed sidebar group dropdowns render sidebar items inside a menu.
ui-menualready focuses the first item when opened with ArrowDown, but collapsed sidebar group dropdowns also need that first-item focus when opened with Space or Enter.The sidebar item styles also handled hover state in this dropdown context, but did not style
data-activeor suppress the item focus outline. That made keyboard-focused dropdown items visually differ from standard Flux menu items.The Solution
Keep the existing ArrowDown menu behaviour unchanged, and add a scoped Space/Enter path only when the dropdown has
data-flux-sidebar-group-dropdown. When that scoped path opens the menu, the first menu item receives focus so arrow-key navigation works from inside the dropdown.Also style
data-activefor sidebar items inside collapsed group dropdowns and hide the per-item focus outline in that dropdown context, matching normal menu active-state styling.(dropdown menu items do have a background colour, just not shown in the compressed gif)

Fixes #2643