test: add Phase 3 audit fixture for no-role-presentation-on-focusable

Author: johanrd

tests/audit/no-role-presentation-on-focusable/peer-parity.js

@@ -0,0 +1,200 @@
+// Audit fixture — translated test cases from peer plugins to measure
+// behavioral parity of `ember/template-no-role-presentation-on-focusable`
+// against vuejs-accessibility/no-role-presentation-on-focusable.
+//
+// These tests are NOT part of the main suite and do not run in CI. They encode
+// the CURRENT behavior of our rule so that running this file reports pass.
+// Each divergence from an upstream plugin is annotated as "DIVERGENCE —".
+//
+// Only vuejs-accessibility carries this rule among surveyed peer a11y plugins.
+//
+// Source file:
+//   - context/eslint-plugin-vuejs-accessibility-main/src/rules/__tests__/no-role-presentation-on-focusable.test.ts
+
+'use strict';
+
+const rule = require('../../../lib/rules/template-no-role-presentation-on-focusable');
+const RuleTester = require('eslint').RuleTester;
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+ruleTester.run('audit:no-role-presentation-on-focusable (gts)', rule, {
+  valid: [
+    // === Upstream parity (valid in both vue-a11y and us) ===
+    // No role at all on focusable element — both skip.
+    '<template><button>Submit</button></template>',
+    // Nested focusable without role — both skip.
+    '<template><div><button>Submit</button></div></template>',
+    // `a` with tabindex='-1' but no role — both skip.
+    '<template><a href="#" tabindex="-1">link</a></template>',
+
+    // Non-focusable container with role="presentation" wrapping a focusable
+    // child that is itself defocused via tabindex='-1'. Vue: valid (its
+    // hasFocusableElements recurses, but finds no focusable descendant because
+    // the child's tabindex='-1' short-circuits). Ours: valid for the outer div
+    // (div isn't focusable itself) AND for the inner button (no role on it).
+    // Happens to match vue — but note the mechanisms differ:
+    //  - Vue's rule checks element + descendants.
+    //  - Our rule checks only the element bearing the role.
+    '<template><div role="presentation"><button tabindex="-1">Some text</button></div></template>',
+
+    // Same pattern with an `a` child that is defocused via tabindex='-1'.
+    '<template><div role="presentation"><a href="#" tabindex="-1">Link</a></div></template>',
+  ],
+
+  invalid: [
+    // === Upstream parity (invalid in both vue-a11y and us) ===
+    // <button> is inherently focusable — both flag.
+    {
+      code: '<template><button type="button" role="presentation">Submit</button></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+    // <a href> is inherently focusable — both flag.
+    {
+      code: '<template><a href="#" role="presentation">Link</a></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+    // <span tabindex="0"> is focusable via tabindex — both flag.
+    {
+      code: '<template><span tabindex="0" role="presentation"><em>Icon</em></span></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+
+    // === INTENTIONAL DIVERGENCE — tabindex="-1" on inherently-focusable ===
+    // Vue: VALID — `<button tabindex='-1' role='presentation'>Press</button>`.
+    //   Vue's hasFocusableElements treats an interactive element with
+    //   tabindex='-1' as non-focusable.
+    // Our rule: INVALID — a `<button>` with `tabindex='-1'` is still
+    //   programmatically focusable (focus() / sequential-focus-exclusion only
+    //   removes it from tab order). The element can still receive focus, at
+    //   which point it's announced by AT. Flagging is intentional.
+    //   Same tabindex stance taken by `template-no-aria-hidden-on-focusable`
+    //   (#19) — see PR #22 body for rationale.
+    {
+      code: '<template><button tabindex="-1" role="presentation">Press</button></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+  ],
+});
+
+// === INTENTIONAL DIVERGENCE — scope: element-only vs. element + descendants ===
+// Vue's rule flags a non-focusable container with role="presentation" when any
+// DESCENDANT is focusable:
+//   <div role='presentation'><button>Submit</button></div>      → vue: INVALID
+// Our rule only inspects the element bearing the role. A non-focusable wrapper
+// is left alone; the authoring error vue targets (stripping semantics from
+// a container whose children remain focusable) is not detected by us.
+//
+// This is a known gap, not a bug fix waiting to happen:
+//  - The WAI-ARIA §4.6 conflict-resolution text is phrased for elements with
+//    role=presentation that are themselves focusable. Applying it to ancestors
+//    is vue's interpretation, not a spec mandate.
+//  - Our rule is narrower and has fewer false positives, at the cost of this
+//    true positive.
+// Captured here as a "valid" bucket for OUR rule to make the divergence
+// explicit in the audit output.
+ruleTester.run('audit:no-role-presentation-on-focusable — wrapper scope (gts)', rule, {
+  valid: [
+    // Vue: INVALID (outer div flagged because descendant <button> is focusable).
+    // Ours: VALID (div isn't itself focusable; we don't descend).
+    '<template><div role="presentation"><button>Submit</button></div></template>',
+    // Same shape with <a href>.
+    '<template><div role="presentation"><a href="#">Link</a></div></template>',
+    // Same shape with tabindex on a descendant.
+    '<template><div role="presentation"><span tabindex="0">Focusable</span></div></template>',
+  ],
+  invalid: [],
+});
+
+// === INTENTIONAL EXTENSION — role="none" treated identically to "presentation" ===
+// Vue's test suite exercises only role="presentation". Per WAI-ARIA 1.2,
+// role="none" is a synonym introduced to avoid the misleading "presentation"
+// name. Our rule flags both. No conflict with vue — vue simply doesn't test
+// "none" — but captured here so the extension is visible in the audit.
+ruleTester.run('audit:no-role-presentation-on-focusable — role="none" extension (gts)', rule, {
+  valid: [
+    // Non-focusable element with role="none" — fine.
+    '<template><div role="none"></div></template>',
+  ],
+  invalid: [
+    // Inherently focusable element with role="none" — we flag.
+    {
+      code: '<template><button role="none">Click</button></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+    // <a href> with role="none" — we flag.
+    {
+      code: '<template><a href="/x" role="none">Link</a></template>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+  ],
+});
+
+const hbsRuleTester = new RuleTester({
+  parser: require.resolve('ember-eslint-parser/hbs'),
+  parserOptions: { ecmaVersion: 2022, sourceType: 'module' },
+});
+
+hbsRuleTester.run('audit:no-role-presentation-on-focusable (hbs)', rule, {
+  valid: [
+    // Upstream parity — no role.
+    '<button>Submit</button>',
+    '<div><button>Submit</button></div>',
+    '<a href="#" tabindex="-1">link</a>',
+    // Upstream parity — wrapper whose descendants are all defocused.
+    '<div role="presentation"><button tabindex="-1">Some text</button></div>',
+    '<div role="presentation"><a href="#" tabindex="-1">Link</a></div>',
+
+    // DIVERGENCE (wrapper scope) — captured as valid for us; vue flags.
+    '<div role="presentation"><button>Submit</button></div>',
+    '<div role="presentation"><a href="#">Link</a></div>',
+
+    // EXTENSION — role="none" on non-focusable element is fine for us.
+    '<div role="none"></div>',
+  ],
+  invalid: [
+    // Upstream parity — both flag.
+    {
+      code: '<button type="button" role="presentation">Submit</button>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+    {
+      code: '<a href="#" role="presentation">Link</a>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+    {
+      code: '<span tabindex="0" role="presentation"><em>Icon</em></span>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+
+    // INTENTIONAL DIVERGENCE — tabindex="-1" on button. Vue: valid. Ours: flag.
+    {
+      code: '<button tabindex="-1" role="presentation">Press</button>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+
+    // INTENTIONAL EXTENSION — role="none" treated as presentation.
+    {
+      code: '<button role="none">Click</button>',
+      output: null,
+      errors: [{ messageId: 'invalidPresentation' }],
+    },
+  ],
+});
+
+// AUDIT-SKIP — none.
+// All vue-a11y test cases from no-role-presentation-on-focusable.test.ts are
+// represented above (6 valid + 4 invalid in the source file).