BUGFIX: template-no-redundant-role — case-insensitive match + <select>→combobox

lib/rules/template-no-redundant-role.js

@@ -1,3 +1,5 @@
+const { roles } = require('aria-query');
+
 const DEFAULT_CONFIG = {
   checkAllHTMLElements: true,
 };
@@ -37,6 +39,41 @@ const ALLOWED_ELEMENT_ROLES = [
   { name: 'input', role: 'combobox' },
 ];
 
+// Per HTML-AAM, <select> maps to "combobox" only when neither `multiple` nor
+// `size > 1` is set; otherwise it maps to "listbox". Mirrors jsx-a11y's
+// src/util/implicitRoles/select.js.
+//
+// Returns 'combobox' / 'listbox' for static cases, or 'unknown' when a
+// dynamic `multiple` or `size` value blocks a decision. Callers should skip
+// flagging on 'unknown' to avoid false positives.
+function getSelectImplicitRole(node) {
+  const attrs = node.attributes || [];
+  const multipleAttr = attrs.find((a) => a.name === 'multiple');
+  if (multipleAttr) {
+    // Valueless `multiple` or static string value — statically present.
+    if (!multipleAttr.value || multipleAttr.value.type === 'GlimmerTextNode') {
+      return 'listbox';
+    }
+    // Dynamic `multiple={{...}}` — Ember omits bound boolean attributes at
+    // runtime when the value is falsy, so we can't tell statically whether
+    // the implicit role is combobox or listbox.
+    return 'unknown';
+  }
+  const sizeAttr = attrs.find((a) => a.name === 'size');
+  if (sizeAttr) {
+    if (!sizeAttr.value || sizeAttr.value.type !== 'GlimmerTextNode') {
+      // Dynamic `size` — can't tell whether implicit role is combobox or
+      // listbox, so bail out instead of risking a false positive.
+      return 'unknown';
+    }
+    const sizeValue = Number(sizeAttr.value.chars);
+    if (Number.isFinite(sizeValue) && sizeValue > 1) {
+      return 'listbox';
+    }
+  }
+  return 'combobox';
+}
+
 // Mapping of roles to their corresponding HTML elements
 // From https://www.w3.org/TR/html-aria/
 const ROLE_TO_ELEMENTS = {
@@ -45,6 +82,10 @@ const ROLE_TO_ELEMENTS = {
   button: ['button'],
   cell: ['td'],
   checkbox: ['input'],
+  // <select> is a combobox by default per HTML-AAM (section 4). When
+  // `multiple` is present or `size > 1`, it maps to "listbox" instead;
+  // that case is handled at the call site via getSelectImplicitRole.
+  combobox: ['select'],
   columnheader: ['th'],
   complementary: ['aside'],
   contentinfo: ['footer'],
@@ -125,7 +166,19 @@ module.exports = {
 
         let roleValue;
         if (roleAttr.value && roleAttr.value.type === 'GlimmerTextNode') {
-          roleValue = roleAttr.value.chars || '';
+          // ARIA role tokens are compared ASCII-case-insensitively, and the
+          // attribute is a space-separated fallback list. Per WAI-ARIA §4.1,
+          // UAs walk tokens for the first role they RECOGNISE — unknown
+          // leading tokens are skipped, subsequent tokens are author-provided
+          // fallbacks. `role="xxyxyz button"` resolves to `button`;
+          // `role="tab button"` resolves to `tab` (recognised first, even
+          // though no implicit mapping — this rule then has nothing to flag).
+          const tokens = (roleAttr.value.chars || '').trim().toLowerCase().split(/\s+/u);
+          const firstRecognised = tokens.find((t) => t && roles.has(t));
+          if (!firstRecognised) {
+            return;
+          }
+          roleValue = firstRecognised;
         } else {
           // Skip dynamic role values
           return;
@@ -138,9 +191,25 @@ module.exports = {
 
         const elementsWithRole = ROLE_TO_ELEMENTS[roleValue];
         if (!elementsWithRole) {
+          // Role is recognised by ARIA but has no implicit-element mapping
+          // in this table — nothing can be redundant.
           return;
         }
 
+        // <select>'s implicit role depends on attributes (HTML-AAM):
+        //   - default (no `multiple`, `size` absent or <= 1) → "combobox"
+        //   - `multiple` or `size` > 1                        → "listbox"
+        // A role attribute is only redundant when it matches the element's
+        // computed implicit role. Guard both combobox and listbox against
+        // the opposite configuration, and bail when `size` is dynamic
+        // ('unknown') rather than risk a false positive.
+        if (node.tag === 'select' && (roleValue === 'combobox' || roleValue === 'listbox')) {
+          const implicit = getSelectImplicitRole(node);
+          if (implicit !== roleValue) {
+            return;
+          }
+        }
+
         const isRedundant =
           elementsWithRole.includes(node.tag) &&
           !ALLOWED_ELEMENT_ROLES.some((e) => e.name === node.tag && e.role === roleValue);

tests/audit/no-redundant-roles/peer-parity.js

@@ -0,0 +1,214 @@
+// Audit fixture — translates peer-plugin test cases into assertions against
+// our rule (`ember/template-no-redundant-role`). Runs as part of the default
+// Vitest suite (via the `tests/**/*.js` include glob) and serves double-duty:
+// (1) auditable record of peer-parity divergences, (2) regression coverage
+// pinning CURRENT behavior. Each case encodes what OUR rule does today;
+// divergences from upstream plugins are annotated as `DIVERGENCE —`.
+// Peer-only constructs that can't be translated to Ember templates (JSX
+// spread props, Vue v-bind, Angular `$event`, undefined-handler expression
+// analysis) are marked `AUDIT-SKIP`.
+//
+// Source files (context/ checkouts):
+//   - eslint-plugin-jsx-a11y-main/src/rules/no-redundant-roles.js
+//   - eslint-plugin-jsx-a11y-main/__tests__/src/rules/no-redundant-roles-test.js
+//   - eslint-plugin-vuejs-accessibility-main/src/rules/no-redundant-roles.ts
+//   - eslint-plugin-lit-a11y/lib/rules/no-redundant-role.js
+
+'use strict';
+
+const rule = require('../../../lib/rules/template-no-redundant-role');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('audit:no-redundant-roles (gts)', rule, {
+  valid: [
+    // === Upstream parity (valid in all plugins + ours) ===
+    // No role attribute.
+    '<template><div></div></template>',
+    // Role differs from implicit.
+    '<template><button role="link"></button></template>',
+    '<template><button role="main"></button></template>',
+    // jsx-a11y/lit-a11y default exception: nav[role="navigation"] is allowed.
+    // Our ALLOWED_ELEMENT_ROLES also permits this.
+    '<template><nav role="navigation"></nav></template>',
+    // form[role="search"] — different from implicit "form" role.
+    '<template><form role="search"></form></template>',
+    // Dynamic role — we skip.
+    '<template><footer role={{this.foo}}></footer></template>',
+
+    // === DIVERGENCE — <ul role="list"> / <ol role="list"> ===
+    // jsx-a11y: INVALID — implicit role of ul/ol is "list".
+    // Our rule: VALID — ALLOWED_ELEMENT_ROLES explicitly permits these.
+    // Rationale (ember-template-lint carry-over): `role="list"` on ul/ol is
+    // a deliberate workaround for Safari/VoiceOver stripping list semantics
+    // when `list-style: none` is applied. This is a well-known pattern.
+    '<template><ul role="list"></ul></template>',
+    '<template><ol role="list"></ol></template>',
+
+    // === DIVERGENCE — <a role="link"> ===
+    // jsx-a11y: INVALID only if <a> has href (implicit role "link" requires href).
+    //   Without href, <a> has no implicit role — so <a role="link"> is VALID.
+    // Our rule: VALID regardless — ALLOWED_ELEMENT_ROLES includes {a, link}.
+    // The user's existing test treats this as valid, so we encode that.
+    '<template><a role="link" aria-disabled="true">valid</a></template>',
+
+    // === DIVERGENCE — <input role="combobox"> ===
+    // jsx-a11y: implicit role depends on `type`. Default <input> (type=text)
+    //   has implicit "textbox". So <input role="combobox"> would be VALID.
+    // Our rule: VALID — ALLOWED_ELEMENT_ROLES includes {input, combobox}.
+    // Parity by coincidence.
+    '<template><input role="combobox" /></template>',
+
+    // === Parity — <select role="combobox"> gated on multiple/size ===
+    // jsx-a11y: INVALID — default <select> has implicit role "combobox".
+    // Our rule: now INVALID for a default <select> (captured in invalid
+    //   section below). Stays VALID when `multiple` or `size > 1` is set —
+    //   those cases give <select> an implicit role of "listbox", so an
+    //   explicit "combobox" is a genuine role override, not a redundancy.
+    '<template><select role="combobox" multiple><option>1</option></select></template>',
+    '<template><select role="combobox" size="5"><option>1</option></select></template>',
+  ],
+
+  invalid: [
+    // === Upstream parity (invalid in jsx-a11y + ours) ===
+    {
+      code: '<template><dialog role="dialog" /></template>',
+      output: '<template><dialog /></template>',
+      errors: [{ message: 'Use of redundant or invalid role: dialog on <dialog> detected.' }],
+    },
+    {
+      code: '<template><button role="button"></button></template>',
+      output: '<template><button></button></template>',
+      errors: [{ message: 'Use of redundant or invalid role: button on <button> detected.' }],
+    },
+    {
+      code: '<template><img role="img" /></template>',
+      output: '<template><img /></template>',
+      errors: [{ message: 'Use of redundant or invalid role: img on <img> detected.' }],
+    },
+    {
+      code: '<template><body role="document"></body></template>',
+      output: '<template><body></body></template>',
+      errors: [{ message: 'Use of redundant or invalid role: document on <body> detected.' }],
+    },
+    // Landmark elements — error message is the "landmark" variant for us.
+    {
+      code: '<template><header role="banner"></header></template>',
+      output: '<template><header></header></template>',
+      errors: [
+        {
+          message:
+            'Use of redundant or invalid role: banner on <header> detected. If a landmark element is used, any role provided will either be redundant or incorrect.',
+        },
+      ],
+    },
+    {
+      code: '<template><main role="main"></main></template>',
+      output: '<template><main></main></template>',
+      errors: [
+        {
+          message:
+            'Use of redundant or invalid role: main on <main> detected. If a landmark element is used, any role provided will either be redundant or incorrect.',
+        },
+      ],
+    },
+    {
+      code: '<template><aside role="complementary"></aside></template>',
+      output: '<template><aside></aside></template>',
+      errors: [
+        {
+          message:
+            'Use of redundant or invalid role: complementary on <aside> detected. If a landmark element is used, any role provided will either be redundant or incorrect.',
+        },
+      ],
+    },
+    {
+      code: '<template><footer role="contentinfo"></footer></template>',
+      output: '<template><footer></footer></template>',
+      errors: [
+        {
+          message:
+            'Use of redundant or invalid role: contentinfo on <footer> detected. If a landmark element is used, any role provided will either be redundant or incorrect.',
+        },
+      ],
+    },
+
+    // === Parity — case-insensitive role comparison ===
+    // jsx-a11y (via getExplicitRole), vuejs-accessibility via aria-query,
+    //   and now our rule all lowercase the role value before lookup.
+    // `<body role="DOCUMENT">` is flagged.
+    {
+      code: '<template><body role="DOCUMENT"></body></template>',
+      output: '<template><body></body></template>',
+      errors: [{ message: 'Use of redundant or invalid role: document on <body> detected.' }],
+    },
+
+    // === Parity — <select role="combobox"> (default <select>) ===
+    // Default <select> (no multiple/size) has implicit role "combobox"
+    //   per HTML-AAM; explicit `role="combobox"` is redundant.
+    {
+      code: '<template><select role="combobox"><option>1</option></select></template>',
+      output: '<template><select><option>1</option></select></template>',
+      errors: [{ message: 'Use of redundant or invalid role: combobox on <select> detected.' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+hbsRuleTester.run('audit:no-redundant-roles (hbs)', rule, {
+  valid: [
+    '<div></div>',
+    '<button role="main"></button>',
+    '<nav role="navigation"></nav>',
+    '<form role="search"></form>',
+    // DIVERGENCE — ul/ol list kept valid by design (see gts section).
+    '<ul role="list"></ul>',
+    '<ol role="list"></ol>',
+    // DIVERGENCE — <a role="link"> kept valid by design.
+    '<a role="link">x</a>',
+    // Parity — <select role="combobox" multiple> stays valid (implicit listbox).
+    '<select role="combobox" multiple><option>1</option></select>',
+  ],
+  invalid: [
+    {
+      code: '<button role="button"></button>',
+      output: '<button></button>',
+      errors: [{ message: 'Use of redundant or invalid role: button on <button> detected.' }],
+    },
+    {
+      code: '<img role="img" />',
+      output: '<img />',
+      errors: [{ message: 'Use of redundant or invalid role: img on <img> detected.' }],
+    },
+    {
+      code: '<main role="main"></main>',
+      output: '<main></main>',
+      errors: [
+        {
+          message:
+            'Use of redundant or invalid role: main on <main> detected. If a landmark element is used, any role provided will either be redundant or incorrect.',
+        },
+      ],
+    },
+    // Parity — case-insensitive comparison (jsx-a11y also flags).
+    {
+      code: '<body role="DOCUMENT"></body>',
+      output: '<body></body>',
+      errors: [{ message: 'Use of redundant or invalid role: document on <body> detected.' }],
+    },
+    // Parity — default <select> implicit role is combobox.
+    {
+      code: '<select role="combobox"><option>1</option></select>',
+      output: '<select><option>1</option></select>',
+      errors: [{ message: 'Use of redundant or invalid role: combobox on <select> detected.' }],
+    },
+  ],
+});