"Iframe not with interactive element" [akn7bn]: handle inert iframe (act-rules#2125)

Jym77 · giacomo-petri · carlosapaduarte · web-flow · commit 93ae5bfa136d · 2023-10-16T09:41:39.000+02:00
* Update programmatically-determined-link-context.md * Update iframe-not-focusable-has-no-interactive-content-akn7bn.md * Update programmatically-determined-link-context.md * Update iframe-not-focusable-has-no-interactive-content-akn7bn.md * Create modal-dialog * Rename modal-dialog to modal-dialog.md * Update iframe-not-focusable-has-no-interactive-content-akn7bn.md * Update iframe-not-focusable-has-no-interactive-content-akn7bn.md * Apply suggestions from code review Co-authored-by: Dan Tripp <113939352+dan-tripp-siteimprove@users.noreply.github.com> * Update iframe-not-focusable-has-no-interactive-content-akn7bn.md * Update and rename modal-dialog.md to inert.md * Update iframe-not-focusable-has-no-interactive-content-akn7bn.md * Update iframe-not-focusable-has-no-interactive-content-akn7bn.md * Update spelling-ignore.yml * Update iframe-not-focusable-has-no-interactive-content-akn7bn.md * Update inert.md * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> Co-authored-by: Dan Tripp <113939352+dan-tripp-siteimprove@users.noreply.github.com> * Update iframe-not-focusable-has-no-interactive-content-akn7bn.md * Update inert.md * Apply suggestions from code review Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * AGWG Updates (act-rules#2067) * Add (alt="") for clarity on empty alt * Resolve focus visible feedback * Tweak contrast rules * Tweak page title descriptive * Fix tests * Apply suggestions from code review Co-authored-by: Trevor R. Bostic <32486143+tbostic32@users.noreply.github.com> --------- Co-authored-by: Trevor R. Bostic <32486143+tbostic32@users.noreply.github.com> * [cae760] Frame has non-empty accessible name (act-rules#2034) * First pass in response to Feb 16 TF meeting * typo * Update _rules/iframe-non-empty-accessible-name-cae760.md Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * Update _rules/iframe-non-empty-accessible-name-cae760.md Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * Update _rules/iframe-non-empty-accessible-name-cae760.md Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * Update _rules/iframe-non-empty-accessible-name-cae760.md Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * Update _rules/iframe-non-empty-accessible-name-cae760.md Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * Move note about frame to background * Set height for frame * Test wants alphabetical contributors * Update _rules/iframe-non-empty-accessible-name-cae760.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update _rules/iframe-non-empty-accessible-name-cae760.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update _rules/iframe-non-empty-accessible-name-cae760.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Move note to background --------- Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Updating glossary definition. (act-rules#2069) * Bump yaml and zx (act-rules#2056) * Bump yaml and zx Bumps [yaml](https://github.com/eemeli/yaml) to 2.2.2 and updates ancestor dependency [zx](https://github.com/google/zx). These dependencies need to be updated together. Updates `yaml` from 1.10.2 to 2.2.2 - [Release notes](https://github.com/eemeli/yaml/releases) - [Commits](eemeli/yaml@v1.10.2...v2.2.2) Updates `zx` from 5.3.0 to 7.2.1 - [Release notes](https://github.com/google/zx/releases) - [Commits](google/zx@5.3.0...7.2.1) --- updated-dependencies: - dependency-name: yaml dependency-type: indirect - dependency-name: zx dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> * Trigger CLA? --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * new rule: ARIA required ID references exist (act-rules#2041) * new rule: ARIA required ID references exist * Address review comments Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Apply suggestions from code review Co-authored-by: Tom Brunet <thbrunet@us.ibm.com> Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update _rules/aria-required-id-references-in6db8.md * Apply suggestions from code review Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> --------- Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> Co-authored-by: Tom Brunet <thbrunet@us.ibm.com> * scrollable element: clarify the title (act-rules#2083) * UpdateTableHeaderRule (act-rules#2074) * UpdateTableHeaderRule * Update table-header-cell-has-assigned-cells-d0f69e.md * trigger test * Update _rules/table-header-cell-has-assigned-cells-d0f69e.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> --------- Co-authored-by: Wilco Fiers <wilco.fiers@deque.com> Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Adds apostrophe to mark the possessive form (act-rules#2080) Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * Focus visible rule: Fix typo (act-rules#2082) * Contrast rules: Tweak background text (act-rules#2090) * Tweak name / description of Scrollable element keyboard (act-rules#2092) * Deprecate HTML page lang and xml:lang attributes have matching values (act-rules#2086) * Deprecate HTML page lang and xml:lang attributes have matching values * Apply suggestions from code review Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> --------- Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> * Rephrase Applicability (act-rules#2079) * Rename file (act-rules#2078) * Move secondary requirement texts out of the background (act-rules#2060) * Move secondary requirement texts out of the background * Apply suggestions from code review * fix test * Fix failing test * Secondary reqs on ARIA rules * Update all secondary requirements * Typos * Fix failing tests * Update _rules/link-non-empty-accessible-name-c487ae.md Co-authored-by: Trevor R. Bostic <32486143+tbostic32@users.noreply.github.com> * Tweaked the language some more * Update rule design info for secondary requirements * Fix tests * Apply suggestions from code review Co-authored-by: Kathy Eng <kengdoj@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> --------- Co-authored-by: Trevor R. Bostic <32486143+tbostic32@users.noreply.github.com> Co-authored-by: Kathy Eng <kengdoj@users.noreply.github.com> Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * fix test on secondary requirements (act-rules#2102) * fix test on secondary requirements * More assertions * Update _rules/aria-required-id-references-in6db8.md Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> --------- Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update dependencies (including act-tools) (act-rules#2103) * fix test-assets not getting built right (act-rules#2104) * Update element-lang-valid-de46e4.md (act-rules#2100) Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * fix the approve-rule action (act-rules#2105) * Remove outdated accsupport note (act-rules#2111) * "Element with lang attribute has valid language tag" [de46e4]: Updated Failed Examples 4 and 5 to reflect Applicability (act-rules#2094) * Update element-lang-valid-de46e4.md Updated Failed examples 4 and 5 to reflect applicability * Apply suggestions from code review Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Update _rules/element-lang-valid-de46e4.md Co-authored-by: Dan Tripp <113939352+dan-tripp-siteimprove@users.noreply.github.com> --------- Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> Co-authored-by: Dan Tripp <113939352+dan-tripp-siteimprove@users.noreply.github.com> Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> * Text spacing rewrite (act-rules#1923) * Add new letter-spacing rule and deprecate old one * Add new word-spacing rule and deprecate old one * Clean up assumptions * Clean up * Clean up * Add new line-height rule and deprecate old one * Replace old letter spacing version rather than deprecating it * Replace old line height version rather than deprecating it * Replace old word spacing version rather than deprecating it * Target text nodes * Improve background note * Apply suggestion from review * Clean up * Target text nodes rather than their parents * Target text nodes rather than their parents * Add missing reference * Update example * Apply to parent of text nodes, not text nodes * Apply suggestions from code review Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> * Typos Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> * Typos --------- Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> * "Meta viewport allows for zoom" (b4f0c3): Explicit meaning of 'has' (act-rules#1994) * Explicit meaning of 'has' * Improve expectation and examples * Typo * Improve algorithm description Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> * Rephrase expectations * Streamline Applicability * Typo * Simplify expectations --------- Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> * Map Empty-heading rule to ARIA instead of WCAG (act-rules#2120) Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> * Deprecate 4.1.1 rules (act-rules#2117) Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: giacomo-petri <106394951+giacomo-petri@users.noreply.github.com> Co-authored-by: Carlos Duarte <caduarte@campus.ul.pt> Co-authored-by: Dan Tripp <113939352+dan-tripp-siteimprove@users.noreply.github.com> Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> Co-authored-by: Trevor R. Bostic <32486143+tbostic32@users.noreply.github.com> Co-authored-by: Tom Brunet <thbrunet@us.ibm.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: HelenBurge <41951878+HelenBurge@users.noreply.github.com> Co-authored-by: Wilco Fiers <wilco.fiers@deque.com> Co-authored-by: Daniel Montalvo <49305434+daniel-montalvo@users.noreply.github.com> Co-authored-by: Kathy Eng <kengdoj@users.noreply.github.com>
diff --git a/__tests__/spelling-ignore.yml b/__tests__/spelling-ignore.yml
@@ -205,6 +205,7 @@
 - reflow
 - Viewport
 - dom-meta-content
+- showModal
 
 # Unsure why the dictionary does not have these words
 - programmatically
diff --git a/_rules/iframe-with-interactive-content-in-tab-order-akn7bn.md b/_rules/iframe-with-interactive-content-in-tab-order-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,44 @@ 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 tabindex="-1" inert srcdoc="<a href='/'>Home</a>"></iframe>
+```
+
+#### Inapplicable Example 6
+
+Once the "Privacy policy details" button is activated, the `iframe` element becomes [inert][] because of the showModal() method, which causes the `iframe` to be [blocked by a modal].
+
+```html
+<iframe id="myFrame" title="Links" srcdoc="<a href='/'>Home</a>"></iframe>
+<div>
+	<button id="ppButton" onclick="openDialog()">Privacy policy details</button>
+</div>
+<dialog id="ppDialog" aria-labelledby="dialogLabel">
+	<h2 id="dialogLabel">Privacy Policy</h2>
+	<p>We store no data.</p>
+	<button id="cancel" onclick="ppDialog.close()">Cancel</button>
+</dialog>
+<script>
+	const openDialog = () => {
+		ppDialog.showModal();
+		myFrame.tabIndex = '-1'
+	}
+	ppDialog.addEventListener('close', () => myFrame.tabIndex = 0)
+	window.addEventListener('DOMContentLoaded', openDialog);
+</script>
+```
+
 [attribute value]: #attribute-value 'Definition of Attribute Value'
+[blocked by a modal]: https://html.spec.whatwg.org/multipage/interaction.html#blocked-by-a-modal-dialog
 [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'
diff --git a/pages/glossary/inert.md b/pages/glossary/inert.md
@@ -0,0 +1,20 @@
+---
+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 in the [flat tree][] has an `inert` [attribute value][] of true; or
+- it is [blocked by a modal][].
+
+[HTML or SVG element]: #namespaced-element 'Definition of HTML or SVG element'
+[attribute value]: #attribute-value 'Definition of Attribute value'
+[blocked by a modal]: https://html.spec.whatwg.org/multipage/interaction.html#blocked-by-a-modal-dialog
+[flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'Definition of flat tree'
