4.19.0: toolbar arrow keys, keyboard-accessible PivotViewer viewport, FilterPanel in dialogs and localized filter names - #360
Merged
Merged
Conversation
Name the existing scrolling region through PivotViewer labels, and prove native keyboard scrolling and axe compliance against an overflowing Storybook view. (cherry picked from commit 5e1d07a3892ea471e53b032e3c0f402ff0a815f2)
(cherry picked from commit 51e49c8e8fe3bfd8f4ec13c8d2d5178e44d52d1d)
Decision: 0001-dom-coupled-contract
# Conflicts: # Storybook/README.md # Storybook/scripts/verify-storybook-indexes.mjs
# Conflicts: # Storybook/scripts/verify-storybook-indexes.mjs
# Conflicts: # Documentation/Filter/index.md # Storybook/scripts/verify-storybook-indexes.mjs
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.
Toolbars now support arrow-key navigation, the PivotViewer card area scrolls from the keyboard, the filter panel works inside dialogs, and its accessible names can be localized in one place.
Added
ToolbarandActionMenubarmove focus between tools with the arrow keys and Home/End, following the toolbar's orientation and reading direction. Every tool keeps its own Tab stop, so Tab works as before. Keys inside inputs, sliders, selects and other widgets in a toolbar keep their native behavior, and a handler that callspreventDefaultstill wins. The newfocusModeprop (ToolbarFocusMode) isArrowsby default; useNoneto keep the previous behavior. A mode with a single Tab stop for the whole toolbar is planned in Make toolbars a single Tab stop by default in the next major #353. (Make toolbar and filter controls keyboard- and screen-reader-accessible #328)PivotViewercard viewport is a keyboard-focusable, named scroll region. Arrow and Page keys scroll overflowing cards, and Tab moves on to the next control. Uselabels.viewportto localize its default name, “Card area.” Canvas cards themselves are still not keyboard-selectable. (PivotViewer's scrollable viewport is not keyboard-accessible #349)CratisComponentsProvidermessages.filterlocalizes the filter panel's accessible name (label) and its search inputs' names (searchAriaLabel) for the whole application. An explicit prop still wins. For search inputs, the placeholder is used when the provider message is not set, so existing names do not change.messages.filter.labelalso names thePivotViewerFilters button whenlabels.filtersis not set. TheCratisFilterMessagestype is exported. (Let FilterPanel's accessible names be localized through provider messages #347)Fixed
FilterPaneluses the overlay container configured byCratisComponentsProviderinstead of always portaling todocument.body. An unavailable container defers the panel. Inside a modalDialog, the panel stays within the modal's focus scope and stays visible to assistive technology, even when the shared overlay container sits outside the modal. (FilterPanel ignores the provider's overlay container #346)Closes #328, closes #346, closes #347, closes #349.