Repository navigation
fix(Tabs): Home/End, one key manager, navigate and select by key - #306
Merged
Merged
Conversation
- Home/End move focus to and select the first/last enabled tab; onKeyDown passed only the arrows to the key manager - one FocusKeyManager on the tabs signal, destroyed with the list; was a new manager and change subscription per tab list or direction change (4 managers, 0 destroyed after a render, two list changes and a direction change); direction read at keydown - keys start from the tab holding the event target: arrows no longer drift after a click or an external activeItemKey; keys from non-tab elements in the list are left alone - a tab is selected when activeItemKey === itemKey whatever its disabled state, as in vanilla, React and Vue: a disabled selected tab stays active and aria-selected and its panel stays shown; the panel no longer hides every panel after a click, a tab list change no longer moves the key off a disabled selected tab - without a key the list selects the first enabled tab, or the first tab when all are disabled
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
1 participant
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.
Keyboard and selection fixes in c-tabs-list, cTab and c-tab-panel.
Home and End now move focus to and select the first and last enabled tab; onKeyDown passed only the arrows to the key manager. The list keeps one FocusKeyManager on the tabs signal and destroys it with the list. Direction is read at keydown.
Keys start from the tab that holds the event target, so the arrows no longer drift after a click or an external activeItemKey, and keys from anything else inside the list are left alone.
A tab is selected when activeItemKey === itemKey, whatever its disabled state, as in vanilla, React and Vue: a disabled selected tab stays active and aria-selected and its panel stays shown. Before, the panel could hide every panel after a click and a tab list change moved the key to the first enabled tab. Without a key the list still selects the first enabled tab, or the first tab when all are disabled.