feat(ui5-avatar-badge): add accessibleName property for custom tooltip

[plamenivanov91]

The badge now supports a new accessibleName property to customize the
tooltip text displayed on hover. When not provided, the badge uses a
fallback strategy:

User-provided accessibleName (highest priority)
Icon accessibility metadata when available
Derived icon name (lowest priority)

This gives developers full control over badge accessibility while
preserving sensible defaults for icons with and without semantic labels.

Added public accessibleName property
Resolved icon accessible names from registered icon accessibility metadata
Updated Icon mode from "Decorative" to "Image" to enable tooltip display
Added Cypress coverage for custom, derived, and invalid icon cases
Updated documentation for accessibleName behavior
Fixed React sample alignment by wrapping avatars in a flex container
Updated HTML and React test pages with accessibility examples

[ui5-webcomponents-bot]

🧹 Preview deployment cleaned up: https://pr-13390--ui5-webcomponents.netlify.app

[kgogov]

Code review

Found 2 issues:

1. The AVATAR_TOOLTIP i18n fallback (AvatarBadge.i18nBundle.getText(AVATAR_TOOLTIP)) in the else branch is unreachable dead code. icon is guaranteed to be a non-empty string at line 132 — the if (!icon) { return; } guard at line 115 exits the function for any falsy value, so the ternary's false branch never executes. The comment on line 131 ("If not possible, fall back to i18n 'Avatar' text") describes code that can never run.

webcomponents/packages/main/src/AvatarBadge.ts

Lines 130 to 135 in d252cb0

	// Derive from icon name (e.g., "edit" -> "Edit")
	// If not possible, fall back to i18n "Avatar" text
	this.effectiveAccessibleName = icon
	? icon.charAt(0).toUpperCase() + icon.slice(1)
	: AvatarBadge.i18nBundle.getText(AVATAR_TOOLTIP);
	}

2. The fallback in the else branch skips checking iconData.accData entirely. For icons that have a registered i18n label — e.g. message-error has accData with defaultText: "Error" — the code produces "Message-error" instead of "Error". Icon.ts already handles this correctly at lines 335–340 by reading from accData first. Icons without accData (edit, sys-enter-2, etc.) are unaffected since no better label is available for those.

Icon	accData	Correct label	Current code produces
edit	null	(none)	"Edit"
sys-enter-2	null	(none)	"Sys-enter-2"
message-error	ICON_MESSAGE_ERROR	"Error" ✓	"Message-error" ✗
person-placeholder	null	(none)	"Person-placeholder"

webcomponents/packages/main/src/AvatarBadge.ts

Lines 130 to 135 in d252cb0

	// Derive from icon name (e.g., "edit" -> "Edit")
	// If not possible, fall back to i18n "Avatar" text
	this.effectiveAccessibleName = icon
	? icon.charAt(0).toUpperCase() + icon.slice(1)
	: AvatarBadge.i18nBundle.getText(AVATAR_TOOLTIP);
	}

[kgogov]

[kgogov]

A couple of things to address before this is ready to merge — see the comments above.

[kgogov]

One more thing — the fix commit introduced a subtle gap.

onBeforeRendering now calls getI18nBundle(iconData.packageName) to resolve the icon's translated label, but @customElement is missing languageAware: true. This means when setLanguage() is called at runtime, the framework's re-render sweep skips AvatarBadge entirely — the tooltip label freezes in the initial language while everything else updates around it.

Icon.ts faces the same problem and solves it at line 104:

@customElement({
    tag: "ui5-icon",
    languageAware: true,  // Re-render on language change
    ...
})

One line, same decorator, same fix.

webcomponents/packages/main/src/AvatarBadge.ts

Lines 47 to 53 in 96725e5

	@customElement({
	tag: "ui5-avatar-badge",
	renderer: jsxRenderer,
	styles: AvatarBadgeCss,
	template: AvatarBadgeTemplate,
	})
	class AvatarBadge extends UI5Element {

[kgogov]

All raised concerns have been addressed — the unreachable fallback branch, the missing accData check, and languageAware: true. The PR looks good.