CLI: Fix React native web A11y issues

[jonniebigodes]

Closes #33936

What I did

With this pull request, the examples provided with the React Native web framework were updated to fix the outstanding A11y issues.

What was done:

• Adjusted the React Native Web examples for both JS and TS variants

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

N/A

Caution

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• Style
  • Primary buttons updated with a new accent background for improved contrast.
  • Secondary buttons now use darker text for better readability.
  • Links receive an underline and a deeper blue color for clearer affordance.
  • Tip text color adjusted to align with the refreshed link and button palette.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit af68e35

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	❌ Failed	6m 33s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-02-25 20:02:00 UTC

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e864cee and af68e35.

📒 Files selected for processing (2)

• code/frameworks/react-native-web-vite/template/cli/js/Button.jsx
• code/frameworks/react-native-web-vite/template/cli/ts/Button.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

• code/frameworks/react-native-web-vite/template/cli/js/Button.jsx
• code/frameworks/react-native-web-vite/template/cli/ts/Button.tsx

---

📝 Walkthrough

Walkthrough

Color and decoration style updates in React Native Web Vite template files: primary Button color changed, secondary Button text color added, link color changed and underline added, and tip text color updated. No API, prop, or control flow changes.

Changes

Cohort / File(s)	Summary
Button Styling Updates code/frameworks/react-native-web-vite/template/cli/js/Button.jsx, code/frameworks/react-native-web-vite/template/cli/ts/Button.tsx	Primary button background color changed from #1ea7fd to #555ab9. Secondary button style now includes text color #333. Changes are purely visual.
Page Link and Tip Styling Updates code/frameworks/react-native-web-vite/template/cli/js/Page.jsx, code/frameworks/react-native-web-vite/template/cli/ts/Page.tsx	Link color updated from #1ea7fd to #1a237e and textDecorationLine: 'underline' added. Tip text color changed from #66bf3c to #1a237e.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@code/frameworks/react-native-web-vite/template/cli/js/Button.jsx`:
- Around line 41-42: Remove text-only properties from View/TouchableOpacity
style objects: delete fontWeight and lineHeight from styles.button and remove
color from styles.secondary because React Native applies those only to Text;
keep text formatting in styles.buttonText (which already contains the proper
fontWeight/lineHeight/color). Update the style definitions where styles.button,
styles.secondary are declared so only layout/background/border/padding/etc.
remain on View/TouachableOpacity and all text-related styling remains in
styles.buttonText.

In `@code/frameworks/react-native-web-vite/template/cli/ts/Button.tsx`:
- Around line 55-56: Move text-only style props currently applied to View styles
into the Text style: remove fontWeight and lineHeight from the button View style
and add them to the component's Text style (the Text style defined alongside the
Button styles), and remove color from the secondary View style and ensure that
color is defined on secondaryText instead (it already exists there—move/merge
the value). Update the StyleSheet entries for button, secondary, secondaryText
and the Text style accordingly so only ViewStyle props remain on Views and
TextStyle props on Text.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2a47ef9 and e864cee.

📒 Files selected for processing (4)

• code/frameworks/react-native-web-vite/template/cli/js/Button.jsx
• code/frameworks/react-native-web-vite/template/cli/js/Page.jsx
• code/frameworks/react-native-web-vite/template/cli/ts/Button.tsx
• code/frameworks/react-native-web-vite/template/cli/ts/Page.tsx