Skip to content

4.19.0: toolbar arrow keys, keyboard-accessible PivotViewer viewport, FilterPanel in dialogs and localized filter names - #360

Merged
woksin merged 35 commits into
mainfrom
feature/release-4170
Sep 28, 2026
Merged

woksin merged 35 commits into
mainfrom
feature/release-4170

Conversation

@woksin

@woksin woksin commented Sep 28, 2026

Copy link
Copy Markdown
Contributor

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

  • Toolbar and ActionMenubar move 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 calls preventDefault still wins. The new focusMode prop (ToolbarFocusMode) is Arrows by default; use None to 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)
  • The PivotViewer card viewport is a keyboard-focusable, named scroll region. Arrow and Page keys scroll overflowing cards, and Tab moves on to the next control. Use labels.viewport to localize its default name, “Card area.” Canvas cards themselves are still not keyboard-selectable. (PivotViewer's scrollable viewport is not keyboard-accessible #349)
  • CratisComponentsProvider messages.filter localizes 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.label also names the PivotViewer Filters button when labels.filters is not set. The CratisFilterMessages type is exported. (Let FilterPanel's accessible names be localized through provider messages #347)

Fixed

  • FilterPanel uses the overlay container configured by CratisComponentsProvider instead of always portaling to document.body. An unavailable container defers the panel. Inside a modal Dialog, 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)
  • A filter panel stays aligned with its trigger and within reach while a Dialog animates in, inside a transformed overlay container, and after scroll and resize. Inside a dialog that clips its content, the panel keeps every option reachable. (FilterPanel ignores the provider's overlay container #346)

Closes #328, closes #346, closes #347, closes #349.

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)
# 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
@woksin woksin added the minor label Sep 28, 2026
@woksin woksin self-assigned this Sep 28, 2026
@woksin
woksin merged commit 063bfac into main Sep 28, 2026
50 of 51 checks passed
@woksin
woksin deleted the feature/release-4170 branch September 28, 2026 12:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

1 participant