dialog icon indicating copy to clipboard operation
dialog copied to clipboard

Improvements to keyboard-only dialog naivgation

Open jemand771 opened this issue 1 year ago • 1 comments

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 a tabindex 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 of 0 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.

jemand771 avatar Jun 12 '23 14:06 jemand771