Make dialogs more accessible

[huoxito]

Via aria attributes and trapping the tab key inside the dialogs

It introduces three options:

    - ariaMainContent e.g. '#main-content'
    - trapTabKey e.g. true
    - focusFirstInput e.g. true

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:

// before open
focusedElementBeforeModal = jQuery(':focus')

// bind on vexClose with
focusedElementBeforeModal.focus()

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

[TrevorBurnham]

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 ariaMainContent should default to 'body > :not(.vex)'? That is, by default, everything in the document body outside of the .vex would be receive aria-hidden while the modal is open.

[huoxito]

nice yeah I'll update the ariaMainContent default to that thanks!

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 giveBackFocus: true. It has been a requirement for us and it seems to be a requirement in general to make the dialog 100% accessible.

[TrevorBurnham]

Sure, that seems like a sensible option. 👍

[adamschwartz]

👍

[cnecochea]

👍 💯 thank you so much, @huoxito

[huoxito]

thanks all I've updated the commit, pls give a try when you have a chance

[modean]

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.

[bbatliner]

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.

[huoxito]

@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