Do not autofocus inert or hidden elements #654
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
keithamus
reviewed
Jul 29, 2022
seanpdoyle
force-pushed
the
autofocus-avoids-inert-elements
branch
2 times, most recently
from
8d36ac5 to
24a416e
Compare
Closes [hotwired#546][] According to the specification, there is an [algorithm][] for determining the [focusable area][], that is, the elements with the `[autofocus]` attribute that can receive focus: > Elements that meet all the following criteria: > * the element's [tabindex][] value is non-null, or the element is determined by the user agent to be focusable; > * the element is either not a shadow host, or has a shadow root whose delegates focus is false; > * the element is not actually [disabled][]; > * the element is not [inert][]; > * the element is either being rendered or being used as relevant canvas fallback content. This commit extends the `Snapshot.firstAutofocusableElement` to programmatically determine the focusable area based on the available attributes, including checks for `<details>` and `<dialog>` ancestors that do not declare `[open]`. [hotwired#546]: hotwired#546 [tabindex]: https://html.spec.whatwg.org/multipage/interaction.html#tabindex-value [algorithm]: https://html.spec.whatwg.org/multipage/interaction.html#get-the-focusable-area [disabled]: https://html.spec.whatwg.org/multipage/semantics-other.html#concept-element-disabled [inert]: https://html.spec.whatwg.org/multipage/interaction.html#inert [focusable area]: https://html.spec.whatwg.org/multipage/interaction.html#focusable-area [hidden]: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
seanpdoyle
force-pushed
the
autofocus-avoids-inert-elements
branch
from
24a416e to
0c6bc0e
Compare
Two tests covering the `[recursive]` attribute were depending on the `nextBeat()` helper, which caused inconsistent failures due to timing issues. This commit replaces the time-based `nextBeat()` calls with promises to wait for `turbo:frame-load` events to fire on the `<turbo-frame id="recursive">` and the nested `<turbo-frame id="composer">` elements.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes hotwired/turbo#546
According to the specification, there is an algorithm for
determining the focusable area, that is, the elements with the
[autofocus]attribute that can receive focus:This commit extends the
Snapshot.firstAutofocusableElementtoprogrammatically determine the focusable area based on the available
attributes, including checks for
<details>and<dialog>ancestorsthat do not declare
[open].