-
Notifications
You must be signed in to change notification settings - Fork 494
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
Make dialogs more accessible #133
Conversation
I like it! Having to specify the "main content" to hide from screen readers while the modal is open feels like a bit of a chore, though. Perhaps |
nice yeah I'll update the Would you also accept a fourth config to keep track of the focus outside the vex dialog? Exactly like I mentioned above, before opening the dialog grab the current focused element then give it a focus() back when the dialog closes. I'd name it like |
Sure, that seems like a sensible option. 👍 |
👍 |
👍 💯 thank you so much, @huoxito |
Via aria attributes and trapping the tab key inside the dialogs It introduces some new options: - ariaMainContent e.g. '#main-content' - trapTabKey e.g. true - focusFirstInput e.g. true - giveBackFocus e.g. true
5a20411
to
9bf5515
Compare
thanks all I've updated the commit, pls give a try when you have a chance |
Any plans to get this PR into master? I implemented the same on my own and it would be a lot easier if VEX would support accessibility stuff out of the box. AFAIK there are a couple of other smaller accessibility related PRs like '#134' that could be accumulated into this PR. Also consider to default focus the 'NO' button on 'YESNO' dialogs and the 'YES' button on 'YES' dialogs. |
With the release of vex 3, we've ditched CoffeeScript for vanilla JavaScript, but I love the accessibility upgrades that were made in this PR. @huoxito do you think you could adapt your code for the vanilla JS code in vex 3? We can plan for accessibility upgrades in, say, a future minor version release. It sounds like there was some support from @adamschwartz in the past. I say we move forward with this, if possible. |
@bbatliner yeah absolutely 👍 great to hear it moved to just javascript, I'll try to update this PR or submit a new one later this week |
Via aria attributes and trapping the tab key inside the dialogs
It introduces three options:
Hi all,
We're using this code in one of our projects and I wanted to get some feedback here as well. Pls let me know if you think this is not a proper approach or if there's any other tweaks you'd like to address? We're looking forward to have this as a built in feature.
I left out the focus "toggle" before opening and after closing the dialogs. Mostly because I'm not sure yet we should do it. Currently it looks something like this:
Let me know if you think it's a good fit and I can add it here too. The implementation here is pretty much the same as the incredible accessible modal article which was based on some w3c pseudo code.
cheers