Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improvements to keyboard-only dialog naivgation #105

Open
jemand771 opened this issue Jun 12, 2023 · 1 comment
Open

Improvements to keyboard-only dialog naivgation #105

jemand771 opened this issue Jun 12, 2023 · 1 comment
Labels
enhancement New feature or request

Comments

@jemand771
Copy link
Contributor

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.
@NetanelBasal
Copy link
Member

You're welcome to create a PR

@NetanelBasal NetanelBasal added the enhancement New feature or request label Nov 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants