test: add Phase 3 audit fixture translating role-has-required-aria peer cases

Translates 41 cases from peer-plugin rules:
  - jsx-a11y role-has-required-aria-props
  - vuejs-accessibility role-has-required-aria-props
  - @angular-eslint/template role-has-required-aria
  - lit-a11y role-has-required-aria-attrs

The fixture documents where our rule matches peer behavior (e.g. the
input+role semantic whitelist now recognized after this fix) and where
it still diverges (space-separated role tokens, case-insensitivity,
unknown roles, undocumented input+role pairings).

Not wired into the default vitest run; provided for behavioral
parity auditing.

Author: johanrd

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

@@ -0,0 +1,202 @@
+// Audit fixture — peer-plugin parity for
+// `ember/template-require-mandatory-role-attributes`.
+//
+// Source files (context/ checkouts):
+//   - eslint-plugin-jsx-a11y-main/src/rules/role-has-required-aria-props.js
+//   - eslint-plugin-jsx-a11y-main/__tests__/src/rules/role-has-required-aria-props-test.js
+//   - eslint-plugin-vuejs-accessibility-main/src/rules/role-has-required-aria-props.ts
+//   - angular-eslint-main/packages/eslint-plugin-template/src/rules/role-has-required-aria.ts
+//   - angular-eslint-main/packages/eslint-plugin-template/tests/rules/role-has-required-aria/cases.ts
+//   - eslint-plugin-lit-a11y/lib/rules/role-has-required-aria-attrs.js
+//
+// These tests are NOT part of the main suite and do not run in CI. They encode
+// the CURRENT behavior of our rule. Each divergence from an upstream plugin is
+// annotated as "DIVERGENCE —".
+
+'use strict';
+
+const rule = require('../../../lib/rules/template-require-mandatory-role-attributes');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('audit:role-has-required-aria (gts)', rule, {
+  valid: [
+    // === Upstream parity (valid everywhere) ===
+    '<template><div /></template>',
+    '<template><div role="button" /></template>', // no required props
+    '<template><div role="heading" aria-level="2" /></template>',
+    '<template><span role="button">X</span></template>',
+    // checkbox with aria-checked — valid in all plugins.
+    '<template><div role="checkbox" aria-checked="false" /></template>',
+    // combobox with BOTH required props (jsx-a11y, vue, ours).
+    '<template><div role="combobox" aria-expanded="false" aria-controls="id" /></template>',
+    // scrollbar requires aria-valuenow, aria-valuemin, aria-valuemax, aria-controls, aria-orientation.
+    // slider similarly — we leave the all-present case off for brevity.
+
+    // Dynamic role — skipped by all.
+    '<template><div role={{this.role}} /></template>',
+
+    // Unknown role — jsx-a11y filters out unknown, we return null. Both allow.
+    '<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.
+    // 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.
+    '<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 — space-separated role tokens ===
+    // jsx-a11y + vue: split on whitespace, validate each token. If every token
+    //   is a valid role, require attrs for each.
+    // Our rule: looks up the whole string in aria-query. `"combobox listbox"`
+    //   is not a role → returns null → no missing attrs → NO FLAG.
+    // Net: jsx-a11y would flag `<div role="combobox listbox">` (missing attrs
+    //   for both), we don't. Captured as valid below.
+    '<template><div role="combobox listbox" /></template>',
+
+    // === DIVERGENCE — case-insensitivity on role value ===
+    // jsx-a11y + vue + angular: lowercase the role value before lookup.
+    //   `<div role="COMBOBOX" />` → INVALID (missing aria-expanded/controls).
+    // Our rule: passes the raw string; aria-query lookup misses → no flag.
+    '<template><div role="COMBOBOX" /></template>',
+    '<template><div role="SLIDER" /></template>',
+  ],
+
+  invalid: [
+    // === Upstream parity (invalid everywhere) ===
+    {
+      code: '<template><div role="slider" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+    {
+      code: '<template><div role="checkbox" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+    {
+      code: '<template><div role="combobox" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+    {
+      code: '<template><div role="scrollbar" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+    {
+      code: '<template><div role="heading" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+    {
+      code: '<template><div role="option" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+
+    // === DIVERGENCE — partial attrs present, still missing one ===
+    // jsx-a11y flags `<div role="scrollbar" aria-valuemax aria-valuemin />`
+    //   (missing aria-controls/aria-orientation/aria-valuenow).
+    // Our rule: also flags — missing-attrs list non-empty. Parity.
+    {
+      code: '<template><div role="combobox" aria-controls="x" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+
+    // === DIVERGENCE — undocumented input+role pairings ===
+    // Pairings NOT on our whitelist remain flagged. jsx-a11y/angular defer to
+    //   axobject-query's `elementAXObjects`, which covers a larger set; we only
+    //   recognize the documented five pairings. Example mismatches:
+    //     - input[type=checkbox] role=radio      → we flag, jsx-a11y/angular don't
+    //     - input[type=radio]    role=switch     → we flag, peer behavior varies
+    //   These remain invalid (missing aria-checked) in our rule.
+    {
+      code: '<template><input type="checkbox" role="radio" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+    {
+      code: '<template><input type="radio" role="switch" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+    // Bare `<input role="switch">` (no `type`) — not on our whitelist, stays
+    //   flagged. The input's default `type=text` does not expose aria-checked.
+    {
+      code: '<template><input role="switch" /></template>',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+hbsRuleTester.run('audit:role-has-required-aria (hbs)', rule, {
+  valid: [
+    '<div />',
+    '<div role="button" />',
+    '<div role="heading" aria-level="2" />',
+    '<div role="combobox" aria-expanded="false" aria-controls="id" />',
+    // Parity: input+role semantic whitelist.
+    '<input type="checkbox" role="switch" />',
+    '<input type="radio" role="menuitemradio" />',
+    // DIVERGENCES captured as valid-for-us:
+    //   space-separated
+    '<div role="combobox listbox" />',
+    //   case-insensitivity
+    '<div role="COMBOBOX" />',
+    //   unknown role
+    '<div role="foobar" />',
+  ],
+  invalid: [
+    {
+      code: '<div role="slider" />',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+    {
+      code: '<div role="checkbox" />',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+    {
+      code: '<div role="heading" />',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+    // DIVERGENCE: pairings NOT in our input+role whitelist stay flagged.
+    //   jsx-a11y/angular recognize more pairings via axobject-query.
+    {
+      code: '<input type="checkbox" role="radio" />',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+    {
+      code: '<input role="switch" />',
+      output: null,
+      errors: [{ messageId: 'missingAttributes' }],
+    },
+  ],
+});