roleRequiredAriaProps

Reports ARIA roles missing their required ARIA properties.

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

ARIA roles define how elements are exposed to assistive technologies like screen readers. Some roles require specific ARIA properties to function correctly and provide meaningful information to users. Omitting these required properties can result in incomplete or confusing experiences for users of assistive technologies.

<
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div 
HTMLAttributes<HTMLDivElement>.role?: AriaRole | undefined
role="checkbox" />

<div 
HTMLAttributes<HTMLDivElement>.role?: AriaRole | undefined
role="slider" 
AriaAttributes["aria-valuenow"]?: number | undefined
Defines the current value for a range widget.
@see ― aria-valuetext.
aria-valuenow="5" />Error ts(2322)  ― Type '{ role: "slider"; "aria-valuenow": string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ role: "slider"; "aria-valuenow": string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property '"aria-valuenow"' are incompatible.
      Type 'string' is not assignable to type 'number'.

<
JSX.IntrinsicElements.span: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
span 
HTMLAttributes<HTMLSpanElement>.role?: AriaRole | undefined
role="combobox" />

<
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div 
HTMLAttributes<HTMLDivElement>.role?: AriaRole | undefined
role="heading" />

<
JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
div 
HTMLAttributes<HTMLDivElement>.role?: AriaRole | undefined
role="checkbox" 
AriaAttributes["aria-checked"]?: boolean | "false" | "mixed" | "true" | undefined
Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
@see ― aria-pressed
@see ― aria-selected.
aria-checked="false" />

<div 
HTMLAttributes<HTMLDivElement>.role?: AriaRole | undefined
role="slider" 
AriaAttributes["aria-valuenow"]?: number | undefined
Defines the current value for a range widget.
@see ― aria-valuetext.
aria-valuenow="5" 
AriaAttributes["aria-valuemax"]?: number | undefined
Defines the maximum allowed value for a range widget.
aria-valuemax="10" 
AriaAttributes["aria-valuemin"]?: number | undefined
Defines the minimum allowed value for a range widget.
aria-valuemin="0" />Error ts(2322)  ― Type '{ role: "slider"; "aria-valuenow": string; "aria-valuemax": string; "aria-valuemin": string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ role: "slider"; "aria-valuenow": string; "aria-valuemax": string; "aria-valuemin": string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property '"aria-valuemax"' are incompatible.
      Type 'string' is not assignable to type 'number'.

<
JSX.IntrinsicElements.span: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
span 
HTMLAttributes<HTMLSpanElement>.role?: AriaRole | undefined
role="combobox" 
AriaAttributes["aria-controls"]?: string | undefined
Identifies the element (or elements) whose contents or presence are controlled by the current element.
@see ― aria-owns.
aria-controls="listbox" 
AriaAttributes["aria-expanded"]?: Booleanish | undefined
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
aria-expanded="false" />

<div 
HTMLAttributes<HTMLDivElement>.role?: AriaRole | undefined
role="heading" 
AriaAttributes["aria-level"]?: number | undefined
Defines the hierarchical level of an element within a structure.
aria-level="2" />Error ts(2322)  ― Type '{ role: "heading"; "aria-level": string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ role: "heading"; "aria-level": string; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property '"aria-level"' are incompatible.
      Type 'string' is not assignable to type 'number'.

When Not To Use It

If you are using a custom framework that populates valid ARIA property roles for you, you might not need this rule.

Equivalents in Other Linters

ESLint: jsx-a11y/role-has-required-aria-props
Oxlint: jsx_a11y/role-has-required-aria-props

Made with ❤️‍🔥 around the world by the Flint team and contributors.

roleRequiredAriaProps

Examples

When Not To Use It

Further Reading

Equivalents in Other Linters