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 for improved keyboard navigation.
  • Added interactive examples demonstrating focusable ScrollArea variants: vertical, horizontal, and both (bidirectional).

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 8b0f92b

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

---

☁️ Nx Cloud last updated this comment at 2026-02-20 10:22:18 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. 🎉

---

📝 Walkthrough

Walkthrough

Adds a boolean focusable prop to the ScrollArea component to enable keyboard focus on the viewport (tabIndex assignment). Introduces three Storybook stories demonstrating focusable vertical, horizontal, and both orientations. Updates the syntax highlighter's 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, assigns tabIndex={0} to ScrollAreaViewport to make scroll content keyboard-focusable.
ScrollArea Stories code/core/src/components/components/ScrollArea/ScrollArea.stories.tsx	Added three new Storybook exports: FocusableVertical, FocusableHorizontal, and FocusableBoth, each rendering the ScrollArea with the corresponding focusable configuration.
SyntaxHighlighter Integration code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx	Updated UnstyledScroller usage to pass the focusable attribute to its ScrollArea, enabling keyboard focus within the syntax highlighter scroller.

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: 8b0f92b, ran on 20 February 2026 at 10:22:11 UTC}

No significant changes detected, all good. 👏