1506787 - Provide a way to make non-control XUL elements focusable but not tabbable

Status: RESOLVED FIXED

(Core :: XUL, enhancement)

Description

[James Teh [:Jamie]]

Bug 1436086 will make browser toolbars navigable with the keyboard. Rather than every button being in the tab order (which would be pretty inefficient for users), groups of buttons will occupy a single tab stop, with left/right arrows being used to navigate within the group. This means that toolbar buttons need to be focusable but not in the tab order. (This includes <toolbarbutton>, but also other elements like <image> and <box> which are used as button-like things on toolbars.)

It's possible to achieve this by temporarily setting -moz-user-focus to normal, calling element.focus(), then setting -moz-user-focus back to ignore. However, this is a pretty big hack and causes some weirdness for accessibility (and maybe other things). Also, this means that tests can't simply call element.focus() on toolbar buttons; they too must use this -moz-user-focus setting hack.

I propose we add a new -moz-user-focus: no-tab value. We could alternatively allow tabindex="-1" like HTML, but this would mean changing the markup for every single button on the toolbar, which is likely to result in a lot of churn (and broken keyboard access in future).

Comment 1

[James Teh [:Jamie]]

Attachment: Bug 1506787: add CSS -moz-user-focus: no-tab to make a non-control XUL element focusable but not tabbable.

This is similar to tabindex="-1", but non-control XUL elements don't support that.
It will primarily be useful for buttons on toolbars, which will be grouped under a single tab stop for efficiency.

Comment 2

[James Teh [:Jamie]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=a111b58089a0f8815ae41fbfd11f8c9fd1426f50

Comment 3

[James Teh [:Jamie]]

Oops. Wrong try push. Correct one:
https://treeherder.mozilla.org/#/jobs?repo=try&revision=08276f3fe1e5c7be608483bc53d5f4568ee7dba1

Comment 4

[James Teh [:Jamie]]

After review comments and discussion, I'm switching to tabindex="-1" instead, which is more standard/future proof. Try run:
https://treeherder.mozilla.org/#/jobs?repo=try&revision=d8e0a570e0cc55401c2782e9208e5e3a716ebf91

Comment 5

[James Teh [:Jamie]]

Attachment: Bug 1506787: Support tabindex attribute (including value -1) on non-control XUL elements.

Previously, the tabindex attribute wasn't supported on non-control XUL elements at all.
The only way to make those focusable was to use -moz-user-focus: normal.
However, that caused the element to be included in the tab order; there was no way to make it focusable but not tabbable.
This can now be achieved using tabindex="-1".
This will primarily be useful for buttons on toolbars, which will be grouped under a single tab stop for efficiency.

For consistency, this also changes the behaviour of tabindex="-1" with -moz-user-focus: ignore on XUL controls.
Previously, -moz-user-focus: ignore would override tabindex="-1", making the element unfocusable.
Now, the tabindex attribute always overrides if explicitly specified.

Comment 6

[James Teh [:Jamie]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=7b3f385c080354c339cc72c2522a4a529034e2b5

Comment 7

[James Teh [:Jamie]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=f0eea2f6e4067691757a40c6d6165d70f4550e11

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/38844846c6ae
Support tabindex attribute (including value -1) on non-control XUL elements. r=smaug

Comment 9

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/38844846c6ae