Skip to content

fix(theme): active sidebar nav link styles using aria-current under BackstageSidebar drawer#2887

Merged
lokanandaprabhu merged 1 commit intoredhat-developer:mainfrom
karthikjeeyar:theme/sidebar-links
Apr 23, 2026
Merged

fix(theme): active sidebar nav link styles using aria-current under BackstageSidebar drawer#2887
lokanandaprabhu merged 1 commit intoredhat-developer:mainfrom
karthikjeeyar:theme/sidebar-links

Conversation

@karthikjeeyar
Copy link
Copy Markdown
Member

@karthikjeeyar karthikjeeyar commented Apr 23, 2026

Hey, I just made a Pull Request!

https://redhat.atlassian.net/browse/RHDHBUGS-2981

Adds theme overrides on the BackstageSidebar drawer so the current route’s nav link (a[aria-current="page"]) uses the resolved sidebar interaction background and selected text color, with a #rhdh-sidebar-layout scope for higher specificity when that layout wrapper is used. Nested MuiTypography labels inherit the link color.

image

✔️ 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:19
@karthikjeeyar karthikjeeyar requested a review from jrichter1 April 23, 2026 09:19
@rhdh-qodo-merge
Copy link
Copy Markdown

rhdh-qodo-merge Bot commented Apr 23, 2026

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

@rhdh-gh-app
Copy link
Copy Markdown

rhdh-gh-app Bot commented Apr 23, 2026

Changed Packages

Package Name Package Path Changeset Bump Current Version
@red-hat-developer-hub/backstage-plugin-theme workspaces/theme/plugins/theme patch v0.14.2

@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

✨ Enhancement

Grey Divider

Walkthroughs

Description
• Add theme styles for active sidebar nav links using aria-current attribute
• Apply sidebar interaction background and selected text colors to active links
• Support both scoped (#rhdh-sidebar-layout) and unscoped selector variants
• Ensure nested MuiTypography labels inherit link color styling
Diagram
flowchart LR
  A["BackstageSidebar drawer styles"] -->|"add aria-current selector"| B["a[aria-current=page] styling"]
  B -->|"apply colors"| C["sidebarItemInteractionBackgroundColor"]
  B -->|"apply colors"| D["navigationSelectedColor"]
  B -->|"inherit styling"| E["MuiTypography labels"]
Loading

Grey Divider

File Changes

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

Add active nav link styling with aria-current

• Add CSS selector for active sidebar nav links using a[aria-current="page"]
• Apply sidebarItemInteractionBackgroundColor as background with !important flag
• Apply navigationSelectedColor as text color with !important flag
• Configure nested MuiTypography elements to inherit link color

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


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

Add changeset for sidebar nav link styles

• Create changeset entry for theme plugin patch version
• Document styling update for active sidebar nav links
• Reference aria-current attribute and color consistency improvements

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
Copy link
Copy Markdown
Member

@lokanandaprabhu lokanandaprabhu left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/lgtm

@openshift-ci openshift-ci Bot added the lgtm label Apr 23, 2026
@lokanandaprabhu lokanandaprabhu merged commit 54b7c9e into redhat-developer:main Apr 23, 2026
12 checks passed
lokanandaprabhu pushed a commit to lokanandaprabhu/rhdh-plugins that referenced this pull request Apr 24, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants