Added accessibility features for tabbing and aria labels #257
Conversation
src/vex.js
Outdated
| closeAllOnPopState: true, | ||
| giveBackFocus: true, | ||
| trapTabKey: true, | ||
| ariaContentMain: 'body:not([vex])' |
There was a problem hiding this comment.
In the original PR, this selector was 'body > :not(.vex)'. The selector you have selects a very different thing. What's the reason for the change?
There was a problem hiding this comment.
ariaContentMain was changed back to the correct selector
src/vex.js
Outdated
|
|
||
| // Close button | ||
| if (options.showCloseButton) { | ||
| var closeEl = vexInstance.closeEl = document.createElement('div') | ||
| var closeEl = vexInstance.closeEl = document.createElement('button') |
There was a problem hiding this comment.
Just a sanity check on our CSS, does this break any styles?
There was a problem hiding this comment.
This changed the appearance of several styles so it was changed back to div
src/vex.js
Outdated
|
|
||
| //Tab key pressed | ||
| if (event.which == 9) { | ||
| console.log(focusableElements.length) |
There was a problem hiding this comment.
Keep console.log's out of production code.
There was a problem hiding this comment.
Conole.log's have been removed
src/vex.js
Outdated
| event.preventDefault() | ||
| } | ||
| } else { | ||
| console.log("tab overrided") |
There was a problem hiding this comment.
Keep console.log's out of production code.
|
@michaelvdow: see my specific comments on the code, but otherwise very good stuff. Can you run |
|
Hey @huoxito! Someone got around to porting your accessibility PR to vanilla JS and I want you to take a look before we merge it in. Can I have your feedback/approval? :D |
|
nice work @michaelvdow and thanks for getting in touch @bbatliner LGTM 🚢 |
|
@bbatliner @huoxito Any updates on this? Considering implementing this in the new Drupal Admin UI Theme "Claro" if this accessibility features gets added. |
This pull request adds accessibility features based on the work done in #133 by converting it from CoffeeScript to vanilla JS. This prevents focus from leaving the dialog while tabbing, and hides the main content when the dialog is visible. Upon dialog close, focus is given back to element with initial focus.
It also adds requested changes from #26 that change the exit button to a
<button>and added aria-labels.