Skip to content

Release v4.19.0

Choose a tag to compare

@github-actions github-actions released this 28 Sep 12:40
063bfac

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 #353. (#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. (#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. (#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. (#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. (#346)

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