fix(template-no-aria-hidden-on-focusable): clarify message and expand test coverage (Copilot review)

- Rephrase noAriaHiddenOnFocusable / noAriaHiddenOnAncestorOfFocusable messages
  to say 'can still receive focus (via Tab navigation or programmatically)'
  rather than 'reachable via Tab' — the latter was inaccurate for tabindex=-1
  and programmatic focus paths.
- Add test cases exercising contenteditable ('', 'true', 'plaintext-only',
  'false') and <area href> / bare <area>. contenteditable='false' and bare
  <area> are asserted as valid; the other contenteditable values and
  <area href> flag.

Author: johanrd

lib/rules/template-no-aria-hidden-on-focusable.js

@@ -191,9 +191,9 @@ module.exports = {
     schema: [],
     messages: {
       noAriaHiddenOnFocusable:
-        'aria-hidden="true" must not be set on focusable elements — it creates a keyboard trap (element reachable via Tab but hidden from assistive tech).',
+        'aria-hidden="true" must not be set on focusable elements — the element can still receive focus (via Tab navigation or programmatically) while remaining hidden from assistive tech.',
       noAriaHiddenOnAncestorOfFocusable:
-        'aria-hidden="true" must not be set on an element that contains focusable descendants — the descendants remain keyboard-reachable but are hidden from assistive tech.',
+        'aria-hidden="true" must not be set on an element that contains focusable descendants — the descendants can still receive focus (via Tab navigation or programmatically) while remaining hidden from assistive tech.',
     },
   },
 

tests/lib/rules/template-no-aria-hidden-on-focusable.js

@@ -45,6 +45,13 @@ ruleTester.run('template-no-aria-hidden-on-focusable', rule, {
     '<template><button disabled aria-hidden="true">Click me</button></template>',
     '<template><input disabled aria-hidden="true" /></template>',
 
+    // contenteditable="false" explicitly disables editing — not focusable on
+    // its own, aria-hidden on it is fine.
+    '<template><div contenteditable="false" aria-hidden="true"></div></template>',
+
+    // <area> without href isn't focusable.
+    '<template><map name="m"><area aria-hidden="true" /></map></template>',
+
     // Components — we don't know if they render a focusable element.
     '<template><CustomBtn aria-hidden="true" /></template>',
 
@@ -105,6 +112,36 @@ ruleTester.run('template-no-aria-hidden-on-focusable', rule, {
       errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
     },
 
+    // contenteditable makes a non-interactive element focusable.
+    // Per HTML spec, "", "true", and "plaintext-only" all enable editing.
+    {
+      code: '<template><div contenteditable aria-hidden="true"></div></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+    {
+      code: '<template><div contenteditable="" aria-hidden="true"></div></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+    {
+      code: '<template><div contenteditable="true" aria-hidden="true"></div></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+    {
+      code: '<template><div contenteditable="plaintext-only" aria-hidden="true"></div></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+
+    // <area href> is a focusable link (HTML §6.6.3 "focusable area").
+    {
+      code: '<template><map name="m"><area href="/x" aria-hidden="true" /></map></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+
     // Focusable descendants nested inside block helpers ({{#if}}, {{#each}},
     // {{#let}}) must be detected — aria-hidden cascades to every possible
     // render path.