UI: Fix tab navigation after closing addon panel

[Copilot]

Closes #32583

What I did

Peek.2026-03-03.16-40.webm

Testing

Manual testing

1. Open Storybook
2. Close addon panel with kb and see where focus lands
3. Open addon panel with kb and see where focus lands
4. Notice that when opening addon panel with kb, we show the region outline because we land on the region for more coherent screen reader announcements

Copilot slop

Closing the addon panel (via close button or Alt+A shortcut) left focus on the now-removed DOM element, breaking keyboard navigation entirely.

After hiding the panel, focus is now moved to the "Show addon panel" toolbar button, but only when focus was within the panel at the time of closing. If the toolbar button is unavailable, focus falls back to the start of the document. When focus is elsewhere in the app (e.g. sidebar, toolbar, preview), it is left untouched.

• layout.ts: Added showAddonPanel to focusableUIElements; added focusOnUIElement to SubAPI type; refactored focusOnUIElement to accept an options object with optional poll flag (defaults to true for backwards compatibility) and return boolean | Promise<boolean> indicating focus success
• addons.tsx: Added id="storybook-show-addon-panel" to the toolbar button
• container/Panel.tsx: toggleVisibility now calls focusOnUIElement with { poll: false } when hiding, falling back to document.body.focus() on failure; uses focusableUIElements.showAddonPanel constant
• shortcuts.ts: togglePanel shortcut handler checks if focus was within the panel before moving it; uses { poll: false } and falls back to document.body.focus()
• layout.test.ts: Added 10 unit tests for focusOnUIElement covering all code paths (no elementId, immediate focus, select options, poll/no-poll, polling success/timeout)

Manual testing

Prerequisites: Run yarn storybook:ui and open the Storybook UI in a browser.

Test 1 – Close addon panel via close button, focus moves to toolbar button

1. Open the Storybook UI with the addon panel visible (default state).
2. Using the keyboard (Tab), navigate to the "Hide addon panel" close button (✕) in the addon panel header.
3. Press Enter or Space to close the addon panel.
4. Verify that focus moves to the "Show addon panel" button in the toolbar.
5. Press Tab and verify that keyboard navigation continues normally from the toolbar.

Test 2 – Close addon panel via keyboard shortcut while focus is in the panel

1. Open the Storybook UI with the addon panel visible.
2. Using the keyboard, navigate to any element inside the addon panel (e.g. an addon tab, the close button, the position toggle button).
3. Press the keyboard shortcut to toggle the panel (default: A).
4. Verify that focus moves to the "Show addon panel" button in the toolbar.
5. Press Tab and verify that keyboard navigation continues normally.

Test 3 – Toggle panel via keyboard shortcut while focus is outside the panel

1. Open the Storybook UI with the addon panel visible.
2. Click on the sidebar (or any element outside the addon panel) to place focus there.
3. Press the keyboard shortcut to toggle the panel (A).
4. Verify that focus does not move — it stays wherever it was before (e.g. in the sidebar).
5. Press Tab and verify that keyboard navigation continues normally from the current focus position.

Test 4 – Re-open addon panel after closing

1. Close the addon panel using any method (close button or shortcut).
2. Verify the "Show addon panel" button appears in the toolbar.
3. Click or activate the "Show addon panel" button.
4. Verify the addon panel re-opens and functions normally.
5. Verify keyboard navigation works correctly with the panel re-opened.

Test 5 – Toggle panel shortcut when panel is already hidden

1. Close the addon panel so it is hidden.
2. Press the keyboard shortcut (A) to toggle the panel.
3. Verify the panel opens and focus is not unexpectedly moved.
4. Press Tab and verify keyboard navigation works normally.

Test 6 – Existing search shortcut still works

1. Press the search shortcut (default: /) to focus the search field.
2. Verify that the search field receives focus and the select behavior works (text is selected).
3. Press Escape to close search, then press / again — verify polling still works for the search field focus.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Bug]: Tab navigation is broken after closing the addon panel</issue_title>
<issue_description>### Describe the bug

screenshare_-_2025-09-30_2_50_45_pm.mp4

We should address this by repositioning focus (at the start of the toolbar? start of the page? on the button in the toolbar for showing the toolbar?) and/or actually removing the panel instead of hiding it.

Reproduction link

yarn storybook:ui

Reproduction steps

1. Go to the close addon panel button with kb
2. Close the panel
3. Press tab

System

SB 9 and 10

Additional context

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

@Sidnioulz > [@Sidnioulz](https://github.com/Sidnioulz) , can i work on this issue?

We don't assign issues, but you're free to start working on it on your own. See https://storybook.js.org/docs/contribute/code to get started.

Please refrain from pinging people on multiple tickets at the same time too. This causes a bit of email spam for the issue authors and the team. Thanks!</comment_new>
<comment_new>@Sidnioulz
Note that for this one, we haven't actually decided where focus should land when the addon panel is closed. My first guess would be to target the toolbar button that reopens it, and if the toolbar is also closed, to target the start of the document.</comment_new>

• Fixes [Bug]: Tab navigation is broken after closing the addon panel #32583

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

Summary by CodeRabbit

• New Features

  • Improved keyboard focus management with programmatic focus (retry and select options) and two new focus targets for the addon panel and its toggle.
  • Landmark focus animation to highlight regions during keyboard navigation.
  • Panel visibility now requires actual panel content before showing.

• Bug Fixes

  • Restores focus after toggling addon panels, falling back to document focus if needed.

• Tests

  • Added comprehensive tests for focus, polling, and timeout scenarios.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit f3a369e

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

---

☁️ Nx Cloud last updated this comment at 2026-03-04 11:05:37 UTC

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 787a74c

---

☁️ Nx Cloud last updated this comment at 2026-03-03 10:13:27 UTC

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 787a74c

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	⏳ In Progress	...	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-03-03 10:24:35 UTC

[Sidnioulz]

@copilot give a comprehensive list of manual testing steps in the PR description under heading "#### Manual testing"; this is a mandatory CI requirement