A11y: Add ScrollArea prop focusable for when it has static children

[Sidnioulz]

Fixes https://www.chromatic.com/test?appId=635781f3500dd2c49e189caf&id=699774e0d5f9296fd0ff61a1&panel=accessibility-panel

What I did

Fixed an a11y violation whereby scrollable areas cannot be reached via keyboard (https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI / SC 2.1.1).

Added a prop for ScrollArea letting us mark it as focusable when we know our own scrollable content is entirely static (e.g. code snippets in syntax highlighter).

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

Note

YOU MUST TEST WITH FIREFOX, NOT CHROME. Chrome makes scroll areas focusable by default.

1. Visit http://localhost:6006/?path=/story/components-scrollarea--both
2. Notice you cannot really interact with the content
3. Visit http://localhost:6006/?path=/story/components-scrollarea--focusable-both
4. Now you can tab into the scroll area and use arrow keys to navigate

Documentation

ø

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

• New Features
  • ScrollArea now supports keyboard-focusable scrollable content, allowing users to tab into scroll regions and navigate with the keyboard for improved accessibility.
  • Added interactive examples showcasing focusable ScrollArea variants: vertical, horizontal, and both (bidirectional), so users can preview and test keyboard focus behavior.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 0cb0d09

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

---

☁️ Nx Cloud last updated this comment at 2026-02-27 13:34:14 UTC

[nx-cloud]

View your CI Pipeline Execution ↗ for commit b067cf5

---

☁️ Nx Cloud last updated this comment at 2026-02-20 09:24:53 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 8b0f92b and 0cb0d09.

📒 Files selected for processing (3)

• code/core/src/components/components/ScrollArea/ScrollArea.stories.tsx
• code/core/src/components/components/ScrollArea/ScrollArea.tsx
• code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx

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

• code/core/src/components/components/ScrollArea/ScrollArea.tsx
• code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx
• code/core/src/components/components/ScrollArea/ScrollArea.stories.tsx

---

📝 Walkthrough

Walkthrough

Adds a boolean focusable prop to the ScrollArea component to enable keyboard focus on the viewport (tabIndex assignment). Adds three Storybook stories demonstrating focusable vertical, horizontal, and both orientations. Updates the syntax highlighter scroller to pass the new focusable prop.

Changes

Cohort / File(s)	Summary
ScrollArea Core code/core/src/components/components/ScrollArea/ScrollArea.tsx	Added focusable?: boolean to ScrollAreaProps; when true, sets tabIndex={0} and forwards focusable to ScrollAreaViewport to enable focus styling and keyboard focus.
ScrollArea Stories code/core/src/components/components/ScrollArea/ScrollArea.stories.tsx	Added three Storybook exports: FocusableVertical, FocusableHorizontal, and FocusableBoth, each rendering ScrollArea with focusable enabled for the respective orientation.
SyntaxHighlighter Integration code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx	Updated UnstyledScroller/ScrollArea usage to pass the focusable prop so the syntax highlighter's scroll region can receive keyboard focus.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

✨ Finishing Touches

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

---

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

[storybook-app-bot]

Package Benchmarks

^{Commit: 0cb0d09, ran on 27 February 2026 at 13:33:37 UTC}

No significant changes detected, all good. 👏

[yannbf]

LGTM! Though the focus generates a ring outline on Chrome but not on Firefox.