Skip to content

fix(ui5-avatar): include badge tooltip in aria-label - #13960

Open
yanaminkova wants to merge 1 commit into
mainfrom
avatar-badge-tooltip
Open

fix(ui5-avatar): include badge tooltip in aria-label#13960
yanaminkova wants to merge 1 commit into
mainfrom
avatar-badge-tooltip

Conversation

@yanaminkova

@yanaminkova yanaminkova commented Aug 20, 2026

Copy link
Copy Markdown
Contributor

SNOW: DINC1004809

The badge's tooltip, is added to the ui5-avatar`s aria-label, so screen readers announce the badge state.

@yanaminkova
yanaminkova deployed to netlify-preview August 20, 2026 19:54 — with GitHub Actions Active
@sap-ui5-webcomponents-release

Copy link
Copy Markdown

@kgogov kgogov left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Hi Yana, thanks for the fix! The initial accessible name is composed correctly, but it can become stale when the badge changes after rendering.

Updating badge.tooltip or badge.icon correctly updates the badge title and effectiveTooltip, while the Avatar root keeps its previous aria-label. Since accessibleNameText now depends on child state, the badge slot should invalidate Avatar for the relevant properties:

@slot({
	type: HTMLElement,
	invalidateOnChildChange: {
		properties: ["icon", "tooltip", "effectiveTooltip"],
		slots: false,
	},
})
badge!: Slot<HTMLElement>;

I verified this locally against tooltip changes, icon changes, tooltip fallback, and valid/invalid icon transitions. Could you please add this configuration and a regression test covering post-render badge updates?

For reference, I used a standalone Avatar_badge_tooltip_invalidation.html test page to reproduce and verify these cases.

Avatar_badge_tooltip_invalidation.html

@kgogov kgogov left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Requesting this small change to keep the Avatar aria-label synchronized when the badge updates.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants