focus-visible
focus-visible copied to clipboard
hasKeyboardModality: suppress hadKeyboardEvent changes while typing.
This PR is submitted as a proposed improvement in behavior, and since it might be at variance with existing browser implementations of :focus-visible, it's reasonable to reject it. But I think it's worth discussing whether the minor improvement is desirable, and at least to put this PR in the repo history for anyone who feels .focus-visible should work this way.
In summary, this proposal improves the behavior when using Enter to submit a form causes the focus to shift to another element on the page.
The goal is to match user expectations in a common scenario for Single Page Apps and generally dynamic webpages. Say you have a search field that, when submitted, fetches data via XHR and displays it on the page, calling focus() on the first search result.
With the existing behavior, clicking into the field, typing the query, then hitting Enter will cause that first result to be focus-visible — due to the Enter keydown. That's unexpected for people who mostly use a pointer.
With this change, it's not the Enter keydown that determines focus-visible, it's the method by which you focused the field. If you used Tab to focus the field, the first result will be focus-visible. If you used a pointer to focus the field, it will not.
More details in the commit messages.
tbh it might be slightly clearer to name the new variable something like isTyping
, since in this codebase "keyboard modality" is effectively synonymous with hadKeyboardEvent
— that is, it means "using the keyboard to navigate" rather than "using the keyboard to type".