Skip to content

Story list is missing from the iOS accessibility tree (bottom sheet collapses it into one element) #942

Open

Description

@dannyhw

Describe the bug

On iOS the on-device story list (search field and the whole story tree) is missing from the accessibility tree. With the sidebar sheet open, an XCTest/Appium/VoiceOver snapshot only shows a single opaque "Bottom Sheet" element where the list is, so VoiceOver can't read the stories and UI automation can't select one by label (you need initialSelection, deep links or coordinate taps).

The story list is rendered in @gorhom/bottom-sheet's BottomSheet in packages/react-native-ui/src/MobileMenuDrawer.tsx. BottomSheet defaults to accessible={true} (with accessibilityLabel="Bottom Sheet", accessibilityRole="adjustable") on its content container, and on iOS an accessible view is a single accessibility element that hides its children. The addons panel (MobileAddonsPanel.tsx) already opts out with accessible={false}; the story list sheet doesn't.

To Reproduce

  1. Any app using the default @storybook/react-native-ui (here: RN 0.88, @storybook/react-native 10.7.0, @gorhom/bottom-sheet 5.2.14) on an iOS simulator.
  2. Tap the story title in the bottom bar to open the story list.
  3. Take an accessibility snapshot (e.g. agent-device snapshot, Xcode Accessibility Inspector or Appium).

Snapshot with the list open (abridged):

@e1 [application] "NitroUiExample"
  @e2 [button] "Bottom sheet backdrop"
  @e3 [other] "Bottom sheet handle"
  @e4 [other] "Bottom Sheet"
  @e5 [other] "Bottom Sheet"
  @e6 [other] "button--appearances"     <- the story preview
  ...
  @e24 [other] "Button/Appearances"     <- bottom bar

No search field and no story rows.

Expected behavior

The search field and story rows are individual accessibility elements. Passing accessible={false} to that BottomSheet (same as the addons panel) does it. With that one prop the same snapshot shows the text field and every row ("Button", "Appearances", "Playground", ...), and tapping a row via its accessibility element selects the story.

System:

  • @storybook/react-native / @storybook/react-native-ui 10.7.0 (same code on next)
  • @gorhom/bottom-sheet 5.2.14, React Native 0.88.0 (new architecture)
  • iOS 27 simulator (iPhone Air). Android exposes the rows already.

Related: #153 (older, broader request for accessibility/Appium support in the v6 UI).

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions