You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|[template-no-aria-hidden-body](docs/rules/template-no-aria-hidden-body.md)| disallow aria-hidden on body element | 📋 | 🔧 ||
265
-
|[template-no-aria-unsupported-elements](docs/rules/template-no-aria-unsupported-elements.md)| disallow ARIA roles, states, and properties on elements that do not support them | 📋 |||
|[template-no-redundant-role](docs/rules/template-no-redundant-role.md)| disallow redundant role attributes | 📋 | 🔧 ||
280
-
|[template-no-unsupported-role-attributes](docs/rules/template-no-unsupported-role-attributes.md)| disallow ARIA attributes that are not supported by the element role | 📋 | 🔧 ||
281
-
|[template-no-whitespace-within-word](docs/rules/template-no-whitespace-within-word.md)| disallow excess whitespace within words (e.g. "W e l c o m e") | 📋 |||
282
-
|[template-require-aria-activedescendant-tabindex](docs/rules/template-require-aria-activedescendant-tabindex.md)| require non-interactive elements with aria-activedescendant to have tabindex | 📋 | 🔧 ||
283
-
|[template-require-context-role](docs/rules/template-require-context-role.md)| require ARIA roles to be used in appropriate context | 📋 |||
284
-
|[template-require-iframe-title](docs/rules/template-require-iframe-title.md)| require iframe elements to have a title attribute | 📋 |||
285
-
|[template-require-input-label](docs/rules/template-require-input-label.md)| require label for form input elements | 📋 |||
286
-
|[template-require-lang-attribute](docs/rules/template-require-lang-attribute.md)| require lang attribute on html element | 📋 |||
|[template-require-media-caption](docs/rules/template-require-media-caption.md)| require captions for audio and video elements | 📋 |||
289
-
|[template-require-presentational-children](docs/rules/template-require-presentational-children.md)| require presentational elements to only contain presentational children | 📋 |||
290
-
|[template-require-valid-alt-text](docs/rules/template-require-valid-alt-text.md)| require valid alt text for images and other elements | 📋 |||
291
-
|[template-require-valid-form-groups](docs/rules/template-require-valid-form-groups.md)| require grouped form controls to have fieldset/legend or WAI-ARIA group labeling ||||
292
-
|[template-table-groups](docs/rules/template-table-groups.md)| require table elements to use table grouping elements | 📋 |||
|[template-no-aria-hidden-body](docs/rules/template-no-aria-hidden-body.md)| disallow aria-hidden on body element | 📋 | 🔧 ||
265
+
|[template-no-aria-unsupported-elements](docs/rules/template-no-aria-unsupported-elements.md)| disallow ARIA roles, states, and properties on elements that do not support them | 📋 |||
|[template-no-nested-interactive](docs/rules/template-no-nested-interactive.md)| disallow nested interactive elements | 📋 |||
276
+
|[template-no-nested-landmark](docs/rules/template-no-nested-landmark.md)| disallow nested landmark elements | 📋 |||
277
+
|[template-no-noninteractive-element-to-interactive-role](docs/rules/template-no-noninteractive-element-to-interactive-role.md)| disallow non-interactive elements from being assigned interactive ARIA roles ||||
278
+
|[template-no-pointer-down-event-binding](docs/rules/template-no-pointer-down-event-binding.md)| disallow pointer down event bindings | 📋 |||
|[template-no-redundant-role](docs/rules/template-no-redundant-role.md)| disallow redundant role attributes | 📋 | 🔧 ||
281
+
|[template-no-unsupported-role-attributes](docs/rules/template-no-unsupported-role-attributes.md)| disallow ARIA attributes that are not supported by the element role | 📋 | 🔧 ||
282
+
|[template-no-whitespace-within-word](docs/rules/template-no-whitespace-within-word.md)| disallow excess whitespace within words (e.g. "W e l c o m e") | 📋 |||
283
+
|[template-require-aria-activedescendant-tabindex](docs/rules/template-require-aria-activedescendant-tabindex.md)| require non-interactive elements with aria-activedescendant to have tabindex | 📋 | 🔧 ||
284
+
|[template-require-context-role](docs/rules/template-require-context-role.md)| require ARIA roles to be used in appropriate context | 📋 |||
285
+
|[template-require-iframe-title](docs/rules/template-require-iframe-title.md)| require iframe elements to have a title attribute | 📋 |||
286
+
|[template-require-input-label](docs/rules/template-require-input-label.md)| require label for form input elements | 📋 |||
287
+
|[template-require-lang-attribute](docs/rules/template-require-lang-attribute.md)| require lang attribute on html element | 📋 |||
|[template-require-media-caption](docs/rules/template-require-media-caption.md)| require captions for audio and video elements | 📋 |||
290
+
|[template-require-presentational-children](docs/rules/template-require-presentational-children.md)| require presentational elements to only contain presentational children | 📋 |||
291
+
|[template-require-valid-alt-text](docs/rules/template-require-valid-alt-text.md)| require valid alt text for images and other elements | 📋 |||
292
+
|[template-require-valid-form-groups](docs/rules/template-require-valid-form-groups.md)| require grouped form controls to have fieldset/legend or WAI-ARIA group labeling ||||
293
+
|[template-table-groups](docs/rules/template-table-groups.md)| require table elements to use table grouping elements | 📋 |||
Disallow non-interactive HTML elements from being assigned interactive ARIA roles.
6
+
7
+
Assigning an interactive role (`button`, `checkbox`, `menuitem`, ...) to an element with inherent non-interactive semantics (headings, landmarks, text structure, lists, tables, forms) creates a widget with no supporting behavior — focus, keyboard activation, and state handling must all be added manually, and the mismatch is easy to get wrong.
8
+
9
+
## Scope
10
+
11
+
The set of non-interactive elements is sourced from [`axobject-query`](https://github.com/A11yance/axobject-query) — the same AX-tree-derived data used by [`eslint-plugin-jsx-a11y`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y), [`@angular-eslint/eslint-plugin-template`](https://github.com/angular-eslint/angular-eslint), and others. It includes headings (`<h1>`–`<h6>`), landmarks (`<article>`, `<aside>`, `<nav>`, `<main>`, etc.), text structure (`<p>`, `<figure>`, `<blockquote>`, etc.), lists (`<ul>`, `<ol>`, `<li>`, `<dl>`, `<dt>`, `<dd>`), tables (`<table>`, `<tbody>`, `<tr>`, etc.), forms (`<form>`, `<fieldset>`, `<legend>`), `<img>`, and similar.
12
+
13
+
`<div>` and `<span>` are not covered — ARIA 1.2 assigns them the `generic` role with no inherent semantics to mismatch. `<div role="button">` is covered by the related [`template-require-aria-activedescendant-tabindex`](./template-require-aria-activedescendant-tabindex.md) and [`template-no-noninteractive-tabindex`](./template-no-noninteractive-tabindex.md) rules.
14
+
15
+
## Examples
16
+
17
+
This rule **forbids** the following:
18
+
19
+
```gjs
20
+
<template>
21
+
<h1 role="button">Click</h1>
22
+
<article role="button">Story</article>
23
+
<li role="tab">Tab</li>
24
+
<img role="link" src="/x.png" alt="link" />
25
+
<form role="checkbox"></form>
26
+
<p role="button">Click me</p>
27
+
</template>
28
+
```
29
+
30
+
This rule **allows** the following:
31
+
32
+
```gjs
33
+
<template>
34
+
<h1 role="heading" aria-level="1">Title</h1>
35
+
<article role="article">Story</article>
36
+
<ul role="list"></ul>
37
+
38
+
{{! <div>/<span> are "generic" — not covered by this rule }}
0 commit comments