Problem/Motivation
In ajax dialogs, there is a accessibility issue with invisible duplicate buttons.
When the dialog is created, the buttons are created in the dialog footer, which cause the original buttons to fire programatically. The original buttons are hidden using a zero-width technique, but they are still operable. This causes problems for some users:
- Sighted keyboard are the most severely affected group.
- Users will encounter some extra tab stops, without knowing what they are focused on.
- This is a WCAG level AA failure of success criterion 2.4.7"Focus Visible".
- It's disorienting, and can cause users to over- or under-shoot when pressing TAB repeatedly.
- Worse, an undershoot when tabbing, can make it easy to accidentally activate the wrong button.
- Screen reader users are informed of both sets. Both sets work, so it's harmless but confusing.
- Speech control users may encounter them if using a "show numbers" tool. They won't know what the buttons do, but so long as they do not speak the number, they can avoid accidentally activating the wrong button.
For some arcane reason we can't hide the originals with display:none otherwise it won't work. See this comment in prepareDialogButtons(), dialog.ajax.es6.js:
// Hidden form buttons need special attention. For browser consistency,
// the button needs to be "visible" in order to have the enter key fire
// the form submit event. So instead of a simple "hide" or
// "display: none", we set its dimensions to zero.
// See http://mattsnider.com/how-forms-submit-when-pressing-enter/
The linked article says this is about some legacy browsers from back in the days of IE8.
Proposed resolution
Investigate: is the workaround still necessary? We dropped support for IE8 ages ago.
Ideally, we'd like to use display: none to hide these buttons from everyone.
If it is still necessary, we can try adding tabindex="-1" aria-hidden="true" to them. It would work, but it's a bit hacky.
Remaining tasks
Patch.
Warrants cross-browser testing whatever approach we use.
User interface changes
TODO. Improve the
API changes
TODO
Data model changes
None.