UI: Show sidebar focus ring for selected item

[cyphercodes]

Closes #24186

What I did

• Keep the sidebar keyboard highlight visible when it lands on the currently selected item by adding a contrasting inset ring.
• Added a focused regression test for selected highlighted sidebar items.

AI assistance: Codex via Hermes Agent was used to prepare this PR.

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

No browser manual test was run in this environment. I verified the targeted sidebar styling behavior with the unit test and local checks below:

• yarn vitest run --config code/core/vitest.config.ts code/core/src/manager/components/sidebar/__tests__/HighlightStyles.test.tsx
• yarn --cwd code lint:js:cmd core/src/manager/components/sidebar/HighlightStyles.tsx core/src/manager/components/sidebar/__tests__/HighlightStyles.test.tsx --fix
• yarn nx compile core
• yarn nx check core
• git diff --check HEAD~1..HEAD

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Summary by CodeRabbit

• New Features

  • Selected items in the sidebar now display a visual highlight indicator for improved user feedback.

• Tests

  • Added test coverage to verify selection styling renders correctly with proper visual indicators.

[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: 14047146-7f00-4761-97fb-09806763aced

📥 Commits

Reviewing files that changed from the base of the PR and between aa4d8d8 and 51ddf4c.

📒 Files selected for processing (2)

• code/core/src/manager/components/sidebar/HighlightStyles.tsx
• code/core/src/manager/components/sidebar/__tests__/HighlightStyles.test.tsx

---

📝 Walkthrough

Walkthrough

The changes add visual selection indication to sidebar items by introducing a dedicated CSS rule with an inset box-shadow for selected elements marked with refId and itemId, accompanied by a test suite to verify the styling behavior.

Changes

Cohort / File(s)	Summary
Selection Styling and Tests code/core/src/manager/components/sidebar/HighlightStyles.tsx, code/core/src/manager/components/sidebar/__tests__/HighlightStyles.test.tsx	Added inset 2px box-shadow styling for selected sidebar items; new test suite verifies the box-shadow CSS rule is applied to selected elements via storybook theming mock.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.}

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

[github-actions]

	Fails
🚫	PR is not labeled with one of: ["ci:normal","ci:merged","ci:daily","ci:docs"]

Generated by 🚫 dangerJS against 51ddf4c

[Sidnioulz]

Thank you for your contribution! Whilst we appreciate the effort you put into your PR, there’s already another PR (#33422) addressing the same need, which we’ve started reviewing before yours.

We’d love for you to keep contributing, though! Here’s a link to [open issues without existing PRs](https://github.com/storybookjs/storybook/issues?q=is%3Aissue%20state%3Aopen%20-linked%3Apr) where your help would be greatly appreciated!