Merge pull request #719 from IBMa/epic666-input-haspopup-invalid-help

Epic666 input haspopup invalid help
IBMa · Mar 2, 2022 · 7cbdd52 · 7cbdd52
2 parents 2d1beaf + 4781bbe
commit 7cbdd52
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 68 deletions.
diff --git a/accessibility-checker-engine/help/input_haspopup_invalid.mdx b/accessibility-checker-engine/help/input_haspopup_invalid.mdx
@@ -1,5 +1,5 @@
 ---
-title: "Accessibility Checker Rule Help: input_haspopup_invalid"
+title: "input_haspopup_invalid: Accessibility Checker Rule Help"
 ---
 import "../../../styles/ToolHelp.scss"
 import { CodeSnippet, Tag } from "carbon-components-react";
@@ -8,11 +8,11 @@ import { CodeSnippet, Tag } from "carbon-components-react";
 <Row>
 <Column colLg={16} colMd={8} colSm={4} className="toolHead">
 
-### A focusable element should not be within the subtree of an element with `aria-hidden` set to `"true"` 
+### An `<input>` element with `list` attribute also uses `aria-haspopup` attribute
 
 <div id="locLevel"></div>
 
-Element with `aria-hidden="true"` should not have focusable content
+The `<input>` element with a `list` attribute **_should not_** also use a `aria-haspopup` attribute
 
 </Column>
 </Row>
@@ -21,51 +21,41 @@ Element with `aria-hidden="true"` should not have focusable content
 
 ### Why is this important?
 
-Using either `role="presentation"` or `aria-hidden="true"` on a focusable element will result in some users focusing on "nothing".
-A focusable element with `aria-hidden="true"` is ignored as part of the reading order, 
-but still part of the focus order, 
-making its state of visible or hidden unclear.
-This rule checks that elements with an `aria-hidden` attribute do not contain focusable elements.
+* Input types of 
+[text](https://html.spec.whatwg.org/multipage/input.html#text-%28type=text%29-state-and-search-state-%28type=search%29), [search](https://html.spec.whatwg.org/multipage/input.html#text-%28type=text%29-state-and-search-state-%28type=search%29), [tel](https://html.spec.whatwg.org/multipage/input.html#telephone-state-%28type=tel%29), [url](https://html.spec.whatwg.org/multipage/input.html#url-state-%28type=url%29), and [email](https://html.spec.whatwg.org/multipage/input.html#e-mail-state-%28type=email%29) 
+(or inputs with a missing or invalid type) that also have a [list](https://html.spec.whatwg.org/multipage/input.html#attr-input-list) attribute have an implicit role of combobox, which in turn has an implicit `aria-haspopup="listbox"`;
+therefore, developers should not explicitly assign the `aria-haspopup` attribute, which will be either redundant or possibly conflicting.
+When HTML elements use both `aria-*` attributes and their HTML implied equivalents, browsers **_must_** ignore the explicit (redundant or conflicting) ARIA attribute – the native HTML attribute with their [implied ARIA semantics](https://www.w3.org/TR/wai-aria-1.1/#implicit_semantics) take precedence.
+
+* To ensure that Assistive Technologies (AT) can gather information, proper coding is required so that the end users can understand and interact with the content.
+If standard HTML controls are created according to specification, the conditions of this provision will be met.
+For this reason, to avoid unintended consequences, developers **_should not_** specify both the native HTML attribute and an equivalent (redundant or conflicting) `aria-haspopup` attribute on the indicated inputs with a `list` attribute.
+Otherwise, any global `aria-*` attributes and any other `aria-*` attributes applicable to the combobox role **_may_** be used.
 
 <div id="locSnippet"></div>
 
 ### What to do
 
-When designers and developers want to hide parts of a web page that are pure decoration, 
-such as icon fonts - that are not meant to be read by assistive technologies:
-
-* ensure that assistive technologies will ignore the element by adding `aria-hidden="true"` to the element
-* enure none of the target elements are part of sequential focus navigation
-* ensure no descendants are part of sequential focus navigation 
-
-### Example
-
-* In the following example, the `button` element is focusable by default. 
-Therefore, using `aria-hidden="true"` violates the rule: 
-<CodeSnippet type="multi" light={true}>
-        &lt;div aria-hidden="true"&gt;
-            &lt;div aria-hidden="false"&gt;
-                &lt;button&gt;Some button&lt;/button&gt;
-            &lt;/div&gt;
-        &lt;/div&gt;
-</CodeSnippet>
-
-Note: Using `aria-hidden="false"` on a descendant of an element with `aria-hidden="true"` does not expose that element.
-Using `aria-hidden="true"` hides itself and all its content from assistive technologies.
+* Remove the `aria-haspopup` attribute from the `<input>` element that has a `list` attribute with input `type=` 
+[text](https://html.spec.whatwg.org/multipage/input.html#text-%28type=text%29-state-and-search-state-%28type=search%29), [search](https://html.spec.whatwg.org/multipage/input.html#text-%28type=text%29-state-and-search-state-%28type=search%29), [tel](https://html.spec.whatwg.org/multipage/input.html#telephone-state-%28type=tel%29), [url](https://html.spec.whatwg.org/multipage/input.html#url-state-%28type=url%29), or [email](https://html.spec.whatwg.org/multipage/input.html#e-mail-state-%28type=email%29).
+* **And/Or**, add an input type if missing or correct the invalid input type.
 
 </Column>
 <Column colLg={5} colMd={3} colSm={4} className="toolLeft">
 
 ### About this requirement
 
-* [IBM 1.3.1 Info and Relationships](https://www.ibm.com/able/requirements/requirements/#1_3_1)
 * [IBM 4.1.2 Name, Role, Value](https://www.ibm.com/able/requirements/requirements/#4_1_2)
-* [Fourth Rule of ARIA Use](https://www.w3.org/TR/using-aria/#fourth)
-* [ACT rule: Element with aria-hidden has no focusable content](https://act-rules.github.io/rules/6cfa84)
+* [ARIA in HTML specification](https://www.w3.org/TR/html-aria/#el-input-text-list)
+* [WCAG technique ARIA5](https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA5)
+* [WCAG technique G108](https://www.w3.org/WAI/WCAG21/Techniques/general/G108)
 
 ### Who does this affect?
 
 * People using a screen reader, including blind, low vision and neurodivergent people
+* People with low vision using screen magnification
+* People with dexterity impairment using voice control
+* People who physically cannot use a pointing device
 
 </Column>
 </Row>

diff --git a/accessibility-checker-engine/src/v2/checker/accessibility/help/index.ts b/accessibility-checker-engine/src/v2/checker/accessibility/help/index.ts
@@ -1033,8 +1033,8 @@ let a11yHelp = {
     "input_haspopup_invalid":{
         0: `${Config.helpRoot}/`,
         "Pass": `${Config.helpRoot}/input_haspopup_invalid`,
-        "Failure_1": `${Config.helpRoot}/input_haspopup_invalid`,
-        "Failure_2": `${Config.helpRoot}/input_haspopup_invalid`
+        "Potential_1": `${Config.helpRoot}/input_haspopup_invalid`,
+        "Potential_2": `${Config.helpRoot}/input_haspopup_invalid`
     },
     // JCH - DONE
     "WCAG21_Style_Viewport": {

diff --git a/accessibility-checker-engine/src/v2/checker/accessibility/nls/index.ts b/accessibility-checker-engine/src/v2/checker/accessibility/nls/index.ts
@@ -1023,10 +1023,10 @@ let a11yNls = {
         "Fail_inline": "The combobox does not support an 'aria-autocomplete' attribute value set to '\"inline\"' "
     },
     "input_haspopup_invalid": {
-        0: "<input> element with list attribute should not use aria-haspopup attribute on indicated inputs",
-        "Pass_0": "<input> element with list attribute does not use aria-haspopup attribute on indicated inputs",
-        "Failure_1": "<input> element with list attribute uses aria-haspopup attribute on type=\"{0}\"",
-        "Failure_2": "<input> element with list attribute uses aria-haspopup attribute on missing or invalid input type"
+        0: "<input> element with 'list' attribute should not also use 'aria-haspopup' attribute",
+        "Pass_0": "<input> element with 'list' attribute does not use 'aria-haspopup' attribute",
+        "Potential_1": "<input> element with 'list' attribute also uses 'aria-haspopup' attribute with type=\"{0}\"",
+        "Potential_2": "<input> element with 'list' attribute also uses 'aria-haspopup' attribute with missing or invalid input type"
     },
     // JCH - DONE
     "WCAG21_Style_Viewport": {

diff --git a/accessibility-checker-engine/src/v2/checker/accessibility/rules/rpt-combobox-rules.ts b/accessibility-checker-engine/src/v2/checker/accessibility/rules/rpt-combobox-rules.ts
@@ -375,7 +375,7 @@ let a11yRulesCombobox: Rule[] = [
             let attrValue = ruleContext.getAttribute("type"); 
             //missing input type
             if (!attrValue)    
-                return RuleFail("Failure_2");
+                return RulePotential("Potential_2");
 
             attrValue = attrValue.toLowerCase();  
             // ignore for no triggering input types 
@@ -384,10 +384,10 @@ let a11yRulesCombobox: Rule[] = [
 
             // failure_1 if any triggering input types    
             if (yesTypes.includes(attrValue))
-                return RuleFail("Failure_1", [attrValue]); 
+                return RulePotential("Potential_1", [attrValue]); 
 
             //invalid input type
-            return RuleFail("Failure_2");  
+            return RulePotential("Potential_2");  
 
         }
     }

diff --git a/accessibility-checker-engine/src/v2/checker/accessibility/rulesets/index.ts b/accessibility-checker-engine/src/v2/checker/accessibility/rulesets/index.ts
@@ -1110,6 +1110,11 @@ let a11yRulesets: Ruleset[] = [
             "wcagLevel": "A",
             "summary": "For all user interface components (including, but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.",
             "rules": [
+                {
+                    id: "input_haspopup_invalid",
+                    level: eRulePolicy.VIOLATION,
+                    toolkitLevel: eToolkitLevel.LEVEL_ONE
+                },
                 {
                     id: "WCAG20_Input_ExplicitLabel",
                     level: eRulePolicy.VIOLATION,
@@ -1245,11 +1250,6 @@ let a11yRulesets: Ruleset[] = [
                     level: eRulePolicy.VIOLATION,
                     toolkitLevel: eToolkitLevel.LEVEL_ONE
                 },
-                {
-                    id: "input_haspopup_invalid",
-                    level: eRulePolicy.VIOLATION,
-                    toolkitLevel: eToolkitLevel.LEVEL_ONE
-                },
                 {
                     id: "aria_hidden_focus_misuse",
                     level: eRulePolicy.VIOLATION,
@@ -2320,6 +2320,11 @@ let a11yRulesets: Ruleset[] = [
             "wcagLevel": "A",
             "summary": "For all user interface components (including, but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.",
             "rules": [
+                {
+                    id: "input_haspopup_invalid",
+                    level: eRulePolicy.VIOLATION,
+                    toolkitLevel: eToolkitLevel.LEVEL_ONE
+                },
                 {
                     id: "WCAG20_Input_ExplicitLabel",
                     level: eRulePolicy.VIOLATION,
@@ -3432,6 +3437,11 @@ let a11yRulesets: Ruleset[] = [
             "wcagLevel": "A",
             "summary": "For all user interface components (including, but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.",
             "rules": [
+                {
+                    id: "input_haspopup_invalid",
+                    level: eRulePolicy.VIOLATION,
+                    toolkitLevel: eToolkitLevel.LEVEL_ONE
+                },
                 {
                     id: "WCAG20_Input_ExplicitLabel",
                     level: eRulePolicy.VIOLATION,

diff --git a/...ngine/test/v2/checker/accessibility/rules/input_haspopup_invalid_ruleunit/input_list.html b/...ngine/test/v2/checker/accessibility/rules/input_haspopup_invalid_ruleunit/input_list.html
@@ -59,19 +59,19 @@
     <script>
         UnitTest = {
             ruleIds: ["input_haspopup_invalid"],
-            results: [
-            {
+            results: [  
+          {
             "ruleId": "input_haspopup_invalid",
             "value": [
               "INFORMATION",
-              "FAIL"
+              "POTENTIAL"
             ],
             "path": {
               "dom": "/html[1]/body[1]/main[1]/input[1]",
               "aria": "/document[1]/main[1]/combobox[1]"
             },
-            "reasonId": "Failure_2",
-            "message": "<input> element with list attribute uses aria-haspopup attribute on missing or invalid input type",
+            "reasonId": "Potential_2",
+            "message": "<input> element with 'list' attribute also uses 'aria-haspopup' attribute with missing or invalid input type",
             "messageArgs": [],
             "apiArgs": [],
             "category": "Accessibility"
@@ -80,14 +80,14 @@
             "ruleId": "input_haspopup_invalid",
             "value": [
               "INFORMATION",
-              "FAIL"
+              "POTENTIAL"
             ],
             "path": {
               "dom": "/html[1]/body[1]/main[1]/input[2]",
               "aria": "/document[1]/main[1]/combobox[2]"
             },
-            "reasonId": "Failure_1",
-            "message": "<input> element with list attribute uses aria-haspopup attribute on type=\"text\"",
+            "reasonId": "Potential_1",
+            "message": "<input> element with 'list' attribute also uses 'aria-haspopup' attribute with type=\"text\"",
             "messageArgs": [
               "text"
             ],
@@ -99,4 +99,4 @@
     </script>
 </body>
 
-</html>
+</html>
diff --git a/...gine/test/v2/checker/accessibility/rules/input_haspopup_invalid_ruleunit/input_list2.html b/...gine/test/v2/checker/accessibility/rules/input_haspopup_invalid_ruleunit/input_list2.html
@@ -65,14 +65,14 @@
             "ruleId": "input_haspopup_invalid",
             "value": [
               "INFORMATION",
-              "FAIL"
+              "POTENTIAL"
             ],
             "path": {
               "dom": "/html[1]/body[1]/main[1]/input[1]",
               "aria": "/document[1]/main[1]/combobox[1]"
             },
-            "reasonId": "Failure_1",
-            "message": "<input> element with list attribute uses aria-haspopup attribute on type=\"search\"",
+            "reasonId": "Potential_1",
+            "message": "<input> element with 'list' attribute also uses 'aria-haspopup' attribute with type=\"search\"",
             "messageArgs": [
               "search"
             ],
@@ -83,14 +83,14 @@
             "ruleId": "input_haspopup_invalid",
             "value": [
               "INFORMATION",
-              "FAIL"
+              "POTENTIAL"
             ],
             "path": {
               "dom": "/html[1]/body[1]/main[1]/input[2]",
               "aria": "/document[1]/main[1]/combobox[2]"
             },
-            "reasonId": "Failure_1",
-            "message": "<input> element with list attribute uses aria-haspopup attribute on type=\"email\"",
+            "reasonId": "Potential_1",
+            "message": "<input> element with 'list' attribute also uses 'aria-haspopup' attribute with type=\"email\"",
             "messageArgs": [
               "email"
             ],
@@ -101,14 +101,14 @@
             "ruleId": "input_haspopup_invalid",
             "value": [
               "INFORMATION",
-              "FAIL"
+              "POTENTIAL"
             ],
             "path": {
               "dom": "/html[1]/body[1]/main[1]/input[3]",
               "aria": "/document[1]/main[1]/combobox[3]"
             },
-            "reasonId": "Failure_1",
-            "message": "<input> element with list attribute uses aria-haspopup attribute on type=\"tel\"",
+            "reasonId": "Potential_1",
+            "message": "<input> element with 'list' attribute also uses 'aria-haspopup' attribute with type=\"tel\"",
             "messageArgs": [
               "tel"
             ],
@@ -119,14 +119,14 @@
             "ruleId": "input_haspopup_invalid",
             "value": [
               "INFORMATION",
-              "FAIL"
+              "POTENTIAL"
             ],
             "path": {
               "dom": "/html[1]/body[1]/main[1]/input[4]",
               "aria": "/document[1]/main[1]"
             },
-            "reasonId": "Failure_2",
-            "message": "<input> element with list attribute uses aria-haspopup attribute on missing or invalid input type",
+            "reasonId": "Potential_2",
+            "message": "<input> element with 'list' attribute also uses 'aria-haspopup' attribute with missing or invalid input type",
             "messageArgs": [],
             "apiArgs": [],
             "category": "Accessibility"
@@ -136,4 +136,4 @@
     </script>
 </body>
 
-</html>
+</html>