Skip to content

Add support for the accessibilityState prop on Fabric #13327

Closed
@chiaramooney

Description

@chiaramooney

Documentation

accessibilityState Documentation: https://reactnative.dev/docs/accessibility#accessibilitystate

Behavior Explanation

From the documentation
"Describes the current state of a component to the assistive technology user.

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."

For example a developer will define the following control:

<View
      accessible={true}
      accessibilityState={selected: true, disabled: true}

This state information should be passed into the native accessibility code which should call upon the correct UIA APIs (i.e. ISelectionProvider and IsEnabled property) to set the component's UIA data to be selected and disabled.

Note some of this implementation will need to change based on the component type. Not all controls have UIA providers to support all accessibilityStates

Implementation Plan

In our native implementation of accessibilityState we must:

  1. Check to see if accessibilityState has been defined for a control.
  2. If defined with a subset of the states {disabled, selected, checked, busy, expanded}, apply UIA state to the control using UIA property and provider APIs.

Note: Implementation should also cover case where control has gone from a specified state to a no specification.

Past Implementation

#11792
#4617
#4624
#9871
#11756

Notes

To Be Clarified

It is unclear in documentation what the behavior should be if a control is set to 'true' for an accessibilityState it shouldn't support. For example, if a plain view was set to {checked: true}, should we add the IToggleProvider to the View and set the toggle state to true? Or if the control does not support checked behavior, should we ignore the specified state?

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Done

Relationships

None yet

Development

No branches or pull requests

Issue actions