blazor-405593-components-filter-builder-keyboard-support.md
The DevExpress Blazor Filter Builder supports keyboard shortcuts for full UI accessibility. Keyboard navigation runs on the client side and remains responsive even in Blazor Server apps with slow connections.
Run Demo: Filter Builder – Overview
Note
Keyboard support allows users to interact with application content in cases they cannot use a mouse or they rely on assistive technologies (like screen readers or switch devices). Refer to the Accessibility help topic for information on other accessibility areas that we address.
The Filter Builder component arranges its UI elements into rows. Use Down Arrow/Up Arrow keys to navigate through these rows and Right Arrow/Left Arrow keys to navigate through individual elements.
Press Enter/Space to invoke a click event handler for the focused element (open the drop-down list, switch the value to edit mode, or remove the filter condition).
Use Tab or Shift + Tab shortcut keys to move focus from the Filter Builder component to the next or previous focusable page element.
The following table lists shortcut keys available for UI elements that reveal drop-down lists (fields, logical and criteria operators, and the Add condition/Add group menu).
| PC/Windows Shortcuts | Mac Shortcuts | Description |
|---|---|---|
| Enter, Space, | ||
| Alt + Down Arrow | Enter, Space, | |
| Option + Down Arrow | Opens a drop-down window and moves focus to the first list item. | |
| Esc, | ||
| Alt + Up Arrow | Esc, | |
| Option + Up Arrow | Closes the drop-down window. | |
| Down Arrow, | ||
| Up Arrow | Down Arrow, | |
| Up Arrow | Moves focus to the next or previous item in the list. | |
| Space | Space | Selects the focused item. |
| Has no effect in the field tree. | ||
| Enter | Enter | Selects the focused item. |
| For the field tree: If field selection is enabled, selects the focused field. Otherwise, expands the field or has no effect. | ||
| Right Arrow | Right Arrow | For the field tree: Expands the focused field. If the focused field is already expanded, moves focus to the first child field. |
| Left Arrow | Left Arrow | For the field tree: When a child field is focused, moves focus to its parent field. When a parent field is focused, collapses the field. |
| Tab | Tab | For criteria operator lists : When the search box is focused, moves focus to the first or previously focused operator item. |
| Otherwise, moves focus to the next focusable page element. | ||
| Shift + Tab | Shift + Tab | For criteria operator lists: When an operator item is focused, moves focus to the search box. |
| Otherwise, moves focus to the previous focusable page element. |
The following table lists shortcut keys available for field values and associated value editors.
| PC/Windows Shortcuts | Mac Shortcuts | Description |
|---|---|---|
| Enter, Space | Enter, Space | Switches the field value to edit mode. |
| For templated values: Moves focus to the first focusable element in the template. | ||
| Enter, Esc | Enter, Esc | Switches the value from the edit to display mode. |
| Alt + Down Arrow | Option + Down Arrow | Opens the drop-down editor. |
| Alt + Up Arrow, | ||
| Esc | Option + Up Arrow, | |
| Esc | Closes the drop-down editor. |
Value editors include their own navigation shortcuts. Refer to the following help topic for additional information on keyboard support in various DevExpress Blazor components: Accessibility - Keyboard Support.