Skip to content

enhancement: add focus indicator to hamburger menu button#1211

Open
Killian-Aidalinfo wants to merge 1 commit intoDependencyTrack:masterfrom
Killian-Aidalinfo:master
Open

enhancement: add focus indicator to hamburger menu button#1211
Killian-Aidalinfo wants to merge 1 commit intoDependencyTrack:masterfrom
Killian-Aidalinfo:master

Conversation

@Killian-Aidalinfo
Copy link
Copy Markdown

@Killian-Aidalinfo Killian-Aidalinfo commented Mar 31, 2025

📝 Description

This change adds a visible focus indicator to the hamburger menu button (SidebarToggler) to improve keyboard accessibility. It ensures that when users navigate using the Tab key, the button receives a distinct outline, making it easier to identify which element is currently focused.


🐛 Addressed Issue

Issues 1202


🔧 Additional Details

Added the following CSS rule to apply a visible focus indicator:

.navbar-toggler:focus,
.sidebar-toggler:focus,
.c-header-toggler:focus {
  outline: 2px solid $light-blue !important;
  outline-offset: 2px;
}

This helps meet accessibility standards and provides a better experience for keyboard-only users.


Checklist

Signed-off-by: Killian-Aidalinfo <killian.stein@aidalinfo.fr>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants