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

Beta Give feedback

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

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