UI: Fix global shortcuts not showing region focus indicator

[Sidnioulz]

What I did

Follow up on issue found in 10.3 QA: the focus indicator for sidebars and addon panels showed when pressing their respective "show sidebar/panel" buttons but not when using the global keyboard shortcuts.

Checklist for Contributors

Manual testing

• Close the sidebar and addon panel
• Press Alt+A or Alt+S (note that these don't work when focus is inside the preview)

🦋 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

• Chores
  • Improved focus management when toggling addon panels and navigation sidebars for more reliable & consistent focus restoration and fallbacks.
  • Made keyboard activation explicitly focus UI regions while clicks focus controls, improving accessibility and predictability.
  • Removed landmark-animation orchestration in favor of direct, poll-enabled focus control for simpler, more deterministic behavior.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 70bb0c9

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,lint,fmt...	✅ Succeeded	10m 23s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-04-01 09:23:17 UTC

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b02f29d4-419f-486c-a2a7-6e143c8878cc

📥 Commits

Reviewing files that changed from the base of the PR and between 1a1596e and 70bb0c9.

📒 Files selected for processing (1)

• code/core/src/manager/components/preview/tools/menu.tsx

---

📝 Walkthrough

Walkthrough

Refactors focus-control: replaces landmark-animation callbacks with explicit boolean forceFocus parameters in menu/addons, updates panel root ID to use focusableUIElements.storyPanelRoot, and adds polling-plus-fallback focus restoration after toggling addon panel and navigation in shortcuts.

Changes

Cohort / File(s)	Summary
Focus Control Refactor (menu & addons) code/core/src/manager/components/preview/tools/addons.tsx, code/core/src/manager/components/preview/tools/menu.tsx	Changed showPanel/showSidebar signatures from optional landmark-animation callbacks to forceFocus: boolean; removed landmark animation hook usage; call api.focusOnUIElement(..., { forceFocus, poll: true }) and wire click/key handlers to pass explicit booleans.
Panel root ID code/core/src/manager/components/panel/Panel.tsx	Replaced hardcoded "storybook-panel-root" id with dynamic focusableUIElements.storyPanelRoot value to identify the panel root element.
Shortcuts: focus restoration code/core/src/manager-api/modules/shortcuts.ts	After toggling addon panel or navigation, attempt to restore focus using focusOnUIElement with polling and, when needed, fall back to focusing the document body; adjust logic based on previous visibility and current focus target.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant Shortcuts
  participant ManagerAPI
  participant UIElement

  User->>Shortcuts: toggle addon panel / nav
  Shortcuts->>ManagerAPI: api.togglePanel() / api.toggleNav()
  ManagerAPI-->>Shortcuts: toggled (wasShown flag)
  Shortcuts->>ManagerAPI: focusOnUIElement(target, {forceFocus?, poll: true})
  ManagerAPI->>UIElement: attempt focus
  alt focus succeeded
    UIElement-->>ManagerAPI: focused
  else focus failed (timeout)
    ManagerAPI->>UIElement: focus(document.body) fallback
  end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• UI: Use correct selector for addon panel focus check #34164: Modifies focus-detection logic in shortcuts.ts, overlapping with the new polling/fallback focus behavior.
• A11y: Make resize handles for addon panel and sidebar accessible #33980: Touches focus/landmark handling and focusable UI element IDs used by Panel and tools.
• UI: Fix tab navigation after closing addon panel #33971: Changes focus-restoration flow for the addon panel across shortcuts and UI components.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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

[coderabbitai]

🧹 Nitpick comments (1)

code/core/src/manager/components/preview/tools/menu.tsx (1)

23-25: Remove stale commented animation code.

The commented legacy block is no longer part of the flow and can be dropped to keep this mapper easier to read.

🤖 Prompt for AI Agents

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

In `@code/core/src/manager/components/preview/tools/menu.tsx` around lines 23 -
25, Remove the stale commented animation block in menu.tsx: delete the
three-line commented code that references animateLandmark and
document.getElementById(focusableUIElements.sidebarRegion) so the mapper is
cleaner and no legacy animation code remains (search for animateLandmark and
focusableUIElements.sidebarRegion to locate the commented block).

🤖 Prompt for all review comments with AI agents

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

Nitpick comments:
In `@code/core/src/manager/components/preview/tools/menu.tsx`:
- Around line 23-25: Remove the stale commented animation block in menu.tsx:
delete the three-line commented code that references animateLandmark and
document.getElementById(focusableUIElements.sidebarRegion) so the mapper is
cleaner and no legacy animation code remains (search for animateLandmark and
focusableUIElements.sidebarRegion to locate the commented block).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fd4dfb28-0936-4b6d-8879-d80f568a96a6

📥 Commits

Reviewing files that changed from the base of the PR and between 8e95824 and 1a1596e.

📒 Files selected for processing (4)

• code/core/src/manager-api/modules/shortcuts.ts
• code/core/src/manager/components/panel/Panel.tsx
• code/core/src/manager/components/preview/tools/addons.tsx
• code/core/src/manager/components/preview/tools/menu.tsx

[Copilot]

Pull request overview

Fixes missing region focus indication when toggling the sidebar/addon panel via global keyboard shortcuts by ensuring focus is moved to the appropriate landmark/region elements.

Changes:

• Update preview toolbar “show sidebar/panel” actions to conditionally force focus based on input modality.
• Align addon panel root element ID with focusableUIElements.storyPanelRoot.
• Add focus targeting to the global shortcuts handlers when opening the sidebar/panel.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
code/core/src/manager/components/preview/tools/menu.tsx	Adjusts sidebar toggle to optionally force-focus the sidebar region for keyboard activation.
code/core/src/manager/components/preview/tools/addons.tsx	Adjusts addon panel toggle to optionally force-focus the panel region for keyboard activation.
code/core/src/manager/components/panel/Panel.tsx	Uses the shared focusableUIElements.storyPanelRoot constant for the panel root ID.
code/core/src/manager-api/modules/shortcuts.ts	Ensures opening sidebar/panel via shortcuts focuses the corresponding region to surface the focus indicator.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.