dialog
dialog copied to clipboard
Improvements to keyboard-only dialog naivgation
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
This issue consists of three sub-issues that are all somewhat related and build on top of each other.
Current behavior
- the
ngneat-close-dialog
div currently doesn't have atabindex
attribute, making it "untabbable" to - even when manually giving the div
tabindex="0"
, it doesn't react to space or enter presses, just clicks - while a dialog is opened, I can still tab into the background, behind the backdrop
Expected behavior
- add a
tabindex
, I used a value of0
to not fumble with the order. this should maybe be customizable - add corresponding listeners to common "confirm-keys" (I can only think of enter and spacebar rn) to the close icon div
- ideally, I should only be able to tab around the dialog's elements
- I imagine tihs to be somewhat tricky, in other words, no clue how to approach this
Minimal reproduction of the problem with instructions
- go to https://ngneat.github.io/dialog/
- press the very first open button (from ng-template)
- press tab a bunch of times
- this will send you through the elements behind the dialog top to bottom
- afterwards, it'll focus the dialog's close button (the
<button>
at the bottom, not the cross in the top right!) - finally (end of dom), you'll tab somewhere into your browser's window controls until it wraps back around to the start of the page
What is the motivation / use case for changing the behavior?
Better accessibility for people without a mouse, faster controls for power users
Environment
Angular version: 16.0.5
Browser:
- [x] Chrome (desktop) version 114.0.5735.110
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 102.12.0esr (64-bit)
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [x] Edge version 114.0.1823.43
For Tooling issues: N/A
Others:
I'm happy to contribute code and could probably figure out the first two points, just not the third one.
Since I feel like these three are best addressed together, I haven't actually written anything.