Skip to content

[releae-1.9]fix(theme): active sidebar nav link styles using aria-current under BackstageSidebar drawer#2889

Merged
karthikjeeyar merged 1 commit into
workspace/themefrom
theme-1.9-backport
Apr 23, 2026
Merged

[releae-1.9]fix(theme): active sidebar nav link styles using aria-current under BackstageSidebar drawer#2889
karthikjeeyar merged 1 commit into
workspace/themefrom
theme-1.9-backport

Conversation

@karthikjeeyar

@karthikjeeyar karthikjeeyar commented Apr 23, 2026

Copy link
Copy Markdown
Member

Hey, I just made a Pull Request!

✔️ Checklist

  • A changeset describing the change and affected packages. (more info)
  • Added or Updated documentation
  • Tests for new functionality and regression tests for bug fixes
  • Screenshots attached (for UI changes)

@karthikjeeyar karthikjeeyar requested review from a team, ciiay and logonoff as code owners April 23, 2026 09:33
@karthikjeeyar karthikjeeyar requested review from Eswaraiahsapram and removed request for a team April 23, 2026 09:33
@rhdh-qodo-merge

rhdh-qodo-merge Bot commented Apr 23, 2026

Copy link
Copy Markdown

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Grey Divider

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

Grey Divider

Qodo Logo

@sonarqubecloud

Copy link
Copy Markdown

@rhdh-qodo-merge

Copy link
Copy Markdown

Review Summary by Qodo

Style active sidebar nav links with aria-current attribute

🐞 Bug fix ✨ Enhancement

Grey Divider

Walkthroughs

Description
• Add CSS styles for active sidebar navigation links using aria-current="page" attribute
• Apply selected navigation colors to active links in BackstageSidebar drawer
• Ensure active link typography inherits parent color styling
• Add changeset documenting patch version update
Diagram
flowchart LR
  A["BackstageSidebar drawer"] -->|"add aria-current selector"| B["a[aria-current=page] styles"]
  B -->|"apply colors"| C["sidebarItemInteractionBackgroundColor"]
  B -->|"apply colors"| D["navigationSelectedColor"]
  C -->|"match"| E["Selected nav appearance"]
  D -->|"match"| E
Loading

Grey Divider

File Changes

1. workspaces/theme/plugins/theme/src/utils/createComponents.ts ✨ Enhancement +9/-0

Add aria-current active link styling

• Add CSS selector for a[aria-current="page"] elements in drawer
• Apply background color using sidebarItemInteractionBackgroundColor with !important
• Apply text color using navigationSelectedColor with !important
• Ensure nested MuiTypography components inherit parent color

workspaces/theme/plugins/theme/src/utils/createComponents.ts


2. workspaces/theme/.changeset/loud-glasses-perform.md 📝 Documentation +5/-0

Add changeset for active link styling

• Create new changeset file for patch version update
• Document styling fix for active sidebar navigation links
• Reference matching selected colors with navigation shell

workspaces/theme/.changeset/loud-glasses-perform.md


Grey Divider

Qodo Logo

@rhdh-qodo-merge rhdh-qodo-merge Bot added enhancement New feature or request Bug fix labels Apr 23, 2026
@karthikjeeyar karthikjeeyar merged commit 728c50f into workspace/theme Apr 23, 2026
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant