Skip to content

enhancement: add focus indicator to hamburger menu button #1211

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

Killian-Aidalinfo
Copy link

@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

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