From ded2446304519e7361a53a12a866609f153997bf Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Wed, 29 Apr 2026 16:45:48 +0300 Subject: [PATCH] feat(ui5-avatar-badge): rename accessibleName to tooltip and simplify tooltip rendering Replace the badge public API accessibleName with tooltip and keep the fallback tooltip resolution strategy (custom text, icon accessibility metadata, derived icon name). Render the tooltip via the icon title attribute directly and remove the showTooltip wiring from AvatarBadge. Update Avatar badge Cypress tests, test page examples, website samples, and Avatar docs to use the new tooltip API. --- packages/main/cypress/specs/Avatar.cy.tsx | 25 +++++-------------- packages/main/src/AvatarBadge.ts | 24 +++++++++--------- packages/main/src/AvatarBadgeTemplate.tsx | 3 +-- packages/main/test/pages/Avatar.html | 6 ++--- .../_components_pages/main/Avatar/Avatar.mdx | 2 +- .../main/Avatar/WithBadge/sample.html | 2 +- .../_samples/main/Avatar/WithBadge/sample.tsx | 2 +- 7 files changed, 25 insertions(+), 39 deletions(-) diff --git a/packages/main/cypress/specs/Avatar.cy.tsx b/packages/main/cypress/specs/Avatar.cy.tsx index 3f75aa70ce87..79dd41aabee7 100644 --- a/packages/main/cypress/specs/Avatar.cy.tsx +++ b/packages/main/cypress/specs/Avatar.cy.tsx @@ -840,46 +840,33 @@ describe("Avatar with Badge", () => { cy.get("#avatar-with-default-badge-tooltip [ui5-avatar-badge]") .shadow() .find(".ui5-avatar-badge-icon") - .then(($icon) => { - cy.wrap($icon[0]) - .invoke("prop", "_id") - .then((iconId) => { - cy.get("#avatar-with-default-badge-tooltip [ui5-avatar-badge]") - .shadow() - .find(".ui5-avatar-badge-icon") - .shadow() - .find(`#${iconId}-tooltip`) - .should("contain.text", "Edit"); - }); - }); + .should("have.attr", "title", "Edit"); }); - it("uses accessibleName as tooltip text when provided", () => { + it("uses tooltip as tooltip text when provided", () => { const customTooltip = "Open profile editor"; cy.mount( - + ); cy.get("#avatar-with-custom-badge-tooltip [ui5-avatar-badge]") .shadow() .find(".ui5-avatar-badge-icon") - .shadow() - .find("title") - .should("contain.text", customTooltip); + .should("have.attr", "title", customTooltip); }); it("does not set badge-level accessible text when icon is invalid", () => { cy.document().then(doc => { - const badge = doc.createElement("ui5-avatar-badge") as AvatarBadge & { effectiveAccessibleName?: string }; + const badge = doc.createElement("ui5-avatar-badge") as AvatarBadge & { effectiveTooltip?: string }; badge.id = "badge-fallback-tooltip"; badge.icon = "non-existent-icon-xyz"; doc.body.appendChild(badge); cy.wait(100).then(() => { - expect(badge.effectiveAccessibleName).to.be.undefined; + expect(badge.effectiveTooltip).to.be.undefined; expect(badge.hasAttribute("invalid")).to.be.true; badge.remove(); }); diff --git a/packages/main/src/AvatarBadge.ts b/packages/main/src/AvatarBadge.ts index b0ce67e4fd67..0ecfaebbe4a5 100644 --- a/packages/main/src/AvatarBadge.ts +++ b/packages/main/src/AvatarBadge.ts @@ -66,16 +66,16 @@ class AvatarBadge extends UI5Element { icon?: string; /** - * Defines the custom text alternative of the badge icon. + * Defines the tooltip text of the badge icon. * * **Note:** If not provided, the badge uses the icon accessible name. * If no icon accessible name is available, a generic fallback text is used. * @default undefined * @public - * @since 2.22.0 + * @since 2.22.0 */ @property() - accessibleName?: string; + tooltip?: string; /** * Defines the state of the badge, which determines its styling. @@ -103,13 +103,13 @@ class AvatarBadge extends UI5Element { * @private */ @property({ noAttribute: true }) - effectiveAccessibleName?: string; + effectiveTooltip?: string; async onBeforeRendering() { const icon = this.icon; if (!icon) { this.invalid = true; - this.effectiveAccessibleName = undefined; + this.effectiveTooltip = undefined; return; } @@ -117,21 +117,21 @@ class AvatarBadge extends UI5Element { this.invalid = !iconData || iconData === ICON_NOT_FOUND; if (this.invalid) { - this.effectiveAccessibleName = undefined; - } else if (this.accessibleName) { - // User-provided accessible name takes precedence - this.effectiveAccessibleName = this.accessibleName; + this.effectiveTooltip = undefined; + } else if (this.tooltip) { + // User-provided tooltip takes precedence + this.effectiveTooltip = this.tooltip; } else if (iconData && iconData !== ICON_NOT_FOUND && iconData.accData) { // Use the icon's registered i18n label (e.g., message-error -> "Error") if (iconData.packageName) { const i18nBundle = await getI18nBundle(iconData.packageName); - this.effectiveAccessibleName = i18nBundle.getText(iconData.accData) || undefined; + this.effectiveTooltip = i18nBundle.getText(iconData.accData) || undefined; } else { - this.effectiveAccessibleName = iconData.accData.defaultText || undefined; + this.effectiveTooltip = iconData.accData.defaultText || undefined; } } else { // Derive from icon name (e.g., "edit" -> "Edit") - this.effectiveAccessibleName = icon.charAt(0).toUpperCase() + icon.slice(1); + this.effectiveTooltip = icon.charAt(0).toUpperCase() + icon.slice(1); } } } diff --git a/packages/main/src/AvatarBadgeTemplate.tsx b/packages/main/src/AvatarBadgeTemplate.tsx index 7e52f8669475..074dd81d1bd9 100644 --- a/packages/main/src/AvatarBadgeTemplate.tsx +++ b/packages/main/src/AvatarBadgeTemplate.tsx @@ -8,8 +8,7 @@ export default function AvatarBadgeTemplate(this: AvatarBadge) { )} diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html index ae281cf3376c..5cfb13726062 100644 --- a/packages/main/test/pages/Avatar.html +++ b/packages/main/test/pages/Avatar.html @@ -307,7 +307,7 @@

Avatar Badge - With Icons

Avatar Badge - Tooltip Behavior

-

The badge tooltip is shown by default from the icon semantic text. You can override it with accessible-name.

+

The badge tooltip is shown by default from the icon semantic text. You can override it with tooltip.

@@ -317,9 +317,9 @@

Avatar Badge - Tooltip Behavior

- + -

Custom tooltip (accessible-name)

+

Custom tooltip (tooltip)

diff --git a/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx b/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx index 4625bff07a9f..97397a153e6a 100644 --- a/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx +++ b/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx @@ -65,7 +65,7 @@ The Avatar can show images. ### With Badge The Avatar supports visual affordance through badges using the `ui5-avatar-badge` component. Badges can display icons with different value states to indicate status or notifications. **It is recommended to use badges with interactive avatars** for better user experience and accessibility. -`ui5-avatar-badge` displays an icon tooltip by default, based on the icon semantic text. To provide a custom tooltip text, set the badge `accessible-name` property. +`ui5-avatar-badge` displays an icon tooltip by default, based on the icon semantic text. To provide a custom tooltip text, set the badge `tooltip` property. diff --git a/packages/website/docs/_samples/main/Avatar/WithBadge/sample.html b/packages/website/docs/_samples/main/Avatar/WithBadge/sample.html index d18109cfee27..6ed9f61c19be 100644 --- a/packages/website/docs/_samples/main/Avatar/WithBadge/sample.html +++ b/packages/website/docs/_samples/main/Avatar/WithBadge/sample.html @@ -16,7 +16,7 @@ - + diff --git a/packages/website/docs/_samples/main/Avatar/WithBadge/sample.tsx b/packages/website/docs/_samples/main/Avatar/WithBadge/sample.tsx index fb870031a40d..3c5bb0d50d1e 100644 --- a/packages/website/docs/_samples/main/Avatar/WithBadge/sample.tsx +++ b/packages/website/docs/_samples/main/Avatar/WithBadge/sample.tsx @@ -20,7 +20,7 @@ function App() {