eslint-plugin-lit-a11y
Version:
linting plugin for lit-a11y
40 lines (25 loc) • 1.02 kB
Markdown
# no-redundant-role
Enforce explicit role property is not the same as implicit/default role property on element.
Some HTML elements have implicit roles. For example, a `<dialog>` element has the implicit role `dialog`.
For those elements, there's no need to define a role unless you need to explicity change the existing one.
## Rule Details
This rule aims to prevent redundant use of the `role` attribute.
Examples of **incorrect** code for this rule:
```js
html` <dialog role="dialog"></dialog> `;
```
```js
html` <button role="button"></button> `;
```
```js
html` <a href="foo" role="link"></a> `;
```
Examples of **correct** code for this rule:
```js
html` <img role="presentation" /> `;
```
## When Not To Use It
If you do not use ARIA roles in your lit-html templates.
## Further Reading
- [MDN: WAI-ARIA Roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)
- [Web Fundamentals: Introduction to ARIA](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/)