Skip to content
Flint
Blog

ariaPropTypes

Reports ARIA properties with invalid value types.

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

ARIA properties have specific value types defined in the WAI-ARIA specification. Each property expects values of a particular type, such as boolean, integer, token, or string. Providing values that don’t match the expected type can cause assistive technologies to ignore the property or behave unexpectedly.

Common value types include:

  • boolean: true or false (e.g., aria-disabled, aria-hidden)
  • tristate: true, false, or mixed (e.g., aria-checked, aria-pressed)
  • integer: whole numbers (e.g., aria-level, aria-posinset)
  • number: numeric values (e.g., aria-valuemax, aria-valuemin)
  • token: specific predefined values (e.g., aria-live, aria-orientation)
  • string: any text value (e.g., aria-label, aria-placeholder)
  • ID reference: ID of another element (e.g., aria-activedescendant)
  • ID list: space-separated list of IDs (e.g., aria-controls, aria-labelledby)

This is required for WCAG 4.1.2 compliance.

Examples

Section titled “Examples”
<div 
AriaAttributes["aria-hidden"]?: Booleanish | undefined
Indicates whether the element is exposed to an accessibility API.
@see ― aria-disabled.
aria-hidden="yes" />
Error ts(2322)  ― Type '{ "aria-hidden": "yes"; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ "aria-hidden": "yes"; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property '"aria-hidden"' are incompatible.
      Type '"yes"' is not assignable to type 'Booleanish | undefined'.
<input 
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="1" />
Error ts(2322)  ― Type '{ "aria-checked": "1"; }' is not assignable to type 'DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>'.
  Type '{ "aria-checked": "1"; }' is not assignable to type 'InputHTMLAttributes<HTMLInputElement>'.
    Types of property '"aria-checked"' are incompatible.
      Type '"1"' is not assignable to type 'boolean | "false" | "mixed" | "true" | undefined'.
<div 
AriaAttributes["aria-level"]?: number | undefined
Defines the hierarchical level of an element within a structure.
aria-level="low" />
Error ts(2322)  ― Type '{ "aria-level": string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ "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'.
<button 
AriaAttributes["aria-pressed"]?: boolean | "false" | "mixed" | "true" | undefined
Indicates the current "pressed" state of toggle buttons.
@see ― aria-checked
@see ― aria-selected.
aria-pressed="yes" />
Error ts(2322)  ― Type '{ "aria-pressed": "yes"; }' is not assignable to type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'.
  Type '{ "aria-pressed": "yes"; }' is not assignable to type 'ButtonHTMLAttributes<HTMLButtonElement>'.
    Types of property '"aria-pressed"' are incompatible.
      Type '"yes"' is not assignable to type 'boolean | "false" | "mixed" | "true" | undefined'.
<div 
AriaAttributes["aria-autocomplete"]?: "none" | "inline" | "list" | "both" | undefined
Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
presented if they are made.
aria-autocomplete="invalid" />
Error ts(2322)  ― Type '{ "aria-autocomplete": "invalid"; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ "aria-autocomplete": "invalid"; }' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
    Types of property '"aria-autocomplete"' are incompatible.
      Type '"invalid"' is not assignable to type '"none" | "inline" | "list" | "both" | undefined'.

When Not To Use It

Section titled “When Not To Use It”

If you are using a framework that automatically transforms specific invalid property values to match the ARIA specification, this rule might not be useful for you.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”
Made with ❤️‍🔥 around the world by the Flint team and contributors.