feat: add template-interactive-supports-focus#36
Open
Conversation
🏎️ Benchmark Comparison
Full mitata output |
13 tasks
There was a problem hiding this comment.
Pull request overview
Adds a new opt-in accessibility rule, template-interactive-supports-focus, to flag template elements that declare an interactive ARIA role but aren’t focusable.
Changes:
- Implement
template-interactive-supports-focusrule usingaria-queryrole taxonomy + focusability heuristics. - Add comprehensive RuleTester coverage for both strict (
<template>) and loose (.hbs) template modes. - Document the rule and add it to the README rules table.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
lib/rules/template-interactive-supports-focus.js |
New rule implementation for interactive-role focusability enforcement. |
tests/lib/rules/template-interactive-supports-focus.js |
New test suite validating rule behavior in gjs/gts and hbs parsing modes. |
docs/rules/template-interactive-supports-focus.md |
New rule documentation, including rationale and peer-plugin divergence notes. |
README.md |
Adds the rule to the published rules list. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
johanrd
force-pushed
the
feat/template-interactive-supports-focus
branch
from
a474bbb to
9782bc3
Compare
johanrd
force-pushed
the
feat/template-interactive-supports-focus
branch
from
79e0d33 to
d924e2a
Compare
…pt-in requireExplicit
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (attr.value.type !== 'GlimmerTextNode') { | ||
| return true; | ||
| } | ||
| return attr.value.chars.toLowerCase() !== 'false'; |
There was a problem hiding this comment.
contenteditable values aren’t whitespace-normalized before comparison, so contenteditable=" false " (or other incidental whitespace) will be treated as truthy and incorrectly exempt elements from reporting. Trim before lowercasing (consistent with the type handling in isInherentlyFocusable) so explicit false remains false even with surrounding whitespace.
Suggested change
| return attr.value.chars.toLowerCase() !== 'false'; | |
| return attr.value.chars.trim().toLowerCase() !== 'false'; |
Comment on lines
+211
to
+238
| const hasTabindex = node.attributes?.some((a) => a.name?.toLowerCase() === 'tabindex'); | ||
| if (hasTabindex) { | ||
| const disabled = DISABLABLE_FORM_CONTROLS.has(tag) && findAttr(node, 'disabled'); | ||
| let hiddenInput = false; | ||
| if (tag === 'input') { | ||
| const type = getTextAttrValue(findAttr(node, 'type')); | ||
| hiddenInput = typeof type === 'string' && type.trim().toLowerCase() === 'hidden'; | ||
| } | ||
| if (!disabled && !hiddenInput) { | ||
| return; | ||
| } | ||
| } | ||
|
|
||
| // contenteditable also makes an element focusable, with the same | ||
| // HTML-spec carve-outs as tabindex: the UA ignores it on disabled | ||
| // form controls (HTML §4.10.18.5) and on <input type="hidden"> | ||
| // (no rendered element to edit), so the a11y conflict still stands. | ||
| if (isContentEditable(node)) { | ||
| const disabled = DISABLABLE_FORM_CONTROLS.has(tag) && findAttr(node, 'disabled'); | ||
| let hiddenInput = false; | ||
| if (tag === 'input') { | ||
| const type = getTextAttrValue(findAttr(node, 'type')); | ||
| hiddenInput = typeof type === 'string' && type.trim().toLowerCase() === 'hidden'; | ||
| } | ||
| if (!disabled && !hiddenInput) { | ||
| return; | ||
| } | ||
| } |
There was a problem hiding this comment.
The “disabled/hiddenInput suppresses focusability” logic is duplicated in both the tabindex and contenteditable paths. Consider extracting a small helper (e.g., isSuppressedFromFocus({ tag, node })) returning { disabled, hiddenInput } (or a single boolean) so these two blocks can share the same source of truth and avoid drift if the carve-outs change.
…-require-input-type feat: add template-require-input-type
Prepare Release v13.2.0
Captures empirically-verified Glimmer rendering behavior for HTML
attributes with mustache values, so rule authors classifying
GlimmerBooleanLiteral / GlimmerStringLiteral / GlimmerConcatStatement
have a ground-truth reference instead of intuition.
Notable findings the doc pins down:
- attr={{"false"}} (bare string "false") renders as attr="false" — TRUTHY,
not falsy as the literal suggests.
- attr="{{false}}" (concat) sets the IDL property to true regardless of
the literal value inside, even when HTML serialization shows nothing.
Verified against <video muted="{{false}}"> → videoEl.muted === true.
- Non-reflecting boolean attrs (muted, autoplay) and reflecting ones
(disabled, hidden) diverge in HTML serialization but agree at the IDL
property layer.
Includes a copy-pasteable reproduction template so future readers can
re-verify if Glimmer behavior changes.
Adds a pointer in README's "Creating a New Rule" section.
Replaces the prior tables (which mixed verified data with extrapolations
marked "(assumed)") with strictly-verified per-attribute tables. Every cell
populated from rendering and IDL inspection in ember-source 6.12.
Structure:
- One "Reference table" section, five per-attribute sub-tables
(muted, disabled, aria-hidden, tabindex, autocomplete)
- One "To reproduce the reference table" section with the exact template
and JS console snippet, inline (no separate fixture file)
- Cross-attribute observations summarizing the rules the data reveals
Findings the new tables make explicit:
- Bare-mustache falsy set is {{false}}/{{null}}/{{undefined}}/{{0}} for
boolean-coerced attrs (boolean HTML, ARIA, numeric); {{""}} is kept as
attr="".
- Bare-mustache string literals never coerce — attr={{"false"}} renders
as attr="false".
- Concat-mustache for boolean HTML attrs sets the IDL property to true
regardless of the literal value inside (verified for both reflecting
and non-reflecting attrs).
- Concat-mustache for ARIA/string attrs renders the stringified value
literally — no boolean coercion. aria-hidden="{{false}}" is visible.
- Plain string attrs (autocomplete) skip Glimmer's boolean coercion
entirely; autocomplete={{false}} renders as autocomplete="false".
The video.muted snapshot reads IDL muted=false for static attribute forms
(m1-m4, m7-m8, m11) because the test runs before media load — the doc
explains how defaultMuted reflects to muted at load time, so the rule's
"At play time" column is the lint-truth column rule authors should use.
…les" guide Adds a practical-implementation section between the reference table and the reproduction template. It maps each AST shape (GlimmerTextNode / GlimmerMustacheStatement with each path type / GlimmerConcatStatement) to a verdict, citing the row IDs from the reference table so rule authors can implement classification correctly without re-deriving the model. Includes: - AST-shape verdict table — direct mapping rule authors can copy from - Six common mistakes section, each tied to specific row IDs - Pointer to the (forthcoming) lib/utils/glimmer-attr-presence.js utility that will encode the verdict table once and let rules consume the resolved kind + value rather than re-walking the AST The audit of master rules and the open feature PRs found 18 REAL_BUG findings (12 in PRs, 6 in master) — all classifiable into the bullet-1 through bullet-4 footguns this guide enumerates.
…ng model
Adds lib/utils/glimmer-attr-presence.js exporting:
- classifyAttribute(attrNode, options?) → { presence, value }
Maps every AST shape (valueless / GlimmerTextNode / GlimmerMustacheStatement
with each path type / GlimmerConcatStatement) to a (presence, value) pair
per the verified model in docs/glimmer-attribute-behavior.md. Each branch
cites the relevant doc row IDs (m1–m19, h1–h15, d1–d10, t1–t7, i1–i5).
- inferAttrKind(name) → 'boolean' | 'aria' | 'numeric' | 'plain-string'
Used when classifyAttribute callers don't pass options.kind explicitly.
- BOOLEAN_HTML_ATTRS, NUMERIC_ATTRS — exported sets, useful for callers
that want to extend the kind model.
Key empirical asymmetries this util encodes correctly (and that audit
findings show several rules currently misclassify):
- Bare {{false}} / {{null}} / {{undefined}} on falsy-coerced kinds
(boolean / aria / numeric) → presence='absent' (Glimmer omits attribute).
Same forms on plain-string → presence='present', value='false' / etc.
- Bare {{"false"}} (StringLiteral) is JS-truthy, never coerced — renders
the literal value across all attribute kinds.
- aria-hidden={{true}} renders aria-hidden="" (h5, contested), not
aria-hidden="true" — the util surfaces value='' here so callers
comparing value === 'true' don't false-match.
- Concat is never falsy: any concat form is presence='present'; the
resolved value comes from the existing getStaticAttrValue helper.
Tests: 35 unit tests covering every doc row + the kind-override option.
Updates docs/glimmer-attribute-behavior.md to reference the actual file
and replaces the "(forthcoming)" sketch with a working example.
…ation / html-void-elements Correctness fixes from PR ember-cli#2769 review: - Boolean concat now returns canonical `value: 'true'` instead of leaking the inner literal. Per doc rows m13-m19, d7-d10 the IDL is set true regardless of inner value, so callers checking `value === 'false'` to detect "off" no longer get a wrong answer for `<video muted="{{false}}">`. - {{true}} on numeric / plain-string now returns `unknown` (untested in doc; was previously claiming `value: 'true'` by extrapolation). - `inferAttrKind` is now case-insensitive (`Disabled`, `ARIA-Hidden`, etc.). Drop hand-rolled spec lists in favor of upstream packages: - `property-information` for boolean / overloadedBoolean / number attribute classification, replacing the 24-entry BOOLEAN_HTML_ATTRS and 3-entry NUMERIC_ATTRS Sets. `colspan` is added as a small NUMERIC_OVERRIDES Set to compensate for an upstream gap in property-information 7.1.0 (rowspan and cols are marked `number: true`, colspan isn't). - `html-void-elements` in template-block-indentation.js and template-self-closing-void-elements.js, deduplicating two parallel 16-entry VOID_TAGS Sets. Internal API change: BOOLEAN_HTML_ATTRS and NUMERIC_ATTRS are no longer exported from glimmer-attr-presence. The util's public surface is now `classifyAttribute` and `inferAttrKind`. Callers wanting the underlying classification can use property-information directly.
… false comparison
…omFocus helper to deduplicate tabindex/contenteditable carve-outs
johanrd
force-pushed
the
feat/template-interactive-supports-focus
branch
from
04216f3 to
99774f7
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Note
This is part of a series where Claude has audited
eslint-plugin-emberagainst jsx-a11y, vuejs-accessibility, angular-eslint, lit-a11y and html-validate,ember-template-lint, and the HTML and WCAG specs.Summary
Adds
template-interactive-supports-focus— flags elements that declare an interactive ARIA role on a host that is not focusable (the canonical<div role="button">anti-pattern).Premise: If an author writes
role="button", they promise keyboard and screen-reader users that the element behaves like a button. That promise only holds if the element is reachable by keyboard. Normative basis: WCAG 2.1 SC 2.1.1 Keyboard (Level A).Conclusion: flag the element unless the host is inherently focusable, has a
tabindex(any value, static or dynamic), or carries a truthycontenteditable. Skip component invocations and dynamic role values.Divergence from peer plugins — important
This rule is role-gated: it flags the shape
<div role="button">regardless of whether an event handler is attached. All three peer plugins (jsx-a11y, vuejs-accessibility, @angular-eslint/template) implement the equivalent rule as handler-gated — they require an interactive handler (onClick/@click/(click)) to be present before flagging. A handler-less<div role="button">x</div>passes in all three peers; our rule flags it.Role-gated is a deliberate, stricter choice. The canonical anti-pattern (authored role without keyboard support) is bugged whether a handler is wired up or not — the role alone promises operability. Users who want peer-parity behavior should prefer the existing
template-no-invalid-interactive+ #33 escape-hatch handling.Other differences from peers:
progressbartreatment — jsx-a11y explicitly excludesprogressbarfrom interactive roles (itsisInteractiveRole.jscarves it out becauseprogressbar.valueis always readonly). Our rule flags<div role="progressbar">without a tabindex. This is a deliberate consequence of deriving INTERACTIVE_ROLES from aria-query's widget-ancestor chain without jsx-a11y's manual exclusion.contenteditabletruthiness — we treat any value except the literal string"false"as truthy. The HTML spec actually definescontenteditableas an enumerated attribute with keywordstrue/false/plaintext-onlywhose invalid value default is the Inherit state and whose empty-value default is True; we deliberately accept any non-"false"value as a focusability hint, which is more permissive than the spec. @angular-eslint is stricter: only""and"true"count as truthy.allowListoption — @angular-eslint's rule exemptsformby default; we don't.Flags
Allows
Addresses M2 in tracking PR #28 (Phase 3 audit). Opt-in — not added to
template-lint-migration.