Skip to content

Initial focus placement for dialog element: terminology for first-focusable vs first-tabbable #7710

Open
@scottaohara

Description

@scottaohara

Per the dialog initial focus proposal, there was a lot of discussion in the orginal Google doc about the use of

focus the first tabbable descendant of the <dialog>

The reason for this is because of the user setting on macOS where not all elements that would otherwise be tabbable are by default. The following are just a few key instances of comments made in that thread to allow the conversation to continue here as necessary:

@Westbrook

"first tabbable" can be different in Safari than in other contexts. Do you think there is a way that we could define this as an element that could be normalized across browsers in some way? Possibly by defining it as the set of elements that could be tabbed to...

@cookiecrook

If you're looking for a term that can replace "tabbable," I think "first keyboard focusable" may do it… But is it clear this means "keyboard focusable [by the user, not script]"? Perhaps "first user keyboard focusable element" or the more clear but verbose "first element that is keyboard focusable by the user"?

In Safari, a user can always focus any of the same elements that are "tabbable" in other browsers; but depending on the user's setting, they may press Tab or Option+Tab to get to those "keyboard focusable" elements.

"keyboard focusable" ~= "tabbable" and/or "option-tabbable"

[Note: "keyboard focusable" would not include tabindex=-1, but a more general "user focusable" term may, because you can click to focus tabindex=-1.]

I'd prefer a term other than "tabbable" if possible, but could live with the defined term if no better name arises in conversation.

@aleventhal

Do folks like the term "keyboard-focusable"? (Not sure if it needs a hyphen)

@scottohara

i think that's an alright term to use / define so long as it clearly indicates that in a group of controls where all are keyboard-focusable, but only one is meant to be reached by the Tab key at a time.The use of the term 'tabbable' was meant to mitigate against initial focus going to an unchecked radio button, or an unselected tab in a tablist. Those are keyboard focusable, but just not by Tab key when there is another chosen element in the grouping. re: the tabbability of radios.

@cookiecrook

Something about being “In a keyboard focus loop” perhaps? I think the radio group itself (which acts like a composite widget) is in the loop. The arrow behavior actually changes selection, which pulls focus along with it. Granted it is an odd special case. A note may be required to explain radio in the definition of keyboard focusable.
An update after further discussion with other WebKt contributors. Similar to my suggestion above but not identical: If the the first tab-focusable* element would trigger a scroll-to-visible, then the dialog should receive focus, not the first tab-focusable element.

::We're okay using the term "tab-focusable" with the acknowledgement that this only sometimes includes links. E.g. not by default in Safari, and not when the preference has been changed in Chrome or Firefox. The tab loop is different between browsers/settings, so the resulting focused element may be different between browsers. That's okay as long as it doesn't trigger an unexpected scroll in the dialog.::

WDYT?


Further discussion needs to occur on alignment with Gecko, Webkit and Chromium on allowing scrollable containers to receive keyboard focus. This being particularly important when there is no focusable elements within a scrollable container (e.g., <div style="overflow: auto; max-height: 300px>lots of static text</div>").

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions