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() {