Update "iframe with interactive elements is not excluded from tab-order" rule to manage inert iframe elements

_rules/iframe-not-focusable-has-no-interactive-content-akn7bn.md

@@ -28,13 +28,17 @@ acknowledgments:
 
 ## Applicability
 
-This rule applies to any `iframe` element that [contains](#akn7bn:contain) at least one element for which all the following are true:
+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
+- 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.
+
 ## Expectation
 
 The test target does not have a negative number as a `tabindex` [attribute value][].
@@ -122,10 +126,32 @@ This `iframe` element contains a link that is not part of its [sequential focus
 <iframe tabindex="-1" srcdoc="<a href='/' tabindex='-1'>Home</a>"></iframe>
 ```
 
+#### Inapplicable Example 5
+
+This `iframe` element is [inert][] because of its own `inert` [attribute value][].
+
+```html
+<iframe inert srcdoc="<a href='/'>Home</a>"></iframe>
+```
+
+#### Inapplicable Example 6
+
+This `iframe` element is [inert][] because of another element that behaves as a [modal][].
+
+```html
+<div style="width:100vw; height:100vh; position:absolute; left:0; top:0; background:#000; opacity: 0.8;"></div>
+<div role="dialog" aria-labelledby="modal-heading" aria-modal="true" tabindex="-1" style="width:calc(100% - 20vw); height:calc(100% - 20vh); margin-left:10vw; margin-top:10vh; position:absolute; left:0; top:0; background:#fff; z-index:1; padding:40px; box-sizing:border-box;">
+  <h2 id="modal-heading">Hello</h2>
+  <p>Hello World!</p>
+</div>
+<iframe tabindex="-1" srcdoc="<a href='/'>Home</a>"></iframe>
+```
+
 [attribute value]: #attribute-value 'Definition of Attribute Value'
 [container document]: https://html.spec.whatwg.org/#bc-container-document 'HTML browsing context container document, 2020/12/18'
 [document]: https://html.spec.whatwg.org/multipage/dom.html#document 'HTML definition of document'
 [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'
+[modal]: #modal-dialog 'Definition of Modal dialog'
 [nested browsing context]: https://html.spec.whatwg.org/#nested-browsing-context 'HTML nested browsing context, 2020/12/18'
 [owner document]: https://dom.spec.whatwg.org/#dom-node-ownerdocument 'DOM node owner document property, 2020/12/18'
 [sc211]: https://www.w3.org/TR/WCAG21/#keyboard 'WCAG 2.1 Success criterion 2.1.1 Keyboard'

pages/glossary/modal-dialog.md

@@ -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 a type of user interface element that appears on top of the main content of a [html web page][] or application and requires the user to take some action or make a decision before they can continue interacting with the program.
+
+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'