react-native-windows icon indicating copy to clipboard operation
react-native-windows copied to clipboard

Accessibility Pass

Open chiaramooney opened this issue 1 year ago • 0 comments

This issue is to track that apps on Fabric should be submitted for accessibility grading to ensure accessibility compliance. We'll only want to submit a Fabric app for grading once we feel we should receive a compliant grade. Once the accessibility grading is run we will be on a clock to fix the issues found in the accessibility pass before the 60/120 day deadline.

Fast Pass

We will want to run Fast Pass on each page within the Fabric version of Gallery that we will submit to the accessibility grading. Fast Pass should run clean on each of these pages before we submit the app for grading.

We should create tracking issues for each page in React Native Gallery on Fabric to capture what errors were flagged in that page's Fast Pass run. Issues should link to accessibility implementation issues that connect to Fast Pass failures.

### Tasks
- [ ] https://github.com/microsoft/react-native-gallery/issues/458
- [ ] https://github.com/microsoft/react-native-gallery/issues/459
- [ ] https://github.com/microsoft/react-native-gallery/issues/460
- [ ] https://github.com/microsoft/react-native-gallery/issues/461
- [ ] https://github.com/microsoft/react-native-gallery/issues/462
- [ ] https://github.com/microsoft/react-native-gallery/issues/463
- [ ] https://github.com/microsoft/react-native-gallery/issues/464
- [ ] https://github.com/microsoft/react-native-gallery/issues/465
- [ ] https://github.com/microsoft/react-native-gallery/issues/466
- [ ] https://github.com/microsoft/react-native-gallery/issues/467
- [ ] https://github.com/microsoft/react-native-gallery/issues/468

Scenarios Covered in Accessibility Grading

This table is to cover additional scenarios that accessibility grading will check for that are not covered by a Fast Pass run in Accessibility Insights. Add issued to the "Tracking Issue" column should be tagged with "Needed for Accessibility Grading"

TODO Walk through React Native Gallery on Paper and determine which providers should up most commonly, these are the providers we should prioritize implementing on Fabric.

Scenario Accessibility Feature(s) Needed Tracking Issue Example Issue
Blue highlight box must exist around element Narrator is announcing. Box should follow accessibility focused element. Box should match the dimensions of the control. BoundingRectangle https://github.com/microsoft/react-native-windows/pull/11508
Controls with Button control type should support the Invoke Pattern and should be invokable via accessibility tools such as AccessibilityInsights. IInvokeProvider https://github.com/microsoft/react-native-windows/pull/11874
Controls with Hyperlink control type should support the Invoke Pattern and should be invokable via accessibility tools such as AccessibilityInsights. IInvokeProvider https://github.com/microsoft/react-native-windows/pull/11874 https://github.com/microsoft/react-native-gallery/issues/478
All controls should have data for the UIA ControlType property. ControlType, accessibilityRole https://github.com/microsoft/react-native-windows/pull/11876
All controls should have data for the UIA Name property. Name, accessibilityLabel https://github.com/microsoft/react-native-windows/issues/12030, https://github.com/microsoft/react-native-windows/pull/12186
For any given component, the UIA Name and UIA ControlType and LocalizedControlType properties should not contain the same text. Name/accessibilityLabel, LocalizedControlType/accessibilityRole https://github.com/microsoft/react-native-gallery/issues/474

chiaramooney avatar Jun 25 '24 23:06 chiaramooney