Accessibility Pass

[chiaramooney]

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

Preview Give feedback

1. Accessibility stress test of Button Component Example Page on Fabric react-native-gallery#458
   Area: Accessibility Area: Fabric New Architecture Parity: Fabric vs. Paper enhancement +5
   
2. Accessibility stress test of View Component Example Page on Fabric react-native-gallery#459
   Area: Accessibility Area: Fabric New Architecture Parity: Fabric vs. Paper enhancement +5
3. Accessibility stress test of Text Component Example Page on Fabric react-native-gallery#460
   Area: Accessibility Area: Fabric New Architecture Parity: Fabric vs. Paper enhancement +5
4. Accessibility stress test of TouchableHighlight Component Example Page on Fabric react-native-gallery#461
   Area: Accessibility Area: Fabric New Architecture Parity: Fabric vs. Paper enhancement +5
5. Accessibility stress test of TouchableOpacity Component Example Page on Fabric react-native-gallery#462
   Area: Accessibility Area: Fabric New Architecture Parity: Fabric vs. Paper enhancement +5
6. Accessibility stress test of TouchableWithoutFeedback Component Example Page on Fabric react-native-gallery#463
   Area: Accessibility Area: Fabric New Architecture Parity: Fabric vs. Paper enhancement +5
7. Accessibility stress test of ScrollView Component Example Page on Fabric react-native-gallery#464
   Area: Accessibility Area: Fabric New Architecture Parity: Fabric vs. Paper enhancement +5
8. Accessibility stress test of TextInput Component Example Page on Fabric react-native-gallery#465
   Area: Accessibility Area: Fabric New Architecture Parity: Fabric vs. Paper enhancement +5
9. Accessibility stress test of Switch Component Example Page on Fabric react-native-gallery#466
   Area: Accessibility Area: Fabric New Architecture Parity: Fabric vs. Paper enhancement +5
10. Accessibility stress test of FlatList Component Example Page on Fabric react-native-gallery#467
    Area: Accessibility Area: Fabric New Architecture Parity: Fabric vs. Paper enhancement +5
11. Accessibility stress test of Image Component Example Page on Fabric react-native-gallery#468
    Area: Accessibility Area: Fabric New Architecture Parity: Fabric vs. Paper enhancement +5

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	#11508
Controls with Button control type should support the Invoke Pattern and should be invokable via accessibility tools such as AccessibilityInsights.	IInvokeProvider	#11874
Controls with Hyperlink control type should support the Invoke Pattern and should be invokable via accessibility tools such as AccessibilityInsights.	IInvokeProvider	#11874	microsoft/react-native-gallery#478
All controls should have data for the UIA ControlType property.	ControlType, accessibilityRole	#11876
All controls should have data for the UIA Name property.	Name, accessibilityLabel	#12030, #12186
For any given component, the UIA Name and UIA ControlType and LocalizedControlType properties should not contain the same text.	Name/accessibilityLabel, LocalizedControlType/accessibilityRole		microsoft/react-native-gallery#474