Repository navigation
Conversation
Closes keycloak#54360 Signed-off-by: Atishay Kasliwal <katishay@gmail.com>
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
No active review issues are reported for the change add 8000 ing a localized accessible name to the mobile masthead toggle.
No open issues 🎉
What changed in this PR
Addresses #54360 by giving the shared masthead’s narrow-screen options toggle a localized accessible name in both consoles, while preserving the desktop dropdown’s username label.
Changes:
- Adds an optional
toggleLabelprop and supplies it for the kebab toggle. - Adds the English
optionsmessage to both console bundles. - Adds accessible-name regression assertions for both mobile mastheads.
| File | Description |
|---|---|
js/libs/ui-shared/src/masthead/Masthead.tsx |
Supplies the translated options label. |
js/libs/ui-shared/src/masthead/KeycloakDropdown.tsx |
Passes the optional label to MenuToggle via aria-label. |
js/apps/admin-ui/test/masthead/main.spec.ts |
Checks the mobile toggle’s accessible name. |
js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties |
Adds the admin console’s English options label. |
js/apps/account-ui/test/mobile-nav.spec.ts |
Checks the mobile toggle’s accessible name. |
js/apps/account-ui/maven-resources/theme/keycloak.v3/account/messages/messages_en.properties |
Adds the account console’s English options label. |
Review effort: Balanced
edewit
approved these changes
Nov 9, 2026
edewit
enabled auto-merge (squash)
November 9, 2026 08:17
edewit
added a commit
to edewit/keycloak
that referenced
this pull request
Nov 12, 2026
Restore toggleLabel / aria-label on the icon-only MenuToggle so the mobile options control has accessible name "Options", matching keycloak#54780. Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #54360.
The issue suggested
t("options"), but that key doesn't exist in either console's messages, sooptions=Optionswas added to both the account and admin bundles. Without it, a screen reader would announce the raw key, and translators couldn't pick it up.KeycloakDropdowngets an optionaltoggleLabelprop rather than a fixed label, because only the kebab variant has no visible text. The desktop dropdown keeps showing the user's name as its accessible name.The tests in
mobile-nav.spec.tsandmasthead/main.spec.tsfail without this change and pass with it. Run in Chromium against a nightly server with these message files patched into the account and admin themes. ESLint, TypeScript and theui-sharedunit tests pass.The navigation toggle has the same gap:
t("navigation")has no message key in either bundle. Left out to keep this change focused; can send separately.Assisted-by: Claude Opus 5.5