Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for the accessibilityState prop on Fabric #13327

Closed
Tracked by #11901
chiaramooney opened this issue Jun 10, 2024 · 0 comments · Fixed by #13952
Closed
Tracked by #11901

Add support for the accessibilityState prop on Fabric #13327

chiaramooney opened this issue Jun 10, 2024 · 0 comments · Fixed by #13952
Assignees
Labels
Area: Accessibility Area: Fabric Support Facebook Fabric enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Workstream: Accessibility Ensure RNW Fabric apps are properly accessible.
Milestone

Comments

@chiaramooney
Copy link
Contributor

chiaramooney commented Jun 10, 2024

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?

@microsoft-github-policy-service microsoft-github-policy-service bot added the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Jun 10, 2024
This was referenced Jun 10, 2024
@chrisglein chrisglein added Area: Accessibility and removed Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) labels Jun 13, 2024
@chrisglein chrisglein added this to the Backlog milestone Jun 13, 2024
@jonthysell jonthysell added the Area: Fabric Support Facebook Fabric label Jul 15, 2024
@microsoft-github-policy-service microsoft-github-policy-service bot added the New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric label Jul 15, 2024
@chiaramooney chiaramooney added the Workstream: Accessibility Ensure RNW Fabric apps are properly accessible. label Oct 3, 2024
@chiaramooney chiaramooney self-assigned this Oct 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Accessibility Area: Fabric Support Facebook Fabric enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Workstream: Accessibility Ensure RNW Fabric apps are properly accessible.
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants