roleSupportedAriaProps

Reports ARIA properties that are not supported by an element's role.

✅ This rule is included in the jsx logical preset.

Elements with ARIA roles should only use ARIA properties that are supported by that role. Each ARIA role has a specific set of supported properties defined in the WAI-ARIA specification. Using ARIA properties that are not supported by a role can confuse assistive technologies and lead to unexpected behavior.

For example, the checkbox role supports properties like aria-checked and aria-required, but not aria-selected. Similarly, the button role supports aria-pressed and aria-expanded, but not aria-checked.

This is required for WCAG 4.1.2 compliance.

Examples

❌ Incorrect

<div role="button" aria-checked="true" />

<div role="link" aria-selected="true" />

<button aria-checked="false" />

✅ Correct

<div role="button" aria-pressed="true" />

<div role="checkbox" aria-checked="true" />

<button aria-pressed="true" />

When Not To Use It

If you use a framework that automatically changes ARIA properties from custom invalid ones to correct roles, you might need to disable this rule.

Further Reading

• WCAG 4.1.2: Name, Role, Value
• WAI-ARIA Roles
• WAI-ARIA States and Properties

Equivalents in Other Linters

• ESLint: jsx-a11y/role-supports-aria-props
• Oxlint: jsx_a11y/role-supports-aria-props