Floating Action Button Accessibility

Development
,
1

Background:
At present, the mobile app is not navigable with TalkBack on Android. The invisible sidebar steals focus when using "explore with touch", labels are missing, it's difficult to get to the 'save' button after changing settings. See #6615 for a more complete description of the issues I'm noticing.

Floating Action Button Issues

Currently, the library we use for floating action buttons, react-native-action-button, is not very accessible when working with sub-menus:

Note that this video is with PR #6616 applied.

These are the issues I've noticed:

  • (0:09): Navigating forward after opening the submenu does not bring me to the first item in the submenu.
  • (0:15) Both buttons in the sub-menus and their labels are focusable. As such, each menu item has two corresponding actions with the same label. This makes navigation more inefficient.
    • I don't see a way to mark the labels as accessibilityElementsHidden=true and importantForAccessibility=no (to make the screen reader skip them) without modifying the library.
  • (0:30): After opening the menu by tapping on the + button, no announcement is made. Users of screen readers should be notified of changes to the application state (e.g. by calling AccessibilityInfo.announceForAccessibility).
  • (0:34) The accessibilityLabel for the menu's open/close button doesn't change when the menu opens/closes.
    • I don't see a simple way to determine whether the menu is currently open/closed.
    • I expect to know whether pressing the button will open or close the menu without navigating to the previous/next item.

The last commit to react-native-action-button was in January 2020. As such, there are several ways we could solve this problem:

  • Wait for the issue to be fixed upstream.
  • Fork react-native-action-button and fix the accessibility issues.
  • Find a different library (perhaps this libarary (which I haven't tested and may be unmaintained)).
  • Write a custom Component.

I think I prefer forking react-native-action-button and fixing the accessibility issues (and using the fork).

1 Like