All Flexmonster’s functionality can be accessed from the keyboard with the use of keyboard shortcuts.
This guide describes:
For comfortable keyboard navigation, UI elements that are in focus should be highlighted. By default, the keyboard focus is not visible in Flexmonster.
To show the keyboard focus, set the accessibility.keyboardMode property to true
in the new Flexmonster()
API call:
var pivot = new Flexmonster({ container: "pivot-container", componentFolder: "node_modules/flexmonster/", accessibility: { keyboardMode: true, }, report: { ... } });
Another way to make the keyboard focus visible is to click on the grid and press Shift
three times.
With the drag-and-drop feature, which is available on the grid and in the Field List, it is possible to change the slice on the fly. You can:
This feature is also accessible from the keyboard. Follow the steps below to drag a field on the grid or in the Field List:
Tab
key, select the needed field on the grid or in the Field List. Space
or Enter
key to open the field’s context menu.Space
or Enter
to apply the option.Here is an example of accessible drag-and-drop on the grid:
See how a field can be dragged in the Field List:
To sort a row or column on the grid from the keyboard, follow these instructions:
Tab
key, move the keyboard focus to the grid.Space
or Enter
to move the keyboard focus inside the grid.Space
or Enter
key.Space
or Enter
key to apply the sorting.Here is a live demonstration:
If the slice contains several measures, you should set sorting for a specific measure:
This mini-guide will help you filter a field with the keyboard:
Tab
key, select the field you would like to filter on the grid.Space
or Enter
to open the field’s context menu.Space
or Enter
to open the pop-up filter window.Tab
and Shift + Tab
to navigate between the filtering options. Use arrow keys to navigate between field members and filtering conditions. To apply the selected option, press Space
or Enter
. Shift + Tab
.Space
or Enter
to apply the filters to the field.See how to filter a field using the keyboard:
By default, the Option + Tab
shortcut is used to move the focus between page controls in Safari. To use the Tab
key instead, follow the steps below:
Your accessibility configurations should look similar to the following:
Now you can use the Tab
key to navigate Flexmonster in Safari.
Keyboard shortcuts | Description |
---|---|
Tab |
Moves the focus to the next active tab in the Toolbar. |
Shift + Tab |
Moves the focus to the previous active tab in the Toolbar. |
Space | Enter
|
Opens the tab's submenu or selects the tab itself. |
UpArrow |
Navigates between items of a tab’s submenu. Moves the focus upward. |
DownArrow |
Navigates between items of a tab’s submenu. Moves the focus downward. |
Esc |
Closes the tab’s submenu. |
Keyboard shortcuts | Description |
---|---|
Tab |
Moves the focus from the grid to the next active element (e.g., to a row or column header cell). |
Shift + Tab |
Moves the focus from the grid to the previous active element (e.g., to a Toolbar tab). |
Space | Enter
|
If the focus is on the grid, this shortcut moves the focus into the grid. If the focus is on a cell, this shortcut opens the cell's context menu. If the focus is on a context menu item with a submenu (e.g., Aggregations), this shortcut opens the submenu. |
UpArrow |
Navigates between cells or items of a cell’s context menu. Moves the focus upward. |
DownArrow |
Navigates between cells or items of a cell’s context menu. Moves the focus downward. |
LeftArrow |
Navigates between cells. Moves the focus leftward. |
RightArrow |
Navigates between cells. Moves the focus rightward. |
Shift + UpArrow |
Extends cell selection upward. |
Shift + DownArrow |
Extends cell selection downward. |
Shift + LeftArrow |
Extends cell selection leftward. |
Shift + RightArrow |
Extends cell selection rightward. |
Ctrl + A |
Selects all cells. |
Ctrl + C |
Copies selected cells to the clipboard. |
Ctrl + Alt + H |
Switches between the default and high-contrast CSS themes. |
Shift (three times) |
Shows/hides the keyboard focus on UI elements. |
Ctrl + Alt + i (Option + Control + i on macOS) |
Opens a pop-up window displaying the component’s version and license information. |
Esc |
Closes the cell's context menu or the drill-through view. |
Keyboard shortcuts | Description |
---|---|
Tab |
Moves the focus to the next active element. |
Shift + Tab |
Moves the focus to the previous active element. |
Space | Enter
|
Selects the current element. |
UpArrow |
Navigates between items of a drop-down menu (e.g., when selecting a chart’s active measure). Moves the focus upward. |
DownArrow |
Navigates between items of a drop-down menu (e.g., when selecting a chart’s active measure). Moves the focus downward. |
Ctrl + Alt + H |
Switches between the default and high-contrast CSS themes. |
Shift (three times) |
Shows/hides the keyboard focus on UI elements. |
Ctrl + Alt + i (Option + Control + i on macOS) |
Opens a pop-up window displaying the component’s version and license information. |
Esc |
Closes a drop-down menu. |
Keyboard shortcuts | Description |
---|---|
Tab |
Moves the focus to the next active element. |
Shift + Tab |
Moves the focus to the previous active element. |
Space | Enter
|
Selects the current element. If the element is a field, the shortcut opens the field’s context menu. |
UpArrow |
Navigates between items of a list or menu. Moves the focus upward. |
DownArrow |
Navigates between items of a list or menu. Moves the focus backward. |
Esc |
Closes the Field List, a context menu, or a drop-down menu. |
Keyboard shortcuts | Description |
---|---|
Tab |
Moves the focus to the next active element. |
Shift + Tab |
Moves the focus to the previous active element. |
Space | Enter
|
Selects the current element. If the element is a field, the shortcut opens the field’s context menu. |
UpArrow |
Navigates between items of a list or menu. Moves the focus upward. |
DownArrow |
Navigates between items of a list or menu. Moves the focus backward. |
Esc |
Closes the calculated value editor, a context menu, or a drop-down menu. |
Keyboard shortcuts | Description |
---|---|
Tab |
Moves the focus to the next active element. |
Shift + Tab |
Moves the focus to the previous active element. |
Space | Enter
|
Selects the current element. |
UpArrow |
Navigates between items of a drop-down menu. Moves the focus upward. |
DownArrow |
Navigates between items of a drop-down menu. Moves the focus downward. |
Esc |
Closes the number formatting dialog. |
Keyboard shortcuts | Description |
---|---|
Tab |
Moves the focus to the next active element. |
Shift + Tab |
Moves the focus to the previous active element. |
Space | Enter
|
Selects the current element. |
UpArrow |
Navigates between items of a drop-down menu. Moves the focus upward. |
DownArrow |
Navigates between items of a drop-down menu. Moves the focus downward. |
Esc |
Closes the conditional formatting dialog. |
Keyboard shortcuts | Description |
---|---|
Tab |
Moves the focus to the next active element. |
Shift + Tab |
Moves the focus to the previous active element. |
Space | Enter
|
Selects the current element. |
Esc |
Closes the layout options dialog. |
Keyboard shortcuts | Description |
---|---|
Tab |
Moves the focus to the next active element. |
Shift + Tab |
Moves the focus to the previous active element. |
Space | Enter
|
Selects the current element. |
UpArrow |
Navigates between items of a list or drop-down menu. Moves the focus upward. |
DownArrow |
Navigates between items of a list or drop-down menu. Moves the focus downward. |
Esc |
Closes the filter dialog. |