Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
scottaohara opened this issue Mar 15, 2022 · 5 comments
Labels
topic: dialog The <dialog> element

Comments

@scottaohara
Copy link
Collaborator

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>").

@josepharhar
Copy link
Contributor

For "first tabbable" I am planning on using the "sequentially focusable" term in the HTML spec because it seems to refer to things you can focus to by pressing tab: https://html.spec.whatwg.org/C/#sequentially-focusable

@aleventhal
Copy link

aleventhal commented Jun 7, 2022 via email

@domenic
Copy link
Member

domenic commented Aug 9, 2022

Regarding the question of which issues in #4184 (comment) should be considered blocking for writing up a spec of https://github.com/whatwg/html/wiki/dialog--initial-focus,-a-proposal#initial-dialog-focus-logic : "sequentially focusable" is the correct spec term here. This issue should be unblocked.

I don't believe the introduction of focusgroup (in whatever form it ends up) will change how appropriate the term sequentially focusable is, but maybe I'm missing something.

@aleventhal
Copy link

Do we think that "sequentially focusable" will become a confusing term once focusgroup is introduced? The items in a focusgroup are still sequentially focusable, but with the up/down arrow keys. Apologies for the bikeshedding :)
Since "tabbable" is too device-specific, perhaps "in the primary focus cycle" ?.

@domenic
Copy link
Member

domenic commented Aug 10, 2022

I don't really see the confusion? They're still focusable in sequence, so the term "sequentially focusable" seems fine. Perhaps you could give an example of the code you think will be confusing?

Also, this is all very speculative, focusgroup is a proposal which hasn't been sent to the WHATWG yet, and I anticipate we can have the discussion of what to call focusgroup's terms when it is?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic: dialog The <dialog> element
Development

No branches or pull requests

5 participants