Accessibility and Testability Guide

[cvarjao]

Accessibility

Notes

• Comparing our work to accessibility guides by large successful companies like Shopify, we're doing a pretty good job with accessibility (how we're doing according to users who need accessibility features is another matter)
• They still have some neat tricks that we can make use of, one of which is autofocus: https://github.com/cds-snc/covid-alert-app/blob/main/src/shared/useAccessibilityAutoFocus.ts
• There is a lot of android-specific and ios-specific props for accessibility, you will likely have to use both in combination
• Don't use accessible={true} unless an element is interactive, as it will become focusable
• Second to accessibliityLabels, setting accessibilityRole is important, it usually gets read aloud to communicate functionality (not just for buttons)
• Setting accessibliityState would be good for use with our 'busy' button UI (the underline state)
• aria-* props are (so far) more important for react native web and aren't extensively made use of by native devices, although they do change the behavior of VoiceOver. Eg. Setting aria-hidden will make VoiceOver ignore an element and its children
• To increase touch target size you can use hitSlop on Touchable elements - this has already been done recently for all sensible Touchables in our app, but it comes up a lot in feedback that touch targets being too small causes issues
• If we want to go a little further, I think providing accessibilityHints to interactive elements could be helpful - or it might clutter things, not sure at this point. We'd have to get some feedback.
• If we want to go further still, we can access the AccessibilityInfo API in RN which provides booleans to tell us whether a screen reader is active or not, or if reduced motion is active or not. I don't have a firm example of how we would make use of the knowledge that reduced motion is active, but we could potentially adjust our content based on whether a screen reader is active

Guides

Shopify: https://www.shopify.com/ca/partners/blog/react-native-accessibility
Accessibility Specific Actions: https://medium.com/att-israel/making-your-app-accessible-with-react-native-4452cc45b95c

Extras

• Accessibility Scanner - Play Store app that is useful for getting your a11y evaluated - haven’t tried yet but looks interesting
• iOS vs Android (VoiceOver vs TalkBack) - in a 2021 survey of thousands of screen reader users, the vast majority (72%) preferred using iOS and VoiceOver compared to Android and other alternatives
• We have noticed the behaviour between VoiceOver and TalkBack varies quite a bit. For example, we have an issue that occurs on VoiceOver where content on a carousel isn't being read, but it does appear to be read on TalkBack. In these cases we suggest making VoiceOver behaviour the priority
• Manually setting accessibility focus (requires refs): https://appt.org/en/docs/react-native/samples/accessibility-focus
• To setup and test TalkBack and/or VoiceOver, see here

Test IDs

• Nested Text components won't propagate child testIDs
• Child components of Touchable* tags don't always propagate testIDs unless they have accessible={false}
• Check the maxSnapshotDepth setting of your testing framework

Jest

Mocking

When mocking hooks, make sure the return value is singleton to avoid returning a new object on every call.

Use jest.useFakeTimers() and jest.clearAllTimers()

  beforeEach(()=>{
    jest.useFakeTimers()
  })
  afterEach(()=>{
    jest.clearAllTimers()
  })