fix(template-no-aria-hidden-on-focusable): handle aria-hidden concat form; treat only bare-mustache disabled={{false}} as omitted; doc custom-element caveat; ignoreUsemap test

Author: johanrd

docs/rules/template-no-aria-hidden-on-focusable.md

@@ -55,6 +55,11 @@ check skips these branches to avoid false positives. If a component renders a
 focusable element beneath an `aria-hidden` ancestor, the keyboard trap still
 exists at runtime; this rule can't detect it.
 
+Custom elements (hyphenated tags like `<my-widget>`) are similarly skipped: we
+can't know whether their shadow DOM defines a focusable region. If
+`<my-widget aria-hidden="true">` renders a focusable element internally, the
+trap still exists at runtime — this rule can't detect it.
+
 Dynamic content inside `{{...}}` mustache statements is similarly not inspected.
 
 ## References

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

@@ -27,18 +27,13 @@ function isAriaHiddenTrue(node) {
   if (!value) {
     return false;
   }
-  if (value.type === 'GlimmerTextNode') {
-    return value.chars.trim().toLowerCase() === 'true';
-  }
-  if (value.type === 'GlimmerMustacheStatement' && value.path) {
-    if (value.path.type === 'GlimmerBooleanLiteral') {
-      return value.path.value === true;
-    }
-    if (value.path.type === 'GlimmerStringLiteral') {
-      return value.path.value.trim().toLowerCase() === 'true';
-    }
+  // Resolve through getStaticAttrValue so quoted-mustache concat forms
+  // (e.g. aria-hidden="{{true}}") and case variants normalize uniformly.
+  const resolved = getStaticAttrValue(value);
+  if (typeof resolved !== 'string') {
+    return false;
   }
-  return false;
+  return resolved.trim().toLowerCase() === 'true';
 }
 
 // Tags with an unconditional default focusable UI (sequentially focusable per
@@ -67,7 +62,23 @@ function isDisabledFormControl(node, tag) {
   if (!DISABLEABLE_TAGS.has(tag)) {
     return false;
   }
-  return Boolean(findAttr(node, 'disabled'));
+  const attr = findAttr(node, 'disabled');
+  if (!attr) {
+    return false;
+  }
+  // Per docs/glimmer-attribute-behavior.md, ONLY bare-mustache boolean-false
+  // (`disabled={{false}}`) renders as omitted at runtime — concat
+  // (`disabled="{{false}}"`) and string-literal (`disabled={{"false"}}`) forms
+  // still render the attribute as present and the control IS disabled.
+  const v = attr.value;
+  if (
+    v?.type === 'GlimmerMustacheStatement' &&
+    v.path?.type === 'GlimmerBooleanLiteral' &&
+    v.path.value === false
+  ) {
+    return false;
+  }
+  return true;
 }
 
 // Narrow rule-local "keyboard-focusable" check. Intentionally distinct from

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

@@ -132,6 +132,22 @@ ruleTester.run('template-no-aria-hidden-on-focusable', rule, {
       output: null,
       errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
     },
+    // GlimmerConcatStatement form. Per docs/glimmer-attribute-behavior.md,
+    // `aria-hidden="{{true}}"` renders as `aria-hidden="true"`.
+    {
+      code: '<template><button aria-hidden="{{true}}"></button></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
+    // disabled={{false}} is the bare-mustache boolean-false case — Glimmer
+    // omits the attribute at runtime, so the button stays focusable and
+    // aria-hidden="true" traps it. (`disabled="{{false}}"` and
+    // `disabled={{"false"}}` would NOT omit; those keep the button disabled.)
+    {
+      code: '<template><button aria-hidden="true" disabled={{false}}>click</button></template>',
+      output: null,
+      errors: [{ messageId: 'noAriaHiddenOnFocusable' }],
+    },
     {
       code: '<template><button aria-hidden="TRUE"></button></template>',
       output: null,

tests/lib/utils/html-interactive-content-test.js

@@ -89,6 +89,14 @@ describe('isHtmlInteractiveContent', () => {
     it('is NOT interactive without usemap', () => {
       expect(isHtmlInteractiveContent(makeNode('img'), getTextAttrValue)).toBe(false);
     });
+
+    it('is NOT interactive when usemap is present but { ignoreUsemap: true }', () => {
+      expect(
+        isHtmlInteractiveContent(makeNode('img', { usemap: '#m' }), getTextAttrValue, {
+          ignoreUsemap: true,
+        })
+      ).toBe(false);
+    });
   });
 
   describe('<audio> / <video>', () => {