Merge branch 'develop' into giacomo-petri-5c01ea-added-examples

__tests__/spelling-ignore.yml

@@ -240,6 +240,7 @@
 - luminance
 - disambiguated
 - superclass
+- grey
 
 # Parts of Unicode
 - 000A

_rules/autocomplete-valid-value-73f2c2.md

@@ -46,7 +46,7 @@ Each test target's `autocomplete` [attribute value][] is a [space separated][] l
 
 The `autocomplete` attribute is used on form fields that correspond to [Input Purposes for User Interface Components](https://www.w3.org/TR/WCAG22/#input-purposes) and collect information about the user.
 
-If the `autocomplete` attribute is used to describe "custom" taxonomy, for example using the custom autocomplete value "banner" (`<input type="text" autocomplete="banner" />`), success Criterion [1.3.5 Identify Input Purpose][sc135] may be satisfied even if this rule failed.
+If the `autocomplete` attribute is used to describe "custom" taxonomy, for example using the custom autocomplete value "banner" (`<input type="text" autocomplete="banner" />`), success criterion [1.3.5 Identify Input Purpose][sc135] may be satisfied even if this rule failed.
 
 The `aria-disabled` state is used on `input` elements which are not part of [sequential focus navigation][] and are not otherwise [operable](https://www.w3.org/TR/wai-aria-1.2/#dfn-operable). If this is not the case, this rule may be inapplicable on elements that are still operable and require a valid `autocomplete` attribute to satisfy success criterion [1.3.5 Identify Input Purpose][sc135].
 
@@ -56,18 +56,18 @@ The purpose of a control is programmatically identifiable even when its `autocom
 
 - While `autocomplete` is a promising technique for supporting personalization in HTML, support for this in assistive technologies is fairly limited.
 - Implementation of [Presentational Roles Conflict Resolution][] varies from one browser or assistive technology to another. Depending on this, some elements can have a [semantic role][] of `none` and fail this rule with some technology but users of other technologies would not experience any accessibility issue.
-- Some user agents treat the value of the `aria-disabled` attribute as case-sensitive.
 - In some user agents, querying the value of the `autocomplete` property returns an empty string ("") even when the attribute was set according to the rule's expectations. It affects assistive technologies which rely on this property to personalize input fields collecting information about the user.
+- Authors may assign inappropriate `autocomplete` attribute values. Moreover, HTML specifications restrict certain `autocomplete` attribute values to specific form controls. Mismatches between `autocomplete` attribute values and form control types may or may not lead to a failure of [success criterion 1.3.5 Identify Input Purpose](https://www.w3.org/TR/WCAG22/#identify-input-purpose). However, this rule focuses exclusively on validating valid `autocomplete` attribute values, disregarding their contextual appropriateness.
 
 ## Background
 
 The intent of this rule is to ensure that the `autocomplete` attribute can be used to support personalization. Many users may find it easier to fill out forms if those can be styled or laid out in a way that is familiar to them. Assistive technologies can do this when a form control is marked up in such a way that its purpose can be understood. For instance, assistive technologies could add familiar icons and colors to different fields, making it easier for the user to understand what the form does.
 
 Many browsers provide auto-filling suggestions even when the control's `type` [attribute value][] is not [appropriate][appropriate field name for the form control] for its `autocomplete` [attribute value][]. The same happens when the `autocomplete` property is queried. However, the `autocomplete` property is not programmatically identifiable if the requirements for the optional tokens are not met.
 
-The auto-completing feature of the `autocomplete` attribute benefits many users, but it is not required to satisfy success Criterion [1.3.5 Identify Input Purpose][sc135]. Setting `autocomplete="off"` on the element's [form owner](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-owner) prevents the user agent from completing it, but it does not prevent the `autocomplete` [attribute value][] from being programmatically identifiable.
+The auto-completing feature of the `autocomplete` attribute benefits many users, but it is not required to satisfy success criterion [1.3.5 Identify Input Purpose][sc135]. Setting `autocomplete="off"` on the element's [form owner](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-owner) prevents the user agent from completing it, but it does not prevent the `autocomplete` [attribute value][] from being programmatically identifiable.
 
-The [fixed value](#73f2c2:fixed-value) condition in the Applicability is excluding `input` elements who do not consider the `autocomplete` attribute, based on their `type` [attribute value][]; `input` elements with a `type` [attribute value][] of `hidden` are excluded by the [hidden](#73f2c2:hidden) condition.
+The [fixed value](#73f2c2:fixed-value) condition in the Applicability is excluding `input` elements that do not consider the `autocomplete` attribute, based on their `type` [attribute value][]; `input` elements with a `type` [attribute value][] of `hidden` are excluded by the [hidden](#73f2c2:hidden) condition.
 
 On an `input` element with a `type` [attribute value][] of `hidden`, the autocomplete attribute wears the [autofill anchor mantle](https://html.spec.whatwg.org/#autofill-anchor-mantle), describing the meaning of the given value. In all other cases, it wears the [autofill expectation mantle](https://html.spec.whatwg.org/#autofill-expectation-mantle).
 
@@ -147,14 +147,6 @@ This `autocomplete` [attribute value][] list includes all allowed types of token
 
 #### Passed Example 8
 
-This `autocomplete` [attribute value][] only has the required token "bday-day". It remains programmatically identifiable even though it is inappropriate for the control's `type` [attribute value][] "tel".
-
-```html
-<label>Birthday day<input name="bdayday" type="tel" autocomplete="bday-day"/></label>
-```
-
-#### Passed Example 9
-
 This `autocomplete` [attribute value][] has the required token "current-password", followed by the optional "webauthn" token.
 
 ```html

_rules/form-field-non-empty-accessible-name-e086e5.md

@@ -10,6 +10,10 @@ accessibility_requirements:
     failed: not satisfied
     passed: further testing needed
     inapplicable: further testing needed
+  wcag20:1.3.1: # Info and Relationships (A)
+    secondary: This success criterion is **more strict** than this rule. This is because 1.3.1 Info and Relationship requires that information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text, while 4.1.2 Name, Role, Value only requires an accessible name.
+  wcag20:2.5.3: # Label in Name (A)
+    secondary: This success criterion is **more strict** than this rule. This is because 2.5.3 Label in Name requires that if a label is visible, the accessible name contains the label that is presented visually, while 4.1.2 Name, Role, Value only requires an accessible name.
 input_aspects:
   - Accessibility Tree
   - CSS styling

_rules/html-page-non-empty-title-2779a5.md

@@ -51,7 +51,7 @@ For each target element, the first [HTML][] `title` element that is a [descendan
 
 ## Assumptions
 
-This rule assumes that [Success Criterion 2.4.2 Page Titled](https://www.w3.org/TR/WCAG22/#page-titled) does not require that a document only has one `title` element, nor that it is a child of the `head` element of a document. While this is invalid in HTML, the HTML 5.2 specification describes what should happen in case of multiple titles, and titles outside the `head` element. Because of this, neither of these validation issues causes a conformance problem for WCAG. Regardless of whether this is required by 2.4.2 Page Titled, failing this rule means the success criterion is not satisfied.
+This rule assumes that [Success Criterion 2.4.2 Page Titled](https://www.w3.org/TR/WCAG22/#page-titled) does not require that a document only has one `title` element, nor that it is a child of the `head` element of a document. While this is invalid in HTML, the [HTML specification](https://html.spec.whatwg.org/multipage/dom.html#the-title-element-2) describes what should happen in case of multiple titles, and titles outside the `head` element. Because of this, neither of these validation issues causes a conformance problem for WCAG. Regardless of whether this is required by 2.4.2 Page Titled, failing this rule means the success criterion is not satisfied.
 
 This rule assumes that the title of the page is not provided by a higher-level protocol. For example, the subject field of an email authored in HTML can provide a title without requiring a `title` element. In such a case, this rule will fail while [Success Criterion 2.4.2 Page Titled](https://www.w3.org/TR/WCAG22/#page-titled) may still be satisfied.
 
@@ -90,12 +90,16 @@ This page has a `title` element with content.
 
 #### Passed Example 2
 
-This page has a `title` element that serves as the title for the page and the `iframe` since the `iframe` does not have its own.
+This page has a `title` element that serves as the title for the page. This rule doesn't take into account HTML pages embedded into the target document.
 
 ```html
 <html>
-	<title>This page gives a title to an iframe</title>
-	<iframe src="/test-assets/sc2-4-2-title-page-without-title.html"></iframe>
+	<head>
+		<title>This page gives a title to an iframe</title>
+	</head>
+	<body>
+		<iframe src="/test-assets/sc2-4-2-title-page-without-title.html"></iframe>
+	</body>
 </html>
 ```
 
@@ -198,6 +202,27 @@ This page has a `title` element that only contains a separator character.
 </html>
 ```
 
+#### Failed Example 6
+
+This page does not have a title because the shadow root is not a [descendant](https://dom.spec.whatwg.org/#concept-tree-descendant) of the [document element](https://dom.spec.whatwg.org/#document-element).
+
+```html
+<html>
+	<body>
+		<template id="shadow-element">
+			<title>This is the page title</title>
+		</template>
+		<script>
+      			const host = document.querySelector("body");
+      			const shadow = host.attachShadow({ mode: "open" });
+      			const template = document.getElementById("shadow-element");
+
+      			shadow.appendChild(template.content);
+    		</script>
+	</body>
+</html>
+```
+
 ### Inapplicable
 
 #### Inapplicable Example 1

_rules/links-with-identical-names-and-context-serve-equivalent-purpose-fd3a94.md

@@ -289,8 +289,8 @@ These two HTML `a` elements have the same [accessible name][] and [context][prog
 	<div>
 		<span style="text-align:center;">Contact us</span>
 		<span style="display:flex; justify-content:space-around;">
-			<img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;" />
-			<img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;" />
+			<img src="/test-assets/shared/chat.png" alt="Chat" style="max-width:50px;" />
+			<img src="/test-assets/shared/phone.png" alt="Phone" style="max-width:50px;" />
 		</span>
 		<span style="display:flex; justify-content:space-around;">
 			<a
@@ -315,8 +315,8 @@ These two HTML `a` elements have the same [accessible name][] and [context][prog
 	<div>
 		<span style="text-align:center;">Contact us</span>
 		<span style="display:flex; justify-content:space-around;">
-			<img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;" />
-			<img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;" />
+			<img src="/test-assets/shared/chat.png" alt="Chat" style="max-width:50px;" />
+			<img src="/test-assets/shared/phone.png" alt="Phone" style="max-width:50px;" />
 		</span>
 		<span style="display:flex; justify-content:space-around;">
 			<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=3"
@@ -339,8 +339,8 @@ These two HTML `span` elements have an [explicit role][] of link, same [accessib
 	<div>
 		<span style="text-align:center;">Contact us</span>
 		<span style="display:flex; justify-content:space-around;">
-			<img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;" />
-			<img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;" />
+			<img src="/test-assets/shared/chat.png" alt="Chat" style="max-width:50px;" />
+			<img src="/test-assets/shared/phone.png" alt="Phone" style="max-width:50px;" />
 		</span>
 		<span style="display:flex; justify-content:space-around;">
 			<span
@@ -367,23 +367,13 @@ These two SVG `a` elements have the same [accessible name][] and [context][progr
 ```html
 <html lang="en">
 	<p>
-		<svg enable-background="new 0 0 264 120" viewBox="0 -20 264 140" xmlns="http://www.w3.org/2000/svg">
+		<svg enable-background="new 0 0 264 120" viewBox="-5 -20 80 50" xmlns="http://www.w3.org/2000/svg" style="max-width: 300px">
 			<text>Contact us</text>
-			<a
-				href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=1"
-				aria-label="Contact Us"
-			>
-				<path
-					d="m212.0806 68.0717c-10.3917 10.3852-22.4311 20.3239-27.1905 15.5646-6.8075-6.8075-11.0088-12.7418-26.0285-.6696-15.0132 12.0657-3.4792 20.1139 3.1182 26.7047 7.6149 7.6149 36.0001.407 64.0571-27.6434 28.0504-28.057 35.2386-56.4422 27.6172-64.0571-6.5974-6.604-14.6062-18.1314-26.6719-3.1182-12.0723 15.0132-6.1444 19.2145.6761 26.0285 4.7397 4.7593-5.1925 16.7988-15.5777 27.1905z"
-				/>
+			<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=1" aria-label="Contact Us" style="scale: 0.2">
+				<path d="m212.0806 68.0717c-10.3917 10.3852-22.4311 20.3239-27.1905 15.5646-6.8075-6.8075-11.0088-12.7418-26.0285-.6696-15.0132 12.0657-3.4792 20.1139 3.1182 26.7047 7.6149 7.6149 36.0001.407 64.0571-27.6434 28.0504-28.057 35.2386-56.4422 27.6172-64.0571-6.5974-6.604-14.6062-18.1314-26.6719-3.1182-12.0723 15.0132-6.1444 19.2145.6761 26.0285 4.7397 4.7593-5.1925 16.7988-15.5777 27.1905z"/>
 			</a>
-			<a
-				href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=2"
-				aria-label="Contact Us"
-			>
-				<path
-					d="m105 7.5h-90c-8.2576 0-15 6.7497-15 15v52.5c0 8.2498 6.7424 15 15 15h30l30 22.5v-22.5h30c8.2498 0 15-6.7502 15-15v-52.5c0-8.2503-6.7502-15-15-15zm-80.7903 52.5c-6.2132 0-11.255-5.0372-11.255-11.25 0-6.2132 5.0418-11.25 11.255-11.25 6.2128 0 11.245 5.0418 11.245 11.25 0 6.2077-5.0322 11.25-11.245 11.25zm35.7953 0c-6.2128 0-11.255-5.0372-11.255-11.25 0-6.2132 5.0423-11.25 11.255-11.25 6.2132 0 11.245 5.0368 11.245 11.25 0 6.2128-5.0317 11.25-11.245 11.25zm35.7958 0c-6.2132 0-11.2555-5.0372-11.2555-11.25 0-6.2132 5.0423-11.25 11.2555-11.25 6.2128 0 11.2445 5.0368 11.2445 11.25 0 6.2128-5.0318 11.25-11.2445 11.25z"
-				/>
+			<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/contact-us.html?page=2" aria-label="Contact Us" style="scale: 0.2">
+				<path d="m105 7.5h-90c-8.2576 0-15 6.7497-15 15v52.5c0 8.2498 6.7424 15 15 15h30l30 22.5v-22.5h30c8.2498 0 15-6.7502 15-15v-52.5c0-8.2503-6.7502-15-15-15zm-80.7903 52.5c-6.2132 0-11.255-5.0372-11.255-11.25 0-6.2132 5.0418-11.25 11.255-11.25 6.2128 0 11.245 5.0418 11.245 11.25 0 6.2077-5.0322 11.25-11.245 11.25zm35.7953 0c-6.2128 0-11.255-5.0372-11.255-11.25 0-6.2132 5.0423-11.25 11.255-11.25 6.2132 0 11.245 5.0368 11.245 11.25 0 6.2128-5.0317 11.25-11.245 11.25zm35.7958 0c-6.2132 0-11.2555-5.0372-11.2555-11.25 0-6.2132 5.0423-11.25 11.2555-11.25 6.2128 0 11.2445 5.0368 11.2445 11.25 0 6.2128-5.0318 11.25-11.2445 11.25z"/>
 			</a>
 		</svg>
 	</p>
@@ -399,8 +389,8 @@ These two HTML `a` elements with the same [accessible name][] and [context][prog
 	<p>
 		<span style="text-align:center;">Contact us</span>
 		<span style="display:flex; justify-content:space-around;">
-			<img src="/test-assets/shared/chat.png" alt="Chat" style="width:50%;" />
-			<img src="/test-assets/shared/phone.png" alt="Phone" style="width:50%;" />
+			<img src="/test-assets/shared/chat.png" alt="Chat" style="max-width:50px;" />
+			<img src="/test-assets/shared/phone.png" alt="Phone" style="max-width:50px;" />
 		</span>
 		<span style="display:flex; justify-content:space-around;">
 			<a href="/test-assets/links-with-identical-names-serve-equivalent-purpose-b20e66/index.html">Contact Us</a>

_rules/scrollable-element-keyboard-accessible-0ssw9k.md

@@ -39,7 +39,10 @@ This rule applies to any [HTML element][] that has [visible][] [children][] in t
 
 ## Expectation
 
-Each test target is either included in [sequential focus navigation][] or has a [descendant][] in the [flat tree][] that is included in [sequential focus navigation][].
+For each target element, at least one of the following is true: 
+- the element is included in [sequential focus navigation][]; or 
+- the element has a [descendant][] in the [flat tree][] that is included in [sequential focus navigation][]; or
+- the element is [inert][].
 
 ## Assumptions
 
@@ -108,6 +111,46 @@ This [scrollable][] `section` element contains a link that is included in [seque
 </section>
 ```
 
+#### Passed Example 3
+
+This [scrollable][] `section` element is [inert][] because of the modal dialog, so neither the `section` nor its [descendant][] elements are included in [sequential focus navigation][].
+
+```html
+<style>
+	dialog:-internal-dialog-in-top-layer::backdrop {
+    		background: rgba(1, 1, 1, 0.8);
+	}
+</style>
+<section style="height: 100px; width: 500px; overflow: scroll;" tabindex="0">
+	<h1>WCAG 2.1 Abstract</h1>
+	<p>
+		Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more
+		accessible. Following these guidelines will make content more accessible to a wider range of people with
+		disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement,
+		speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities
+		and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines
+		address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines
+		will also often make Web content more usable to users in general.
+		<button id="ppButton" onclick="openDialog()">Read more about WCAG 2.2</button>
+	</p>
+</section>
+<dialog id="ppDialog" aria-labelledby="dialogLabel">
+	<h2 id="dialogLabel">WCAG 2.2</h2>
+	<p>
+		<a href="https://www.w3.org/TR/WCAG22/">WCAG 2.2</a>
+	</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>
+```
+
 ### Failed
 
 #### Failed Example 1
@@ -262,6 +305,7 @@ This `iframe` element is not a scrollable element, but instead contains a nested
 [sequential focus navigation]: https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation 'HTML sequential focus navigation, 2020/04/03'
 [flat tree]: https://drafts.csswg.org/css-scoping/#flat-tree 'CSS draft, flat tree, 2020/04/03'
 [computed]: https://www.w3.org/TR/css-cascade-3/#computed-value
+[inert]: #inert 'Definition of Inert'
 [overflow]: https://www.w3.org/TR/CSS22/visufx.html#overflow
 [padding]: https://www.w3.org/TR/CSS22/box.html#propdef-padding
 [padding-left]: https://www.w3.org/TR/CSS22/box.html#propdef-padding-left