Skip to content

layouts: add accessible name to mobile navigation button - #56937

Open
LibenHailu wants to merge 1 commit into
kubernetes:mainfrom
LibenHailu:fix-a11y-hamburger-darkmode
Open

layouts: add accessible name to mobile navigation button#56937
LibenHailu wants to merge 1 commit into
kubernetes:mainfrom
LibenHailu:fix-a11y-hamburger-darkmode

Conversation

@LibenHailu

@LibenHailu LibenHailu commented Aug 11, 2026 •
edited
Loading

Copy link
Copy Markdown

What this PR does / why we need it

Adds aria-label and aria-expanded attributes to the #hamburger mobile navigation button in
layouts/partials/navbar.html and adds the corresponding toggle_navigation translation string in i18n/en/en.toml.
This ensures screen readers and assistive technologies receive a valid accessible name per WCAG 4.1.2 (Name, Role,
Value).

Which issue(s) this PR fixes

Fixes #56924

Special notes for your reviewer

• Added [toggle_navigation] string to i18n/en/en.toml for Hugo i18n lookup.
• Verified button attributes meet WCAG 4.1.2 requirements.

Does this PR introduce a user-facing change?

NONE

@kubernetes-prow kubernetes-prow Bot added cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. labels Aug 11, 2026
@kubernetes-prow

kubernetes-prow Bot commented Aug 11, 2026

Copy link
Copy Markdown
Contributor

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign katcosgrove for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@kubernetes-prow kubernetes-prow Bot added the sig/docs Categorizes an issue or PR as relevant to SIG Docs. label Aug 11, 2026
@LibenHailu
LibenHailu force-pushed the fix-a11y-hamburger-darkmode branch from 22dd2e3 to 02b0d19 Compare August 11, 2026 18:33
@kubernetes-prow kubernetes-prow Bot added the language/en Issues or PRs related to English language label Aug 11, 2026
@netlify

netlify Bot commented Aug 11, 2026

Copy link
Copy Markdown

✅ Pull request preview available for checking

Built without sensitive environment variables

Name Link
🔨 Latest commit 22dd2e3
🔍 Latest deploy log https://app.netlify.com/projects/kubernetes-io-main-staging/deploys/6a7b6a6b0a99a50008ab2508
😎 Deploy Preview https://deploy-preview-56937--kubernetes-io-main-staging.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Aug 11, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Pull request preview available for checking

Built without sensitive environment variables

Name Link
🔨 Latest commit dd109d4
🔍 Latest deploy log https://app.netlify.com/projects/kubernetes-io-main-staging/deploys/6a7b6cdf551eee000826c2aa
😎 Deploy Preview https://deploy-preview-56937--kubernetes-io-main-staging.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@LibenHailu
layouts: add accessible name and dynamic aria-expanded to mobile navi…
dd109d4 
…gation button

Add aria-label and dynamic aria-expanded state to the hamburger button
in the navbar to comply with WCAG 4.1.2 (Name, Role, Value).
@LibenHailu
LibenHailu force-pushed the fix-a11y-hamburger-darkmode branch from 02b0d19 to dd109d4 Compare August 11, 2026 18:41
@kubernetes-prow kubernetes-prow Bot added size/S Denotes a PR that changes 10-29 lines, ignoring generated files. area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes and removed size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. labels Aug 11, 2026
lmktfy
lmktfy reviewed Aug 11, 2026
View reviewed changes
Comment thread assets/js/legacy-script.js

@lmktfy lmktfy Aug 11, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think we can close the actual issue without updating this (legacy) file.

If we can, I say we should: the disposition of this script should be a separate rewrite.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@lmktfy lmktfy lmktfy left review comments
@dipesh-rawat dipesh-rawat Awaiting requested review from dipesh-rawat
@nate-double-u nate-double-u Awaiting requested review from nate-double-u

Assignees

No one assigned

Labels

area/web-development Issues or PRs related to the kubernetes.io's infrastructure, design, or build processes cncf-cla: yes Indicates the PR's author has signed the CNCF CLA. language/en Issues or PRs related to English language sig/docs Categorizes an issue or PR as relevant to SIG Docs. size/S Denotes a PR that changes 10-29 lines, ignoring generated files.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Homepage: hamburger button has no accessible name (4.1.2); dark-mode link contrast is 2.77:1 (1.4.3)

2 participants

@LibenHailu @lmktfy