useAriaPropsForRole
Summary
Section titled “Summary”- Rule available since:
v1.0.0 - Diagnostic Category:
lint/a11y/useAriaPropsForRole - This rule is recommended, meaning it is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- Sources:
How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "useAriaPropsForRole": "error" } } }}Description
Section titled “Description”Enforce that elements with ARIA roles must have all required ARIA attributes for that role.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<span role="checkbox"></span>code-block.jsx:1:7 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ The element with the checkbox ARIA role does not have the required ARIA attributes.
> 1 │ <span role=“checkbox”></span>
│ ^^^^^^^^^^^^^^^
2 │
ℹ Missing ARIA prop(s):
- aria-checked
<span role="heading"></span>code-block.jsx:1:7 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ The element with the heading ARIA role does not have the required ARIA attributes.
> 1 │ <span role=“heading”></span>
│ ^^^^^^^^^^^^^^
2 │
ℹ Missing ARIA prop(s):
- aria-level
<span role="checkbox" aria-checked="true"></span><span role="heading" aria-level="1"></span>Accessibility guidelines
Section titled “Accessibility guidelines”Resources
Section titled “Resources”Related links
Section titled “Related links”Summary
Section titled “Summary”- Diagnostic Category:
lint/a11y/useAriaPropsForRole - This rule is recommended, meaning it is enabled by default.
- This rule doesn’t have a fix.
- The default severity of this rule is error.
- Sources:
How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "useAriaPropsForRole": "error" } } }}Description
Section titled “Description”Enforce that elements with ARIA roles must have all required ARIA attributes for that role.
Remember that this rule only supports static values for the role attribute.
Dynamic role values are not checked.
Examples
Section titled “Examples”Invalid
Section titled “Invalid”<span role="checkbox"></span>code-block.html:1:7 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ The element with the checkbox ARIA role does not have the required ARIA attributes.
> 1 │ <span role=“checkbox”></span>
│ ^^^^^^^^^^^^^^^
2 │
ℹ Missing ARIA prop(s):
- aria-checked
<span role="heading"></span>code-block.html:1:7 lint/a11y/useAriaPropsForRole ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ The element with the heading ARIA role does not have the required ARIA attributes.
> 1 │ <span role=“heading”></span>
│ ^^^^^^^^^^^^^^
2 │
ℹ Missing ARIA prop(s):
- aria-level
<span role="checkbox" aria-checked="true"></span><span role="heading" aria-level="1"></span>Accessibility guidelines
Section titled “Accessibility guidelines”Resources
Section titled “Resources”Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.