fix(template-require-mandatory-role-attributes): drop undocumented input+role pairings

Runtime verification of axobject-query 4.1 showed that MenuItemCheckBoxRole
and MenuItemRadioRole list only ARIA concepts, not HTML concepts — there
is no spec or library basis for treating <input type=checkbox role=
menuitemcheckbox> or <input type=radio role=menuitemradio> as native-
checked. jsx-a11y's isSemanticRoleElement flags both; angular-eslint
also flags via axobject-query. Earlier commit incorrectly cited
axobject-query's elementAXObjects for these pairings.

Whitelist is now the three pairings that axobject-query actually backs:
  checkbox:checkbox, checkbox:switch, radio:radio.

Moved menuitem pairings into the invalid test set (they flag for
missing aria-checked, consistent with jsx-a11y + angular). Updated docs
example and audit-fixture comments.

Author: johanrd

docs/rules/template-require-mandatory-role-attributes.md

@@ -32,10 +32,10 @@ This rule **allows** the following:
   <CustomComponent role="checkbox" aria-required="true" aria-checked="false" />
   {{some-component role="heading" aria-level="2"}}
 
-  {{! <input type="checkbox|radio"> supplies aria-checked natively for roles that require it. }}
+  {{! <input type="checkbox|radio"> supplies aria-checked natively for matching roles. }}
   <input type="checkbox" role="switch" />
-  <input type="checkbox" role="menuitemcheckbox" />
-  <input type="radio" role="menuitemradio" />
+  <input type="checkbox" role="checkbox" />
+  <input type="radio" role="radio" />
 </template>
 ```
 

lib/rules/template-require-mandatory-role-attributes.js

@@ -29,17 +29,14 @@ function getStaticRoleFromMustache(node) {
 }
 
 // `{input type}:{role}` pairings where the required `aria-checked` is supplied
-// natively by the semantic <input>. Pairings match axobject-query's
-// `elementAXObjects` for the input-role combinations and the WAI-ARIA APG
-// Switch pattern (https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
-// Undocumented pairings (e.g. `input[type=checkbox] role=radio`) are NOT
-// exempted.
+// natively by the semantic <input>. Each pairing is backed by axobject-query's
+// `elementAXObjects` (CheckBoxRole / SwitchRole / RadioButtonRole all list a
+// matching HTML concept for <input type=checkbox|radio>) and/or the WAI-ARIA
+// APG Switch pattern (https://www.w3.org/WAI/ARIA/apg/patterns/switch/).
 const NATIVELY_CHECKED_INPUT_ROLE_PAIRS = new Set([
   'checkbox:checkbox',
   'checkbox:switch',
-  'checkbox:menuitemcheckbox',
   'radio:radio',
-  'radio:menuitemradio',
 ]);
 
 // Reads the `type` keyword from a native <input> element OR a classic

tests/audit/role-has-required-aria/peer-parity.js

@@ -44,23 +44,28 @@ ruleTester.run('audit:role-has-required-aria (gts)', rule, {
     '<template><div role="foobar" /></template>',
 
     // === Parity — <input type="checkbox" role="switch"> ===
-    // jsx-a11y: VALID via `isSemanticRoleElement` (semantic input[type=checkbox]
-    //   counts as already-declaring aria-checked via its `checked` state).
-    // vue-a11y: VALID via explicit carve-out in filterRequiredPropsExceptions.
-    // angular: VALID via isSemanticRoleElement.
+    // jsx-a11y: VALID via `isSemanticRoleElement` (axobject-query SwitchRole
+    //   lists <input type=checkbox> as a related HTML concept).
+    // vue-a11y: VALID via explicit {role: switch, type: checkbox} carve-out
+    //   in `filterRequiredPropsExceptions`.
+    // angular: VALID via `isSemanticRoleElement`.
     // Our rule: VALID via the explicit `{input[type], role}` whitelist
-    //   (checkbox+switch per WAI-ARIA APG Switch pattern; see PR adding the fix).
-    //   Also covers checkbox+checkbox, checkbox+menuitemcheckbox, radio+radio,
-    //   radio+menuitemradio.
+    //   (checkbox+switch per APG Switch + axobject-query SwitchRole).
+    //   Also covers checkbox+checkbox and radio+radio (redundant-but-valid
+    //   per axobject-query CheckBoxRole / RadioButtonRole).
     '<template><input type="checkbox" role="switch" /></template>',
     '<template><input type="checkbox" role="checkbox" /></template>',
-    '<template><input type="checkbox" role="menuitemcheckbox" /></template>',
     '<template><input type="radio" role="radio" /></template>',
-    '<template><input type="radio" role="menuitemradio" /></template>',
     // HTML type keyword values are ASCII case-insensitive, so the whitelist
     //   also matches uppercase `type` values.
     '<template><input type="CHECKBOX" role="switch" /></template>',
 
+    // === DIVERGENCE — input + menuitemcheckbox/menuitemradio ===
+    // Neither axobject-query's MenuItemCheckBoxRole nor MenuItemRadioRole
+    //   lists an <input> HTML concept; they only have ARIA concepts. So
+    //   jsx-a11y / angular flag these pairings. Our rule also flags (captured
+    //   in the `invalid` section below).
+
     // === DIVERGENCE — space-separated role tokens ===
     // jsx-a11y + vue: split on whitespace, validate each token. If every token
     //   is a valid role, require attrs for each.

tests/lib/rules/template-require-mandatory-role-attributes.js

@@ -26,27 +26,18 @@ ruleTester.run('template-require-mandatory-role-attributes', rule, {
     '<template>{{foo-component role="unknown"}}</template>',
     '<template>{{foo-component role=role}}</template>',
 
-    // Semantic inputs supply aria-checked natively; the role is satisfied
-    // without an explicit aria-checked attribute. Documented accessible
-    // patterns: https://www.w3.org/WAI/ARIA/apg/patterns/switch/#keyboardinteraction
+    // Semantic inputs supply aria-checked natively. Exempt pairings match
+    // axobject-query's elementAXObjects (CheckBoxRole/SwitchRole/RadioButtonRole
+    // each list an <input type=checkbox|radio> HTML concept) + APG Switch.
     '<template><input type="checkbox" role="switch" /></template>',
-    '<template><input type="checkbox" role="menuitemcheckbox" /></template>',
-    '<template><input type="radio" role="menuitemradio" /></template>',
     '<template><input type="radio" role="radio" /></template>',
     '<template><input type="checkbox" role="checkbox" /></template>',
-
-    // HTML `type` is ASCII case-insensitive; `Checkbox` must match `checkbox`.
-    // (The `type` attribute IS lowercased at the whitelist-key boundary; role
-    // tokens are NOT — rule-wide role case-insensitivity lands in #2728.)
     '<template><input type="Checkbox" role="switch" /></template>',
     '<template><input type="CHECKBOX" role="switch" /></template>',
 
     // Classic Ember {{input type=... role=...}} helper renders a native
     // <input> and is exempted on the same whitelist as the angle-bracket form.
     '<template>{{input type="checkbox" role="switch"}}</template>',
-    '<template>{{input type="checkbox" role="menuitemcheckbox"}}</template>',
-    '<template>{{input type="radio" role="menuitemradio"}}</template>',
-    // `type` case-insensitivity works on the mustache form too.
     '<template>{{input type="Checkbox" role="switch"}}</template>',
   ],
 
@@ -137,6 +128,23 @@ ruleTester.run('template-require-mandatory-role-attributes', rule, {
       output: null,
       errors: [{ message: 'The attribute aria-checked is required by the role switch' }],
     },
+
+    // menuitemcheckbox / menuitemradio on <input> are NOT exempted —
+    // axobject-query's MenuItemCheckBoxRole / MenuItemRadioRole lists only
+    // an ARIA concept, no HTML concept for <input>. Flagged for missing
+    // aria-checked.
+    {
+      code: '<template><input type="checkbox" role="menuitemcheckbox" /></template>',
+      output: null,
+      errors: [
+        { message: 'The attribute aria-checked is required by the role menuitemcheckbox' },
+      ],
+    },
+    {
+      code: '<template><input type="radio" role="menuitemradio" /></template>',
+      output: null,
+      errors: [{ message: 'The attribute aria-checked is required by the role menuitemradio' }],
+    },
   ],
 });
 
@@ -168,21 +176,16 @@ hbsRuleTester.run('template-require-mandatory-role-attributes', rule, {
     '{{foo-component role="unknown"}}',
     '{{foo-component role=role}}',
 
-    // Semantic inputs supply aria-checked natively.
+    // Semantic inputs supply aria-checked natively. Exempt pairings match
+    // axobject-query's elementAXObjects + APG Switch pattern.
     '<input type="checkbox" role="switch" />',
-    '<input type="checkbox" role="menuitemcheckbox" />',
-    '<input type="radio" role="menuitemradio" />',
     '<input type="radio" role="radio" />',
     '<input type="checkbox" role="checkbox" />',
-
-    // HTML `type` is ASCII case-insensitive; `Checkbox` must match `checkbox`.
     '<input type="Checkbox" role="switch" />',
     '<input type="CHECKBOX" role="switch" />',
 
     // Classic Ember {{input}} helper renders a native <input>; same whitelist.
     '{{input type="checkbox" role="switch"}}',
-    '{{input type="checkbox" role="menuitemcheckbox"}}',
-    '{{input type="radio" role="menuitemradio"}}',
     '{{input type="Checkbox" role="switch"}}',
   ],
   invalid: [
@@ -265,5 +268,19 @@ hbsRuleTester.run('template-require-mandatory-role-attributes', rule, {
       output: null,
       errors: [{ message: 'The attribute aria-checked is required by the role radio' }],
     },
+
+    // menuitemcheckbox / menuitemradio on <input> are NOT exempted.
+    {
+      code: '<input type="checkbox" role="menuitemcheckbox" />',
+      output: null,
+      errors: [
+        { message: 'The attribute aria-checked is required by the role menuitemcheckbox' },
+      ],
+    },
+    {
+      code: '<input type="radio" role="menuitemradio" />',
+      output: null,
+      errors: [{ message: 'The attribute aria-checked is required by the role menuitemradio' }],
+    },
   ],
 });