Repository navigation
Release v4.19.0
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 #353. (#328)- The
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. (#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. (#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. (#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)