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

__tests__/spelling-ignore.yml

@@ -204,6 +204,7 @@
 - reflow
 - Viewport
 - dom-meta-content
+- showModal
 
 # Unsure why the dictionary does not have these words
 - programmatically

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

@@ -28,7 +28,7 @@ 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][] 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][].
@@ -122,10 +122,61 @@ 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
+
+Once "Privacy policy details" button is activated, the `iframe` element become [inert][] because of showModal() method that causes the `iframe` to be [blocked by a modal].
+
+```html
+<iframe srcdoc="<a href='/'>Home</a>"></iframe>
+<div>
+    <button id="ppDetails">Privacy policy details</button>
+</div>
+<dialog id="ppDialog" aria-labelledby="dialogLabel">
+    <h2 id="dialogLabel">Privacy Policy</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    <button id="cancel">Cancel</button>
+</dialog>
+<script>
+    const ppDetails = document.getElementById("ppDetails");
+    const cancelButton = document.getElementById("cancel");
+    const dialog = document.getElementById("ppDialog");
+
+    ppDetails.addEventListener("click", () => {
+        dialog.showModal();
+    });
+
+    cancelButton.addEventListener("click", () => {
+        dialog.close();
+    });
+</script>
+```
+
+#### Inapplicable Example 7
+
+This `iframe` element is [inert][] because it is [blocked by 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'
+[inert]: #inert 'Definition of Inert'
 [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/inert.md

@@ -0,0 +1,15 @@
+---
+title: Inert
+key: inert
+unambiguous: true
+objective: true
+input_aspects:
+  - Accessibility tree
+  - CSS styling
+  - DOM tree
+---
+
+An [HTML or SVG element][] is inert if:
+- it has an `inert` [attribute value][] of true; or
+- one of its ancestor elements has an `inert` [attribute value][] of true; or
+- it is [blocked by a modal](https://html.spec.whatwg.org/multipage/interaction.html#blocked-by-a-modal-dialog).