Discord GitHub GitHub Twitter

Lint Rules

noAriaUnsupportedElements (since v12.1.0)

Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes.

Source: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/aria-unsupported-elements.md

Examples

Invalid

<meta charset="UTF-8" role="meta" />
nursery/noAriaUnsupportedElements.js:1:1 lint/nursery/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the role attribute and aria-* attributes when using meta, html, script, and style elements.
  
  > 1 │ <meta charset="UTF-8" role="meta" />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Using role on elements that do not support them can cause issues with screen readers.
  

<html aria-required="true" />
nursery/noAriaUnsupportedElements.js:1:1 lint/nursery/noAriaUnsupportedElements ━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the role attribute and aria-* attributes when using meta, html, script, and style elements.
  
  > 1 │ <html aria-required="true" />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Using aria-* on elements that do not support them can cause issues with screen readers.

Valid

<meta charset="UTF-8" />
<html></html>