roleSupportedAriaProps

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

✅ This rule is included in the jsx logical and logicalStrict presets.

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

❌ Incorre

CE6dCB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dbutt1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AB0aria-checkA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dtr1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6dCB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dli1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AB0aria-selectA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dtr1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6buttCB0aria-checkA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dfal1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>

<44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dbu1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B0aria-pre4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" /><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dchec1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B0aria-che4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6buD61B0aria-pre4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di>

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

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