Improving default level of accessibility for RNW apps #11051
Description
We've recently finished up the work needed to get RNW Gallery graded for accessibility and closing out the bugs necessary for keeping a C grade. Some of this work could be upstreamed to provide more accessibility out-of-the-box, and some work required clunky workarounds which spotlighted a few gaps in the platform that we should address. Creating this issue to keep track of the work we can do to improve the default level of accessibility for RNW apps.
- High Contrast Support: With Adds High Contrast Theming to Gallery react-native-gallery#263, we added high contrast theming support to gallery. We already have a related issue open on this repo to improve the template support for High Contrast mode: Template app doesn't respect Themes/High Contrast mode #5177. This would improve the accessibility and the overall "look" of RNW apps created through our templates by default.
- Limit UIA tree to controls present on current page only: This was a tricky one and required a workaround. Because our implementations for important-for-accessibility="no-hide-descendants" and react-native-screens are both incomplete, the controls from pages previously navigated to through react-navigation remain in the UIA tree and tabIndex. Our workaround was to use
useIsFocusedhook and only display the full contents of a page when the page was in focus, otherwise we render an empty view. Work here is: Add support for importantForAccessibility="no-hide-descendants" or equivalent #5113 and Support <react-native-screens> #4152 - Improve react-navigation navigation pane accessibility: Some of the work we did to improve the accessibility of the navigation pane can be upstreamed and added into the react-navigation module itself. (add tooltip to menu expand/collapse button, add accessibilityState to expand/collapse button, remove navigation items from tabIndex when navigation pane is collapsed)