Skip to content

Commit ea5745a

Browse files
committed
docs: surface role-gated vs handler-gated divergence in rule doc
Add a prominent banner explaining that this rule flags <div role="button"> regardless of handler presence, while all three peer plugins (jsx-a11y, vuejs-accessibility, @angular-eslint/template) gate on handler presence. Direct users who want peer-parity handler- gated behavior to template-no-invalid-interactive + #33.
1 parent 3a0d5a8 commit ea5745a

1 file changed

Lines changed: 12 additions & 0 deletions

File tree

docs/rules/template-interactive-supports-focus.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,18 @@ When an author adds `role="button"` (or any other interactive widget role) to a
88

99
This rule flags elements that carry an interactive ARIA role but have no focus affordance.
1010

11+
## ⚠️ Divergence from peer plugins — role-gated, not handler-gated
12+
13+
All three peer plugins implement the equivalent rule as **handler-gated** — they only flag `<div role="button">` when an interactive event handler (`onClick` / `@click` / `(click)`) is also present:
14+
15+
- [`jsx-a11y/interactive-supports-focus`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/interactive-supports-focus.md)
16+
- [`vuejs-accessibility/interactive-supports-focus`](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/docs/rules/interactive-supports-focus.md)
17+
- [`@angular-eslint/template/interactive-supports-focus`](https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin-template/docs/rules/interactive-supports-focus.md)
18+
19+
**This rule is role-gated — it flags on role alone**, regardless of handler presence. Shapes like `<div role="button">x</div>` with no handler will flag here but not in jsx-a11y / vue-a11y / angular-eslint. That's a deliberate choice: an authored interactive role promises operability irrespective of whether the handler is wired up at the current site (the role is the public contract; the handler is an implementation detail that may move).
20+
21+
If you want peer-parity handler-gated behavior, use [`template-no-invalid-interactive`](./template-no-invalid-interactive.md) instead (see also [#33](https://github.com/ember-cli/eslint-plugin-ember/pull/33)), which flags interactive event handlers on non-interactive hosts and honors the `role="presentation"` / `aria-hidden` escape hatches.
22+
1123
## Examples
1224

1325
This rule **forbids** the following:

0 commit comments

Comments
 (0)