Has Valid Accessibility State
Link to Has Valid Accessibility State copied to clipboard
Rule ID: has-valid-accessibility-state
Describes the current state of a component to the user of assistive technology.
accessibilityState is an object. It contains the following fields:
| Name | Description | Type | Required |
|---|---|---|---|
disabled |
Indicates whether the element is disabled or not. | boolean | No |
selected |
Indicates whether a selectable element is currently selected or not. | boolean | No |
checked |
Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes. | boolean or 'mixed' | No |
busy |
Indicates whether an element is currently busy or not. | boolean | No |
expanded |
Indicates whether an expandable element is currently expanded or collapsed. | boolean | No |
To use, set the accessibilityState to an object with a specific definition.
Why It Matters
The accessibilityState fields must be spelled correctly and correspond to values that make sense to describe the intended accessibility state. Failure to comply with allowed values results in components that are not accessible to assistive technology users.
How to Fix the Problem
Ensure that the accessibilityState prop is an object that has fields set to a valid name and type value.
Passing Examples
<TouchableOpacity accessibilityState={{ checked: true }} />
<TouchableOpacity accessibilityState={{ checked: "mixed" }} />
<TouchableOpacity accessibilityState={{ checked: true, disabled: true }} />Failing Examples
<TouchableOpacity accessibilityState="selected" />
<TouchableOpacity accessibilityState={{ disabled: "true" }} />
<View accessibilityStates={["checked"]} />