Core: Fix testing widget focus outline#33172
Conversation
…listWidget and to fix focus outline issues
📝 WalkthroughWalkthroughAdds an ActionList Toggle variant and exposes it as Changes
Sequence Diagram(s)sequenceDiagram
participant Widget as Sidebar Widget UI
participant AL as ActionList (Button / Toggle)
participant Run as RunButton
participant App as App logic
Note right of AL: New public member: ActionList.Toggle
Widget->>AL: render Button / Toggle (props: padding,size,variant,ref)
AL-->>Widget: styled control (focus, padding, size, variant)
Widget->>Run: click RunButton (event)
Run->>Run: event.stopPropagation()
Run->>App: onRunAll()
App-->>Run: run state (isRunning)
Run-->>Widget: update UI (disabled / icon / tooltip)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
✨ Finishing touches
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
code/core/src/components/components/ActionList/ActionList.tsx(3 hunks)code/core/src/manager/components/sidebar/ChecklistWidget.tsx(5 hunks)code/core/src/manager/components/sidebar/TestingWidget.tsx(5 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use camelCase for variable and function names
Files:
code/core/src/manager/components/sidebar/ChecklistWidget.tsxcode/core/src/manager/components/sidebar/TestingWidget.tsxcode/core/src/components/components/ActionList/ActionList.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Enable TypeScript strict mode
Export functions from modules for testing purposes
Files:
code/core/src/manager/components/sidebar/ChecklistWidget.tsxcode/core/src/manager/components/sidebar/TestingWidget.tsxcode/core/src/components/components/ActionList/ActionList.tsx
**/*.{ts,tsx,js,jsx,json,html,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx,json,html,mjs}: Use ESLint and Prettier for code style enforcement
Run 'yarn prettier --write ' to format code after making changes
Run 'yarn lint:js:cmd ' to check for ESLint issues after making changes
Files:
code/core/src/manager/components/sidebar/ChecklistWidget.tsxcode/core/src/manager/components/sidebar/TestingWidget.tsxcode/core/src/components/components/ActionList/ActionList.tsx
code/**/!(*.test).{ts,tsx,js,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
code/**/!(*.test).{ts,tsx,js,mjs}: Use 'logger' from 'storybook/internal/node-logger' for server-side (Node.js) logging, not console.log/console.warn/console.error
Use 'logger' from 'storybook/internal/client-logger' for client-side (browser) logging, not console.log/console.warn/console.error
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/src/manager/components/sidebar/ChecklistWidget.tsxcode/core/src/manager/components/sidebar/TestingWidget.tsxcode/core/src/components/components/ActionList/ActionList.tsx
🧠 Learnings (5)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
📚 Learning: 2025-11-05T09:36:55.944Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
Applied to files:
code/core/src/manager/components/sidebar/ChecklistWidget.tsxcode/core/src/manager/components/sidebar/TestingWidget.tsxcode/core/src/components/components/ActionList/ActionList.tsx
📚 Learning: 2025-11-25T11:09:33.788Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 33140
File: code/core/src/manager/components/sidebar/TagsFilter.tsx:247-259
Timestamp: 2025-11-25T11:09:33.788Z
Learning: In the storybookjs/storybook repository, PopoverProvider creates popovers with a dialog role, so using aria-haspopup="dialog" on buttons that trigger PopoverProvider is semantically correct.
Applied to files:
code/core/src/manager/components/sidebar/ChecklistWidget.tsx
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Applied to files:
code/core/src/manager/components/sidebar/TestingWidget.tsx
📚 Learning: 2025-11-05T09:37:25.920Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
Applied to files:
code/core/src/manager/components/sidebar/TestingWidget.tsx
🧬 Code graph analysis (3)
code/core/src/manager/components/sidebar/ChecklistWidget.tsx (1)
code/core/src/components/components/ActionList/ActionList.tsx (1)
ActionList(178-199)
code/core/src/manager/components/sidebar/TestingWidget.tsx (2)
code/core/src/components/components/ActionList/ActionList.tsx (1)
ActionList(178-199)code/core/src/manager/components/sidebar/StatusButton.tsx (1)
StatusButton(87-89)
code/core/src/components/components/ActionList/ActionList.tsx (1)
code/core/src/components/index.ts (1)
ToggleButton(58-58)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (14)
code/core/src/components/components/ActionList/ActionList.tsx (5)
7-7: LGTM!The ToggleButton import follows the established pattern and is necessary for the new Toggle variant.
93-98: LGTM!The focus outline fix mirrors the existing StyledButton pattern and correctly prevents the outline from being clipped by
overflow: hiddenin parent containers.
100-107: LGTM!The prop spreading order correctly ensures that the destructured defaults for
variant,padding,size, andreftake precedence after applying their default values.
109-116: LGTM!ActionListToggle follows the same pattern as ActionListButton with consistent defaults and prop handling.
193-193: LGTM!The Toggle export is correctly added to the ActionList API, making it available as
ActionList.Toggle.code/core/src/manager/components/sidebar/ChecklistWidget.tsx (3)
149-172: LGTM!The rename from
OpenGuideActiontoOpenGuideButtonand the migration toActionList.Buttonaligns with the new ActionList primitives. The accessibility label is properly set per coding conventions.Based on learnings, ariaLabel is correctly provided as a descriptive string for the button.
211-212: LGTM!The OpenGuideButton usages are updated consistently, preserving the Optional pattern for responsive text display.
236-238: LGTM!The OpenGuideButton usage within the popover is correctly updated with the
afterClickcallback.code/core/src/manager/components/sidebar/TestingWidget.tsx (6)
1-9: LGTM!The expanded React imports are necessary for the new RunButton component's type definitions.
12-12: LGTM!The import changes correctly reflect the migration from standalone Button to ActionList-based primitives.
72-78: LGTM!The CollapseToggle migration to
ActionList.Buttonpreserves the existing styling and behavior.
270-274: LGTM!The RunButton usages correctly implement the Optional pattern for responsive text display, with proper prop passing.
339-351: LGTM!The clear statuses button is correctly migrated to
ActionList.Buttonwith proper accessibility labels for the icon-only button.Based on learnings, ariaLabel is correctly provided as a descriptive string for the icon-only button.
105-133: The original review comment is incorrect.The
StatusButtoncomponent correctly uses thepressedprop. TheToggleButtonPropsinterface explicitly definespressed: booleanas the official prop name for controlling toggle state. The ToggleButton component implementation expects this prop, and ActionList.Toggle inherits this interface. The code is using the intended prop name.Likely an incorrect or invalid review comment.
|
View your CI Pipeline Execution ↗ for commit 9477e23
☁️ Nx Cloud last updated this comment at |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
code/core/src/manager/components/sidebar/TestingWidget.tsx (1)
1-9: ActionList-based controls (collapse, run, status) are wired correctly
- Imports (React types/hooks,
ActionList,Card) match actual usage with no leakage.CollapseToggleasActionList.Buttonwith opacity 0 plus hover/focus override keeps the “only show chevron on hover” behavior while remaining visible when focused, which is important for keyboard users.RunButtoncleanly wrapsActionList.Button:isRunningdrivesdisabled, ariaLabel, and tooltip, and theonClickhandler stops propagation before callingonRunAll, so it won’t accidentally toggle the panel.StatusButtonbuilt onActionList.Togglewithpressedandstatus-based styling, plusoutlineOffset: -2, is consistent with the new ActionList focus treatment and avoids focus outlines being clipped inside the overflow-hidden bar.I don’t see any functional or typing issues here; the changes align well with the stated focus-outline fix and a11y patterns.
Also applies to: 12-13, 72-79, 80-103, 105-133
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
code/core/src/components/components/ActionList/ActionList.tsx(3 hunks)code/core/src/manager/components/sidebar/TestingWidget.tsx(5 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use camelCase for variable and function names
Files:
code/core/src/manager/components/sidebar/TestingWidget.tsxcode/core/src/components/components/ActionList/ActionList.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Enable TypeScript strict mode
Export functions from modules for testing purposes
Files:
code/core/src/manager/components/sidebar/TestingWidget.tsxcode/core/src/components/components/ActionList/ActionList.tsx
**/*.{ts,tsx,js,jsx,json,html,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx,json,html,mjs}: Use ESLint and Prettier for code style enforcement
Run 'yarn prettier --write ' to format code after making changes
Run 'yarn lint:js:cmd ' to check for ESLint issues after making changes
Files:
code/core/src/manager/components/sidebar/TestingWidget.tsxcode/core/src/components/components/ActionList/ActionList.tsx
code/**/!(*.test).{ts,tsx,js,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
code/**/!(*.test).{ts,tsx,js,mjs}: Use 'logger' from 'storybook/internal/node-logger' for server-side (Node.js) logging, not console.log/console.warn/console.error
Use 'logger' from 'storybook/internal/client-logger' for client-side (browser) logging, not console.log/console.warn/console.error
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/src/manager/components/sidebar/TestingWidget.tsxcode/core/src/components/components/ActionList/ActionList.tsx
🧠 Learnings (4)
📓 Common learnings
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
📚 Learning: 2025-11-05T09:36:55.944Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
Applied to files:
code/core/src/manager/components/sidebar/TestingWidget.tsxcode/core/src/components/components/ActionList/ActionList.tsx
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Applied to files:
code/core/src/manager/components/sidebar/TestingWidget.tsx
📚 Learning: 2025-11-05T09:37:25.920Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
Applied to files:
code/core/src/manager/components/sidebar/TestingWidget.tsx
🧬 Code graph analysis (2)
code/core/src/manager/components/sidebar/TestingWidget.tsx (2)
code/core/src/components/components/ActionList/ActionList.tsx (1)
ActionList(178-199)code/core/src/manager/components/sidebar/StatusButton.tsx (1)
StatusButton(87-89)
code/core/src/components/components/ActionList/ActionList.tsx (1)
code/core/src/components/index.ts (1)
ToggleButton(58-58)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
🔇 Additional comments (2)
code/core/src/components/components/ActionList/ActionList.tsx (1)
7-8: ActionList.Toggle + focus styling and prop forwarding look solidThe new
StyledToggleButtonmirrors theStyledButtonfocus-visible handling, and bothActionListButtonandActionListTogglecorrectly forward props while enforcing defaultvariant,padding, andsize. ExposingToggleonActionListkeeps the API coherent withButton. No issues from my side here.Also applies to: 93-99, 100-107, 109-116, 193-194
code/core/src/manager/components/sidebar/TestingWidget.tsx (1)
270-275: RunButton usages and “clear statuses” action look consistent; please sanity‑check keyboard focus
- The
Optionalusage ofRunButton(text + icon when there’s space, icon-only fallback) keeps a stableariaLabel/tooltip and reuses the same behavior surface, which is good.- The
clear-statusescontrol now usingActionList.Buttonwith an icon child and explicitariaLabel, plusdisabled={isRunning}andstopPropagation()inonClick, matches the patterns used for the other actions and avoids accidental collapse toggling.Given the PR’s goal, I’d recommend a quick manual pass with keyboard-only navigation (tabbing through Run, collapse, status filters, and clear-statuses in both collapsed/expanded states) to confirm all focus outlines are visible and not clipped.
Also applies to: 339-352
2 participants
What I did
Use ActionList components in TestingWidget for consistency with ChecklistWidget and to fix focus outline issues.
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake 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/coreteam 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
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.