Skip to content

Commit ded2446

Browse files
plamenivanov91plamenivanov91
committed
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.
1 parent a904c5e commit ded2446

7 files changed

Lines changed: 25 additions & 39 deletions

File tree

‎packages/main/cypress/specs/Avatar.cy.tsx‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -840,46 +840,33 @@ describe("Avatar with Badge", () => {
840840
cy.get("#avatar-with-default-badge-tooltip [ui5-avatar-badge]")
841841
.shadow()
842842
.find(".ui5-avatar-badge-icon")
843-
.then(($icon) => {
844-
cy.wrap($icon[0])
845-
.invoke("prop", "_id")
846-
.then((iconId) => {
847-
cy.get("#avatar-with-default-badge-tooltip [ui5-avatar-badge]")
848-
.shadow()
849-
.find(".ui5-avatar-badge-icon")
850-
.shadow()
851-
.find(`#${iconId}-tooltip`)
852-
.should("contain.text", "Edit");
853-
});
854-
});
843+
.should("have.attr", "title", "Edit");
855844
});
856845

857-
it("uses accessibleName as tooltip text when provided", () => {
846+
it("uses tooltip as tooltip text when provided", () => {
858847
const customTooltip = "Open profile editor";
859848

860849
cy.mount(
861850
<Avatar id="avatar-with-custom-badge-tooltip" initials="AB" size="M">
862-
<AvatarBadge slot="badge" icon="edit" accessibleName={customTooltip}></AvatarBadge>
851+
<AvatarBadge slot="badge" icon="edit" tooltip={customTooltip}></AvatarBadge>
863852
</Avatar>
864853
);
865854

866855
cy.get("#avatar-with-custom-badge-tooltip [ui5-avatar-badge]")
867856
.shadow()
868857
.find(".ui5-avatar-badge-icon")
869-
.shadow()
870-
.find("title")
871-
.should("contain.text", customTooltip);
858+
.should("have.attr", "title", customTooltip);
872859
});
873860

874861
it("does not set badge-level accessible text when icon is invalid", () => {
875862
cy.document().then(doc => {
876-
const badge = doc.createElement("ui5-avatar-badge") as AvatarBadge & { effectiveAccessibleName?: string };
863+
const badge = doc.createElement("ui5-avatar-badge") as AvatarBadge & { effectiveTooltip?: string };
877864
badge.id = "badge-fallback-tooltip";
878865
badge.icon = "non-existent-icon-xyz";
879866
doc.body.appendChild(badge);
880867

881868
cy.wait(100).then(() => {
882-
expect(badge.effectiveAccessibleName).to.be.undefined;
869+
expect(badge.effectiveTooltip).to.be.undefined;
883870
expect(badge.hasAttribute("invalid")).to.be.true;
884871
badge.remove();
885872
});

‎packages/main/src/AvatarBadge.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -66,16 +66,16 @@ class AvatarBadge extends UI5Element {
6666
icon?: string;
6767

6868
/**
69-
* Defines the custom text alternative of the badge icon.
69+
* Defines the tooltip text of the badge icon.
7070
*
7171
* **Note:** If not provided, the badge uses the icon accessible name.
7272
* If no icon accessible name is available, a generic fallback text is used.
7373
* @default undefined
7474
* @public
75-
* @since 2.22.0
75+
* @since 2.22.0
7676
*/
7777
@property()
78-
accessibleName?: string;
78+
tooltip?: string;
7979

8080
/**
8181
* Defines the state of the badge, which determines its styling.
@@ -103,35 +103,35 @@ class AvatarBadge extends UI5Element {
103103
* @private
104104
*/
105105
@property({ noAttribute: true })
106-
effectiveAccessibleName?: string;
106+
effectiveTooltip?: string;
107107

108108
async onBeforeRendering() {
109109
const icon = this.icon;
110110
if (!icon) {
111111
this.invalid = true;
112-
this.effectiveAccessibleName = undefined;
112+
this.effectiveTooltip = undefined;
113113
return;
114114
}
115115

116116
const iconData = getIconDataSync(icon) || await getIconData(icon);
117117
this.invalid = !iconData || iconData === ICON_NOT_FOUND;
118118

119119
if (this.invalid) {
120-
this.effectiveAccessibleName = undefined;
121-
} else if (this.accessibleName) {
122-
// User-provided accessible name takes precedence
123-
this.effectiveAccessibleName = this.accessibleName;
120+
this.effectiveTooltip = undefined;
121+
} else if (this.tooltip) {
122+
// User-provided tooltip takes precedence
123+
this.effectiveTooltip = this.tooltip;
124124
} else if (iconData && iconData !== ICON_NOT_FOUND && iconData.accData) {
125125
// Use the icon's registered i18n label (e.g., message-error -> "Error")
126126
if (iconData.packageName) {
127127
const i18nBundle = await getI18nBundle(iconData.packageName);
128-
this.effectiveAccessibleName = i18nBundle.getText(iconData.accData) || undefined;
128+
this.effectiveTooltip = i18nBundle.getText(iconData.accData) || undefined;
129129
} else {
130-
this.effectiveAccessibleName = iconData.accData.defaultText || undefined;
130+
this.effectiveTooltip = iconData.accData.defaultText || undefined;
131131
}
132132
} else {
133133
// Derive from icon name (e.g., "edit" -> "Edit")
134-
this.effectiveAccessibleName = icon.charAt(0).toUpperCase() + icon.slice(1);
134+
this.effectiveTooltip = icon.charAt(0).toUpperCase() + icon.slice(1);
135135
}
136136
}
137137
}

‎packages/main/src/AvatarBadgeTemplate.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ export default function AvatarBadgeTemplate(this: AvatarBadge) {
88
<Icon
99
name={this.icon}
1010
class="ui5-avatar-badge-icon"
11-
accessibleName={this.effectiveAccessibleName}
12-
showTooltip={true}
11+
title={this.effectiveTooltip}
1312
mode="Image"
1413
></Icon>
1514
)}

‎packages/main/test/pages/Avatar.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,7 @@ <h3>Avatar Badge - With Icons</h3>
307307

308308
<section>
309309
<h3>Avatar Badge - Tooltip Behavior</h3>
310-
<p>The badge tooltip is shown by default from the icon semantic text. You can override it with <code>accessible-name</code>.</p>
310+
<p>The badge tooltip is shown by default from the icon semantic text. You can override it with <code>tooltip</code>.</p>
311311
<div style="display: flex; flex-direction: row; align-items: end; column-gap: 0.5rem;">
312312
<div style="text-align: center;">
313313
<ui5-avatar size="M" initials="DF" color-scheme="Accent6">
@@ -317,9 +317,9 @@ <h3>Avatar Badge - Tooltip Behavior</h3>
317317
</div>
318318
<div style="text-align: center;">
319319
<ui5-avatar size="M" initials="CT" color-scheme="Accent8">
320-
<ui5-avatar-badge icon="edit" accessible-name="Open profile editor" slot="badge"></ui5-avatar-badge>
320+
<ui5-avatar-badge icon="edit" tooltip="Open profile editor" slot="badge"></ui5-avatar-badge>
321321
</ui5-avatar>
322-
<p style="font-size: 0.75rem;">Custom tooltip (accessible-name)</p>
322+
<p style="font-size: 0.75rem;">Custom tooltip (tooltip)</p>
323323
</div>
324324
</div>
325325
</section>

‎packages/website/docs/_components_pages/main/Avatar/Avatar.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ The Avatar can show images.
6565
### With Badge
6666
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.
6767

68-
`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.
68+
`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.
6969

7070
<WithBadge />
7171

‎packages/website/docs/_samples/main/Avatar/WithBadge/sample.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</ui5-avatar>
1717

1818
<ui5-avatar mode="Interactive" size="M" initials="TT" color-scheme="Accent7">
19-
<ui5-avatar-badge icon="edit" accessible-name="Open profile editor" slot="badge"></ui5-avatar-badge>
19+
<ui5-avatar-badge icon="edit" tooltip="Open profile editor" slot="badge"></ui5-avatar-badge>
2020
</ui5-avatar>
2121

2222
<ui5-avatar mode="Interactive" size="M" icon="employee" color-scheme="Accent10">

‎packages/website/docs/_samples/main/Avatar/WithBadge/sample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ function App() {
2020
<Avatar mode="Interactive" size="M" initials="TT" colorScheme="Accent7">
2121
<AvatarBadge
2222
icon="edit"
23-
accessibleName="Open profile editor"
23+
tooltip="Open profile editor"
2424
slot="badge"
2525
></AvatarBadge>
2626
</Avatar>

0 commit comments

Comments
 (0)