Update "iframe with interactive elements is not excluded from tab-order" rule to manage inert iframe elements #2038
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -28,13 +28,18 @@ acknowledgments: | |||||||||
|
|
||||||||||
| ## Applicability | ||||||||||
|
|
||||||||||
| This rule applies to any `iframe` element that is not [inert](#akn7bn:inert) and that [contains](#akn7bn:contain) at least one element for which all the following are true: | ||||||||||
|
|
||||||||||
| - the element is [visible][]; and | ||||||||||
| - the element is part of the [sequential focus navigation order][] of the `iframe`'s [document][]. | ||||||||||
|
|
||||||||||
| An element is <dfn id="akn7bn:contain">contained</dfn> in a [nested browsing context][] if its [owner document][] is the [container document][] of the [nested browsing context][]. | ||||||||||
|
|
||||||||||
| An `iframe` element is <dfn id="akn7bn:inert">inert</dfn> if: | ||||||||||
| - it has an `inert` [attribute value][] of true; or | ||||||||||
|
||||||||||
| - one of its ancestor elements has an `inert` [attribute value][] of true; or | ||||||||||
| - an element which is not the iframe itself and that is not [contained](#akn7bn:contain) in it behaves as a [modal][], making the iframe inoperable. | ||||||||||
|
||||||||||
| - an element which is not the iframe itself and that is not [contained](#akn7bn:contain) in it behaves as a [modal][], making the iframe inoperable. | |
| - an element which is not the iframe itself and that is not [contained](#akn7bn:contain) in it makes the iframe and all of its contents [inoperable][]. (For example: a modal.) |
Does that improve the situation at all?
There was a problem hiding this comment.
What I meant by modal dialogs was the actual <dialog> element with showModal() called on it. That programmatically makes all other content on the page inert. I think you could define it like this:
The element is in a page with a
dialogelement with theis-modalflag set totrue, and is not a descendant of thatdialogelement.
I'm not sure we should try for a generic modal definition. I don't know how you'd do that in a way that's objective.
There was a problem hiding this comment.
Then, we are indeed going for blocked by a modal:
A Document document is blocked by a modal dialog subject if subject is the topmost dialog element in document's top layer. While document is so blocked, every node that is connected to document, with the exception of the subject element and its flat tree descendants, must become inert.
subject can additionally become inert via the inert attribute, but only if specified on subject itself (i.e., subject escapes inertness of ancestors); subject's flat tree descendants can become inert in a similar fashion.
Note: The dialog element's showModal() method causes this mechanism to trigger, by adding the dialog element to its node document's top layer.
Outdated
There was a problem hiding this comment.
| - an element which is not the iframe itself and that is not [contained](#akn7bn:contain) in it behaves as a [modal][], making the iframe inoperable. | |
| - it is on the same page as a `dialog` element which has its [`is-modal`](https://html.spec.whatwg.org/multipage/interactive-elements.html#is-modal) flag set to `true`, and is not a descendant of that `dialog` element. |
giacomo-petri marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
giacomo-petri marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
| [flattened tabindex-ordered focus navigation scope]: https://html.spec.whatwg.org/multipage/interaction.html#flattened-tabindex-ordered-focus-navigation-scope 'HTML - Living Standard, 2022/07/08' | |
| [flattened tabindex-ordered focus navigation scope]: https://html.spec.whatwg.org/multipage/interaction.html#flattened-tabindex-ordered-focus-navigation-scope 'HTML - Living Standard, 2022/07/08' | |
| [inoperable]: https://www.w3.org/TR/wai-aria/#dfn-operable |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| --- | ||
| title: Modal dialog | ||
|
||
| key: modal-dialog | ||
| unambiguous: true | ||
| objective: true | ||
| input_aspects: | ||
| - Accessibility tree | ||
| - CSS styling | ||
| - DOM tree | ||
| --- | ||
|
|
||
| A modal dialog is an element which, until it is closed, prevents user interaction with any content on the web page that is not a descendant element of the modal. Visually, a modal often (but not necessarily) appears on top of all other content of the [html web page][] and visually darkens or otherwise obscures that other content. | ||
|
|
||
| Modal dialogs are typically used to display important messages, prompts, or alerts that require the user's attention and prevent them from interacting with other parts of the page until they have addressed the issue at hand. They are "modal" because they create a temporary mode where the user is focused on the dialog and cannot interact with the rest of the page. | ||
|
|
||
| [html web page]: #web-page-html 'Definition of Web Page' | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we can have this as a definition also, to make it reusable in other (future?) rules
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And probably it would be better to have a definite of inert element, not just inert iframe
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree, we should have a separate definition of "inert element".