ngx-datatable
ngx-datatable copied to clipboard
swimlane
Accessibility Features
What kind of change does this PR introduce? (check one with "x")
- [ ] Bugfix
- [x ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Other... Please describe:
What is the current behavior? (You can also link to an open issue here)
The data table does not have proper grid roles. It does not allow tab focusing of the header, or traversal of header cells via left/right arrow keys. It does not allow tab focusing of the body. When focused on the body, unless the table is in cell selection mode, there is no indication of individual cell focus for users that depend on a screen reader. The arrow keys are unable to traverse cells across complex column/row group structures. It does not include any tab focus (outline) indicators in the pager.
What is the new behavior?
Accessibility features have been added to cover all issues listed under current behavior. Grid roles (such as grid, rowgroup, columnheader, row, & gridcell) have been added. A user can tab focus the last accessed (default first) header and body cells. After tab focusing, a user can move focus around the header and body via keyboard arrow keys. When tab focusing a header cell, an outline is displayed to mark tab focus, but when clicking, no outline is displayed to maintain current behavior. When focused on a header cell, a user can activate sorting via return or space key. When focused or hovered over a header column that can be activated for sorting, a faint sort expectation icon is displayed. Whenever the user tab or click focuses on a body cell, it is highlighted with a focus highlight color (regardless of the selection mode). The user can hit the return key when focused on any cell to select the associated row or cell (dependent on selection mode). The user can also hit the return key to activate a cell's edit mode (given that the editable cell contents are given the 'click' or 'dbl-click' classes). The user can also activate in-built checkbox cells via return key. The user can tab focus to each of the footer pager buttons. When tab focusing to a pager button, an outline appears to designate focus. When click focusing a pager button, no outline appears to maintain current behavior.
Does this PR introduce a breaking change? (check one with "x")
- [ ] Yes
- [ x] No
If this PR contains a breaking change, please describe the impact and migration path for existing applications: ...
Other information:
Would highly appreciate this as well - while these are rather special requirements, it may be a showstopper in cases where accessibility is inevitable (e.g. big company applications).
This looks like a great PR. I'm going to use this fork for a while, since I need this functionality.
@marknemm please checkout the release folder from your PR so there aren't any merge conflicts. This will make it easier for maintainers to merge.
@marjan-georgiev @amcdnl Do you have any barriers to merging this PR? I don't see any breaking changes when reviewing the code and it adds some nice accessibility features.
@marknemm I found a few issues when using your fork, so I made a PR to your fork. I also fixed up the merge conflicts in my PR.
While I tested this fork, I experienced major issues when using IE 11 (not the most adaptable browser in the world I guess) - the header columns where not displayed correctly anymore. As IE 11 support is required for my project, I could not use the fork in the current version. Can anybody confirm / reproduce these issues?
@mitschmidt I don't see any issues in IE11 after I made my changes.
Can you check using this code? https://github.com/isaacplmann/ngx-datatable/tree/keyboardNav
@marknemm I found a few issues when using your fork, so I made a PR to your fork. I also fixed up the merge conflicts in my PR.
Ok, thanks looks good. I merged it.
@isaacplmann will test your code asap and report back to you. I encountered the issues when using @marknemm branch.
While I tested this fork, I experienced major issues when using IE 11 (not the most adaptable browser in the world I guess) - the header columns where not displayed correctly anymore. As IE 11 support is required for my project, I could not use the fork in the current version. Can anybody confirm / reproduce these issues?
@mitschmidt Yes I see the problem still even with the merged pull request from @isaacplmann. It seems the fixed position behaves incorrectly in the header (the header content moves down with the rest of the page). I wonder if there is an easy CSS fix for this...
There are also some presentation problems in IE for the bootstrap theme (again related to header styling).
Also, virtual scroll does not behave well when moving focus in body cells with arrow keys in IE & Edge; will not scroll down when moving focus across cells in body with arrow keys. Although, you still get partial accessibility support in IE with virtual scroll at least (can navigate visible cells). Wonder what needs to be changed in typescript to make this work...
Imo this would still be a great enhancement for the module, as the datatable is highly suitable for enterprise environments. Unfortunately this implies supporting legacy browsers (IE 11 or even <11) when dealing with big companies in Germany.
There has to be a way to introduce the accessibility features w/o breaking IE?
Is there any more information on this? I'm working on a project to make a client's website accessible. If they can't get this in the next quarter they may move on to another product. Much obliged!
It looks like these features are still missing. When can we anticipate updates?
Hi @amyspeed, thank you so much for adding those aria-roles in https://github.com/swimlane/ngx-datatable/pull/1978
We are really interested in adding accessibility to our tables and are looking forward to a release as well.
Thanks again!
We had a accessibility test of our website and all tables failed because of missing accessibility rules (no use of standard-table-elements, no possibility to sort with keyboard). Can somebody say when this pr is merged?
