Angular Tree Grid Keyboard Navigation
Keyboard navigation in the IgxTreeGrid provides a rich variety of keyboard interactions for the user. It enhances the accessibility of the IgxTreeGrid and allows to navigate through any type of elements inside (cell, row, column header, toolbar, footer, etc.). This functionality is enabled by default, and the developer has the option to override any of the default behaviors in an easy way.
The tabulations of the IgxTreeGrid has been reduced so that the navigation is compliant with W3C accessibility standards and convenient to use.
Currently, the IgxTreeGrid introduces the following tab stops:
- GroupBy or Toolbar area (if enabled);
- IgxTreeGrid header;
- IgxTreeGrid body;
- Column summaries (if enabled);
- IgxTreeGrid paginator (if enabled);
Due to this change, navigating between the cells with tab and Shift + Tab is no longer supported in the IgxTreeGrid. Pressing the Tab key now goes through the tab stops in the following order: GroupBy / Toolbar -> Headers -> Body -> Summaries -> Footer / Paginator.
Exposing any focusable element into the IgxTreeGrid body via template may introduce side effects in the keyboard navigation, since the default browser behavior is not prevented. It is the developer’s responsibility to prevent or modify it appropriately.
Header Navigation
A full keyboard navigation support in the IgxTreeGrid header is now introduced. Column headers can be easily traversed with the arrow keys. Additionally, there are a number of key combinations that trigger actions on the columns like filtering, sorting, grouping and etc. When the IgxTreeGrid header container is focused, the following key combinations are available:
Key Combinations
- Arrow Up navigates one cell up in the headers (no looping). Available only when Multi-row Layout (MRL) or Multi-column Headers (MCH) are defined
- Arrow Down navigates one cell down in the headers (no wrapping). Available only when Multi-row Layout (MRL) or Multi-column Headers (MCH) are defined
- Arrow Left navigates one cell left (no looping)
- Arrow Right navigates one cell right (no wrapping between lines)
- Ctrl + Arrow Left navigates to the leftmost cell in the row; if MRL or MCH are enabled, navigates to the leftmost cell at the same level
- Home navigates to the leftmost cell in the row; if MRL or MCH are enabled, navigates to the leftmost cell at the same level
- Ctrl + Arrow Right navigates to the rightmost cell in row; if MRL or MCH are enabled, navigates to the rightmost cell at the same level
- End navigates to the rightmost cell in row; if MRL or MCH are enabled, navigates to the rightmost cell at the same level
- Alt + L opens Advanced Filtering dialog if Advanced Filtering is enabled
- Ctrl + Shift + L opens the Excel Style Filter dialog or the default (row) filter if the column is filterable
- Ctrl + Arrow Up sorts the active column header in ASC order. If the column is already sorted in ASC, sorting state is cleared
- Ctrl + Arrow Down sorts the active column header in DSC order. If the column is already sorted in DSC, sorting state is cleared
- Space selects the column; If the column is already selected, selection is cleared