Repository navigation
Conversation
The notifications button received both an aria-label of "X items" (from the Button's generic badge description logic) and a title of "X Notifications" (from the ShellBar tooltip), causing JAWS to announce both strings. This was a regression introduced in feat(ui5-shellbar): replace custom badges with ButtonBadge (#11284), which moved the count from a data-* attribute to a real <ButtonBadge slot="badge">. That activated the Button's badge-to-aria-label logic added in fix(ui5-button): announce accessible name (#11396), which was never intended to run for the bell button. Fix: pass an explicit ariaLabel on the notifications accessibilityAttributes so Button uses it directly instead of deriving a label from the badge text.
|
🚀 Deployed on https://pr-14134--ui5-webcomponents-preview.netlify.app |
This branch was successfully deployed
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
1 participant
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.
Problem
When notificationsCount is set on ui5-shellbar, JAWS announces the notification count twice in quick succession:
aria-label="X items" — derived automatically by ui5-button from the count badge text
title="X Notifications" — the ShellBar tooltip passed via the tooltip prop
Root cause
This is a regression from two PRs whose interaction was not anticipated:
#11396 fix(ui5-button): announce accessible name introduced logic in Button.ariaLabelText that automatically appends a badge count as "X items" to the button's aria-label whenever a is present.
#11284 feat(ui5-shellbar): replace custom badges with ButtonBadge migrated the notifications count from a CSS data-* attribute to a real . This inadvertently activated the #11396 badge-to-aria-label logic on the bell button — which already had its own tooltip providing the accessible name.
Before #11284, no badge slot was filled, so the "X items" logic never ran. After it, the button produces both strings simultaneously.
Fix
In ShellBarAccessibility.ts, the notifications entry now passes an explicit ariaLabel (equal to the existing tooltip text, e.g. "5 Notifications") via accessibilityAttributes.
In Button._computedAccessibilityAttributes, an explicit ariaLabel short-circuits the fallback to ariaLabelText, so the generic badge description is never used as the accessible name. The result is a single, coherent announcement: "5 Notifications".
The visual badge, hover tooltip, and all other accessibilityAttributes (expanded, hasPopup) are unaffected.