fix(aria-allowed-role): allow combobox on button, checkbox and combob…

…ox on input[type=button] (#3354) * Update allowed button & input type=button roles closes #3353 - Adds `role=combobox` to the `<button>` element. - Adds `role=combobox` and `role=checkbox` to the `<input type=button>` element. * fix whitespace * add pass ids * `button role=combobox` * `input type=button role=combobox` * `input type=button role=checkbox` * add tests * `button role=combobox` * `input type=button role=combobox` * `input type=button role=checkbox` Co-authored-by: Steven Lambert <steven.lambert@deque.com>
dequelabs · Nov 29, 2022 · ac688c0 · ac688c0
1 parent 228daf1
commit ac688c0
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 0 deletions.
diff --git a/lib/standards/html-elms.js b/lib/standards/html-elms.js
@@ -138,6 +138,7 @@ const htmlElms = {
     contentTypes: ['interactive', 'phrasing', 'flow'],
     allowedRoles: [
       'checkbox',
+      'combobox',
       'link',
       'menuitem',
       'menuitemcheckbox',
@@ -395,6 +396,8 @@ const htmlElms = {
           }
         },
         allowedRoles: [
+          'checkbox',
+          'combobox',
           'link',
           'menuitem',
           'menuitemcheckbox',

diff --git a/test/integration/rules/aria-allowed-role/aria-allowed-role.html b/test/integration/rules/aria-allowed-role/aria-allowed-role.html
@@ -125,6 +125,30 @@ <h1 id="pass-h1-role-doc-subtitle" role="doc-subtitle"></h1>
   aria-expanded="true"
   id="pass-input-tel-role-spinbutton"
 />
+<input
+  aria-autocomplete="list"
+  value="some label"
+  autocomplete="off"
+  role="combobox"
+  type="button"
+  aria-expanded="true"
+  id="pass-input-button-role-combobox"
+/>
+<button
+  aria-autocomplete="list"
+  aria-label="some label"
+  autocomplete="off"
+  role="combobox"
+  type="button"
+  aria-expanded="true"
+  id="pass-button-role-combobox">ok</button>
+<input
+  value="some label"
+  role="checkbox"
+  type="button"
+  aria-checked="true"
+  id="pass-input-button-role-checkbox"
+/>
 <input type="image" role="link" id="pass-input-image-valid-role" />
 <input
   type="checkbox"

diff --git a/test/integration/rules/aria-allowed-role/aria-allowed-role.json b/test/integration/rules/aria-allowed-role/aria-allowed-role.json
@@ -45,6 +45,9 @@
     ["#pass-input-tel-role-spinbutton"],
     ["#pass-input-image-valid-role"],
     ["#pass-input-checkbox-valid-role"],
+    ["#pass-button-role-combobox"],
+    ["#pass-input-button-role-checkbox"],
+    ["#pass-input-button-role-combobox"],
     ["#pass-h1-valid-role"],
     ["#pass-img-valid-role"],
     ["#pass-button-role-radio"],