react-native-paper icon indicating copy to clipboard operation
react-native-paper copied to clipboard

Published 20 hours ago • verified publisher icon callstack

fix(fab.group): subitems are accessibility focusable when collapsed

Open personalizedrefrigerator opened this issue 1 year ago • 1 comments

Motivation

Goal: Improve the accessibility of the FAB.Group component by preventing hidden items from being focused.

Related issue

Previously, FAB.Group items were accessibility focusable even when the menu was collapsed:

https://github.com/user-attachments/assets/5351d2b2-a777-4a07-b265-b090dc83356c

Note: This only fixes the issue on Android and iOS. A similar issue persists on web.

Test plan

iOS:

  1. Open the example app in the simulator.
  2. Open the "Floating Action Button" example.
  3. Enable VoiceOver system-wide.
  4. Move VoiceOver focus to the simulator.
  5. Move VoiceOver focus to the next item. Verify that the item is not a hidden member of the FAB.Group.
  6. Repeat step 5 until focus is on the "+" FAB.
  7. Activate the current item.
  8. Move VoiceOver focus to the next item until the floating calendar FAB has focus. Verify that the menu items ("unlabeled", "star", "email", "remind", toggle on long press") each are focusable.
    • Note: VoiceOver will focus items not in the FAB.Group menu during this step. This is a separate issue.

Screen recording:

https://github.com/user-attachments/assets/d910b88c-e18a-49bc-9726-234aeb71d0fe

Note: The above screen recording also uses Expo SDK 51 (I was having trouble deploying the example with SDK 48).

personalizedrefrigerator avatar Sep 17 '24 23:09 personalizedrefrigerator

Hey @personalizedrefrigerator, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

callstack-bot avatar Sep 17 '24 23:09 callstack-bot