Repository navigation
fix(ui): label the full UI's controls for screen readers and test tools - #975
Merged
dannyhw merged 4 commits intoNov 14, 2026
Merged
Conversation
The full on-device UI exposed most of its icon-only controls without an
accessible name, so VoiceOver and TalkBack announced them as unlabelled
buttons and UI automation tools that select elements by accessibility
label, such as Appium, could not find them. The lite UI already labels
the same controls.
Give the full UI the same names and roles as the lite UI:
- the desktop sidebar toggle ("Close sidebar" / "Open sidebar"), the
desktop "Open addons panel" button, and the mobile story list button
("Open story list")
- the fullscreen button, labelled by what pressing it does ("Enter
fullscreen" / "Exit fullscreen")
- the search clear button ("Clear search"), each search result (its
name and path), and the "Clear recently opened" button
- a brand logo or title that links to `brand.url`, as a link
- the story tree's root, group, component and story rows as buttons
On top of what the lite UI has, the search field gets the name web
Storybook gives it ("Find components") and the selected story row is
marked as selected.
The "expand all" button on each root was labelled "Expand" when the
root was fully expanded and pressing it would collapse everything, and
"Collapse" when pressing it would expand. Label it "Collapse all" /
"Expand all" by what it does, as web Storybook does, in both UIs.
The tests render the layout and query it by role and name, the way
assistive tech and test tools see it, on mobile and desktop widths.
Refs storybookjs#153
🦋 Changeset detectedLatest commit: 5943116 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Codex Review Summary: ❌ FailedThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
Member
|
just want to call out that most actions in the app can be controlled via rest/websocket requests or via the mcp, though no issue with adding labels |
… lite search field The story list button's "Open story list" label replaces its visible story path on iOS, so expose the open story as the button's accessibility value in both UIs. Label the lite UI's search input "Find components" to match the full UI.
On Android, React Native appends accessibilityValue.text to the content description, so the button was exposed as "Open story list, <story>" and an exact "Open story list" selector stopped matching. Android already exposes the button's visible text as a child node, so the value is only needed on iOS, where the label replaces the text.
Member
|
Thanks! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue: #153
What I did
Most of the full on-device UI's icon-only controls had no accessible name. VoiceOver and TalkBack read them as unlabelled buttons, and UI automation tools that find elements by accessibility label, like Appium (the use case in #153), couldn't target them. The lite UI already labels the same controls, so this gives
@storybook/react-native-uithe same names and roles. The strings are the lite UI's, so selectors work in both UIs.brand.urlis exposed as a link named afterbrand.title.react-native-ui-lite.No visual changes.
Tests:
packages/react-native-ui/src/accessibility.test.tsxrenders the layout and queries it by role and name, the way assistive tech and test tools see it. It covers mobile and desktop widths, the search flow, the expand all label and the logo. All 8 tests fail without the source changes. I put them in a new file instead of aLayout.test.tsxso they don't conflict with #968.Changeset: patch for
@storybook/react-native-uiand@storybook/react-native-ui-lite.How to test
I ran the
react-native-uijest suite (3 suites, 14 tests),check:typesforreact-native-uiandreact-native-ui-lite, and ESLint and Prettier on the changed files.On device, run
pnpm examplewith the full UI and turn on VoiceOver or TalkBack. The bottom bar's menu button reads "Open story list", the fullscreen button reads "Enter fullscreen" and then "Exit fullscreen", and story rows read as buttons, with the open story marked as selected. Appium can now select these controls by accessibility id.