Page MenuHomePhabricator

In template insert dialog, tab focus goes through a bunch of invisible buttons before reaching the "Insert" action
Closed, ResolvedPublic1 Estimated Story Points

Description

In template insert dialog, tab focus goes through a bunch of invisible buttons before reaching the "Insert" action.

I'm inserting a template "Advert" on the English Wikipedia:

pasted_file (511×518 px, 28 KB)

I expect that tabbing should move my focus to "Show options", then "Cancel", then "Insert" (or possibly some other order of these buttons). Instead, it goes through a bunch of invisible stuff before finally reaching the "Insert" button on the eighth keypress.

Logging them with $(document).on('focusin', function(e){ console.log(e.target) }) in the console:

pasted_file (208×1 px, 77 KB)

This looks like things from the extended transclusion dialog, which shouldn't be accessible when hidden.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

We use tabindex=0 to force elements to be included while tabbing - but that still applies *even if the element is not visible* :(
OO.ui.mixin.TabIndexedElement has some logic to change the tab index to -1 when the element is disabled, but do we really have to go and disable every TabIndexedElement under a hidden BookletLayout outline, just to have sane tabbing?

They are not proper invisible, though. They're just offscreen. This needs some display: none rather than whatever magic is used to hide stuff here.

pasted_file (995×1 px, 329 KB)

It's .oo-ui-menuLayout.oo-ui-menuLayout-hideMenu > .oo-ui-menuLayout-menu { width: 0 !important; height: 0 !important; overflow: hidden; } generated as part of OOUI's MenuLayout.less

Jdforrester-WMF set the point value for this task to 1.
Jdforrester-WMF moved this task from To Triage to Bug Fixes on the VisualEditor board.
Jdforrester-WMF moved this task from Bug Fixes to TR0: Interrupt on the VisualEditor board.

When my https://gerrit.wikimedia.org/r/282964 gets landed, we could use that, and then either make sure to set aria-disabled=true on the hidden links while they're hidden, or have the scope be applied to the single panes of the dialog.

Change 297426 had a related patch set uploaded (by DLynch):
Add aria-hidden to several Layouts

https://gerrit.wikimedia.org/r/297426

Change 297608 had a related patch set uploaded (by DLynch):
Window: make the focus trap smarter

https://gerrit.wikimedia.org/r/297608

Change 297804 had a related patch set uploaded (by DLynch):
TabIndexScope: respect aria-hidden

https://gerrit.wikimedia.org/r/297804

Change 297608 merged by jenkins-bot:
Window: make the focus trap smarter

https://gerrit.wikimedia.org/r/297608

Change 297426 merged by jenkins-bot:
Add aria-hidden to several Layouts

https://gerrit.wikimedia.org/r/297426

Change 297804 merged by jenkins-bot:
TabIndexScope: respect aria-hidden

https://gerrit.wikimedia.org/r/297804

Change 300309 had a related patch set uploaded (by DLynch):
TabIndexScope: skipAriaHidden not respected, and applied to FragmentDialog

https://gerrit.wikimedia.org/r/300309

Change 300309 merged by jenkins-bot:
TabIndexScope: skipAriaHidden not respected, and applied to FragmentDialog

https://gerrit.wikimedia.org/r/300309