In handsontable 14.0.0, there’s change that’s breaking our usability for our case.
feature/accessibility ← feature/dev-issue-1063
opened 01:11PM - 28 Jun 23 UTC
### Context
The PR adds the ability to traverse the grid using <kbd>Tab</kbd>… and <kbd>Shift</kbd>+<kbd>Tab</kbd> throughout the page keeping the correct order of the native browser focus. This is a breaking change as from now on when the last cell is selected (or the last cell in a row), pressing the <kbd>Tab</kbd> key deactivates the table (the table no more listens for any keyboard shortcuts) and moves the browser's focus to the next element.
The PR introduces a new API:
* The new table option `disableTabNavigation` (default `false`). The option, when set as `true`, disables the table navigation. In that mode, the arrow keys are supposed to use to navigate the table. Pressing the <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> moves the browser's focus to the next or previous element on the page. When set as `false`, there is a possibility to navigate the table, but when the cell selection reaches the last cell (or the last cell in a row when `autoWrapRow: false`) then the table deactivates itself, and the browser's focus is moved to the next element on the page;
* The new `modifyFocusOnTabNavigation` hook. The hook allows changing the cell selection after the table is activated by the browser's focus triggered by <kbd>Tab</kbd> or <kbd>Shift</kbd>+<kbd>Tab</kbd> keys. By default, the first visible cell (or header) is selected when the table is activated from the above element. When it's activated from the element below, the last cell is selected;
* The Core `listen` method is improved for pages where multiple Handsontable instances are created. From now on, when one of the instances is activated, the other instance that the activation was taken from calls `'unlisten'` hook on its instance;
### Use cases
#### Tab navigation is disabled
```js
navigableHeaders: true,
disableTabNavigation: true
autoWrapRow: true
```
By disabling the Tab navigation (`disableTabNavigation: true`) we can focus the table by pressing <kbd>Tab</kbd> key, and by hitting the key once again, we can jump out from the table - focus the next editable element on the page.
#### Tab navigation is enabled, and there is a row wrapping enabled
```js
navigableHeaders: true,
disableTabNavigation: false
autoWrapRow: true
```
There is a possibility to navigate the table using the <kbd>Tab</kbd> key. But once a user reaches the last cell, hitting the key moves the browser's focus to the next element.
#### Tab navigation is enabled, and there is a row wrapping disabled
```js
navigableHeaders: true,
disableTabNavigation: false
autoWrapRow: false
```
There is a possibility to navigate the table using the <kbd>Tab</kbd> key. But once a user reaches the last cell in a row (`autoWrapRow: false`), hitting the key moves the browser's focus to the next element.
#### Tab navigation is disabled as well as headers navigation, and there are some rows hidden
```js
navigableHeaders: false,
disableTabNavigation: false
autoWrapRow: false
```
When the `navigableHeaders` option is disabled, the first visible cell is selected.
#### Feature of the most recently remembered cell focus selection
```js
navigableHeaders: false,
disableTabNavigation: false
autoWrapRow: false
```
There is implemented a feature that tracks recently selected focused cell. When the table is deactivated and again activated by the TAB navigation keys, the cell selection is restored to the same position as before table deactivation. It only works for cell focus/highlight, not for multiple selection ranges.
#### Support for multiple instances with different configurations
Two different Handsontable instances act as regular editable elements where we can focus using browsers TAB navigation keys.
### How has this been tested?
I tested the changes locally with different use cases. I covered all features with E2E and Visual Tests tests.
### Types of changes
- [x] New feature or improvement (non-breaking change which adds functionality)
### Related issue(s):
1. fixes https://github.com/handsontable/dev-handsontable/issues/1063
### Affected project(s):
- [x] `handsontable`
### Checklist:
- [x] I have reviewed the guidelines about [Contributing to Handsontable](https://github.com/handsontable/handsontable/blob/master/CONTRIBUTING.md) and I confirm that my code follows the code style of this project.
- [x] I have signed the [Contributor License Agreement](https://docs.google.com/forms/d/e/1FAIpQLScpMq4swMelvw3-onxC8Jl29m0fVp5hpf7d1yQVklqVjGjWGA/viewform?c=0&w=1)
- [x] My change requires a change to the documentation.
or in Changelog:
Added the ability to traverse the grid within a webpage using the TAB key and introduced a new tabNavigation option.
How we disable it to be the same as previous version without downgrade version?
Note: I also set autoWrapRow to be true. but navigate using Tab(arrow works fine) not wrapped as indicated in document anymore.
Hi @elecwebmaker
Setting tabNavigation: false will work as the previous version - when you cannot navigate with a TAB key to a column header.
Now the TAB + SHIFT is added to exit the table as to meet the WCAG requirements, so the fact that users couldn’t leave the table was an accessibility flaw.
However, you can try to remove that shortcut by calling the removeShortcutsByGroup method from the Shortcut manager. Ref: https://handsontable.com/docs/javascript-data-grid/api/shortcut-context/#removeshortcutsbykeys
If that won’t work please let me know.
@aleksandra_budnik We decided to do custom navigation by ourself for Tab key inside beforeKeyDown hook to wrapped row. Thank you.
Thank you for the update. If you’d need anything, please feel free to open a new thread.
