microsoft / microsoft/react-native-windows

Exposing accessibility prop for access keys

Open
#10,353 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area: Accessibility enhancement Workstream: Accessibility
Dominant language
C++
Stars
17.3k
Forks
1.2k
Avg merge
1d 13h
Merged PRs (30d)
33

Description

Summary

Add a prop to set the access key UIA property on a component.

Motivation

RN Win32 is working on a feature which requires exposing a prop to add access key accessibility information to a component. Guidance from https://github.com/microsoft/react-native-windows/issues/3450 mentions using accessibilityHint to set the property, but we've found that accessibilityHint doesn't consistently get explicitly announced by Narrator for certain control types like MenuItems (see here). So, we will be going with exposing a prop to set the UIA AccessKey property.

Opening this issue to revisit this guidance for RNW and discuss if proper support for access key accessibility should be added. It would be good to have consistency across platforms for exposing accessibility information.

Basic Example
<View focusable accessible onKeyDown={handleAccessKey()} accessibilityAccessKey={'A'}>
    <Text>Test</Text>
</View>
Open Questions

Should accelerator key accessibility also be considered?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the RNW guidance in issue 3450 and the linked Narrator behavior reference, then trace how accessibility props are exposed to Windows UIA components. Done means a documented prop consistently sets the UIA AccessKey property across relevant control types, with the accelerator-key question resolved.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
accessibility
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.