fix(template-no-redundant-role): lowercase role; add <select>→combobox mapping

johanrd · johanrd · commit 8fc6f6d10f2a · 2026-04-21T07:41:42.000+02:00
Two changes.

1. Compare role tokens case-insensitively. ARIA role values are
   ASCII-case-insensitive (HTML-AAM inherits HTML's attribute-comparison
   semantics). Before: &lt;body role="DOCUMENT"&gt; was not flagged because
   "DOCUMENT" didn't match "document" in ROLE_TO_ELEMENTS.

2. Add 'combobox' → ['select'] mapping. &lt;select&gt; without `multiple` or
   `size &gt; 1` has an implicit role of "combobox" per HTML-AAM §4.1.
   Before: &lt;select role="combobox"&gt; was silently accepted as a redundant
   role.

Two new invalid tests cover the fixes.
diff --git a/lib/rules/template-no-redundant-role.js b/lib/rules/template-no-redundant-role.js
@@ -45,6 +45,9 @@ const ROLE_TO_ELEMENTS = {
   button: ['button'],
   cell: ['td'],
   checkbox: ['input'],
+  // <select> is a combobox by default (per HTML-AAM §4.1 — unless `multiple` or
+  // a `size > 1` is set, in which case it's a listbox; both mappings are listed).
+  combobox: ['select'],
   columnheader: ['th'],
   complementary: ['aside'],
   contentinfo: ['footer'],
@@ -125,7 +128,8 @@ module.exports = {
 
         let roleValue;
         if (roleAttr.value && roleAttr.value.type === 'GlimmerTextNode') {
-          roleValue = roleAttr.value.chars || '';
+          // ARIA role tokens are compared ASCII-case-insensitively.
+          roleValue = (roleAttr.value.chars || '').toLowerCase();
         } else {
           // Skip dynamic role values
           return;
diff --git a/tests/lib/rules/template-no-redundant-role.js b/tests/lib/rules/template-no-redundant-role.js
@@ -243,6 +243,18 @@ hbsRuleTester.run('template-no-redundant-role', rule, {
         '<select name="color" id="color" multiple><option value="default-color">black</option></select>',
       errors: [{ message: 'Use of redundant or invalid role: listbox on <select> detected.' }],
     },
+    {
+      // <select> without `multiple` or `size` defaults to role "combobox".
+      code: '<select role="combobox"></select>',
+      output: '<select></select>',
+      errors: [{ message: 'Use of redundant or invalid role: combobox on <select> detected.' }],
+    },
+    {
+      // Case-insensitive matching — ARIA role tokens compare as ASCII-case-insensitive.
+      code: '<body role="DOCUMENT"></body>',
+      output: '<body></body>',
+      errors: [{ message: 'Use of redundant or invalid role: document on <body> detected.' }],
+    },
     {
       code: '<main role="main"></main>',
       output: '<main></main>',
