From 436d32c08bd77e51303fc1384311068b0a716c15 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Mon, 2 Feb 2026 17:27:38 +0200 Subject: [PATCH 1/4] feat(ui5-avatar): add mode property Avatar component now supports 'mode' property with 'Default' and 'Decorative' options. It allows to render the avatar in decorative mode, which is non-interactive and hidden from assistive technologies. --- packages/main/cypress/specs/Avatar.cy.tsx | 70 +++++++++++++++++++ packages/main/src/Avatar.ts | 23 ++++++ packages/main/src/AvatarTemplate.tsx | 1 + packages/main/test/pages/Avatar.html | 19 +++++ .../_components_pages/main/Avatar/Avatar.mdx | 6 ++ 5 files changed, 119 insertions(+) diff --git a/packages/main/cypress/specs/Avatar.cy.tsx b/packages/main/cypress/specs/Avatar.cy.tsx index 043bd6098d34..bd474b1fa5af 100644 --- a/packages/main/cypress/specs/Avatar.cy.tsx +++ b/packages/main/cypress/specs/Avatar.cy.tsx @@ -121,6 +121,76 @@ describe("Accessibility", () => { cy.get("#disabled-avatar").realClick(); cy.get("#click-event").should("have.value", "0"); }); + + it("should support mode='Decorative' with aria-hidden and role='presentation'", () => { + cy.mount( + + ); + + cy.get("#decorative-avatar") + .shadow() + .find(".ui5-avatar-root") + .should("have.attr", "role", "presentation") + .should("have.attr", "aria-hidden", "true") + .should("not.have.attr", "tabindex"); + }); + + it("should override interactive when mode is Decorative", () => { + cy.mount( + + ); + + // Even with interactive=true, Decorative mode should win + cy.get("#decorative-interactive") + .shadow() + .find(".ui5-avatar-root") + .should("have.attr", "role", "presentation") + .should("have.attr", "aria-hidden", "true") + .should("not.have.attr", "tabindex"); + }); + + it("should use role='img' in Image mode when not interactive", () => { + cy.mount( + + ); + + cy.get("#image-mode-avatar") + .shadow() + .find(".ui5-avatar-root") + .should("have.attr", "role", "img") + .should("not.have.attr", "aria-hidden"); + }); + + it("should use role='button' in Image mode when interactive", () => { + cy.mount( + + ); + + cy.get("#interactive-image-mode") + .shadow() + .find(".ui5-avatar-root") + .should("have.attr", "role", "button") + .should("have.attr", "tabindex", "0") + .should("not.have.attr", "aria-hidden"); + }); }); describe("Fallback Logic", () => { diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts index b73cc6b86ed1..518d3dd5c977 100644 --- a/packages/main/src/Avatar.ts +++ b/packages/main/src/Avatar.ts @@ -30,6 +30,7 @@ import type Icon from "./Icon.js"; import AvatarSize from "./types/AvatarSize.js"; import type AvatarShape from "./types/AvatarShape.js"; import type AvatarColorScheme from "./types/AvatarColorScheme.js"; +import AvatarMode from "./types/AvatarMode.js"; // Icon import "@ui5/webcomponents-icons/dist/employee.js"; @@ -102,6 +103,17 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { @property({ type: Boolean }) interactive = false; + /** + * Defines the mode of the component. + * + * **Note:** When set to `Decorative`, the avatar will be purely decorative, + * with `role="presentation"` and `aria-hidden="true"`, regardless of the `interactive` property. + * @default "Image" + * @public + */ + @property() + mode: `${AvatarMode}` = "Image"; + /** * Defines the name of the UI5 Icon, that will be displayed. * @@ -273,6 +285,10 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { if (this.forcedTabIndex) { return parseInt(this.forcedTabIndex); } + // Decorative mode should never be tabbable + if (this.mode === AvatarMode.Decorative) { + return undefined; + } return this._interactive ? 0 : undefined; } @@ -297,9 +313,16 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { } get _role() { + if (this.mode === AvatarMode.Decorative) { + return "presentation"; + } return this._interactive ? "button" : "img"; } + get effectiveAriaHidden() { + return this.mode === AvatarMode.Decorative ? "true" : undefined; + } + get _ariaHasPopup() { return this._getAriaHasPopup(); } diff --git a/packages/main/src/AvatarTemplate.tsx b/packages/main/src/AvatarTemplate.tsx index 455584484cb5..a84754be1825 100644 --- a/packages/main/src/AvatarTemplate.tsx +++ b/packages/main/src/AvatarTemplate.tsx @@ -8,6 +8,7 @@ export default function AvatarTemplate(this: Avatar) { tabindex={this.tabindex} data-sap-focus-ref role={this._role} + aria-hidden={this.effectiveAriaHidden} aria-haspopup={this._ariaHasPopup} aria-label={this.accessibleNameText} onKeyUp={this._onkeyup} diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html index a47543ca1f18..6da2e032c702 100644 --- a/packages/main/test/pages/Avatar.html +++ b/packages/main/test/pages/Avatar.html @@ -171,6 +171,25 @@

Avatar - interactive

+
+

Avatar - mode="Decorative"

+

Decorative avatars are purely visual with role="presentation" and aria-hidden="true"

+ + + + John Miller + + +

Avatar - mode="Image" (default)

+

Image mode avatars have role="img" or role="button" when interactive

+ + + +

Avatar - Decorative mode overrides interactive

+

Even with interactive=true, decorative mode makes it non-interactive

+ +
+

Avatar Badge - All Sizes

diff --git a/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx b/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx index c98f8f303d74..b879a34d8cca 100644 --- a/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx +++ b/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx @@ -4,6 +4,7 @@ slug: ../Avatar import Basic from "../../../_samples/main/Avatar/Basic/Basic.md"; import Interactive from "../../../_samples/main/Avatar/Interactive/Interactive.md"; +import Decorative from "../../../_samples/main/Avatar/Decorative/Decorative.md"; import WithBadge from "../../../_samples/main/Avatar/WithBadge/WithBadge.md"; import ColorSchemes from "../../../_samples/main/Avatar/ColorSchemes/ColorSchemes.md"; import Sizes from "../../../_samples/main/Avatar/Sizes/Sizes.md"; @@ -36,6 +37,11 @@ The Avatar can be interactive, e.g. responds to hover, focus and press. +### Decorative Mode +The Avatar can be set to decorative mode, making it purely visual without semantic content. This is useful when the avatar is used for visual purposes only and shouldn't be announced by screen readers. + + + ### Color Schemes The Avatar can be displayed in multiple color schemes. From 1349f996faabe6936d50e422789521510e9613c4 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Mon, 2 Feb 2026 17:28:56 +0200 Subject: [PATCH 2/4] - added missing new files --- packages/main/src/types/AvatarMode.ts | 22 ++++++++++ .../main/Avatar/Decorative/Decorative.md | 4 ++ .../_samples/main/Avatar/Decorative/main.js | 2 + .../main/Avatar/Decorative/sample.html | 43 +++++++++++++++++++ 4 files changed, 71 insertions(+) create mode 100644 packages/main/src/types/AvatarMode.ts create mode 100644 packages/website/docs/_samples/main/Avatar/Decorative/Decorative.md create mode 100644 packages/website/docs/_samples/main/Avatar/Decorative/main.js create mode 100644 packages/website/docs/_samples/main/Avatar/Decorative/sample.html diff --git a/packages/main/src/types/AvatarMode.ts b/packages/main/src/types/AvatarMode.ts new file mode 100644 index 000000000000..95c86e7413cf --- /dev/null +++ b/packages/main/src/types/AvatarMode.ts @@ -0,0 +1,22 @@ +/** + * Different Avatar modes. + * @public + */ +enum AvatarMode { + /** + * Image mode (by default). + * Configures the component to internally render role="img" or role="button" (when interactive). + * @public + */ + Image = "Image", + + /** + * Decorative mode. + * Configures the component to internally render role="presentation" and aria-hidden="true", + * making it purely decorative without semantic content or interactivity. + * @public + */ + Decorative = "Decorative", +} + +export default AvatarMode; diff --git a/packages/website/docs/_samples/main/Avatar/Decorative/Decorative.md b/packages/website/docs/_samples/main/Avatar/Decorative/Decorative.md new file mode 100644 index 000000000000..17798ecc59ab --- /dev/null +++ b/packages/website/docs/_samples/main/Avatar/Decorative/Decorative.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + diff --git a/packages/website/docs/_samples/main/Avatar/Decorative/main.js b/packages/website/docs/_samples/main/Avatar/Decorative/main.js new file mode 100644 index 000000000000..4dd3f498b33f --- /dev/null +++ b/packages/website/docs/_samples/main/Avatar/Decorative/main.js @@ -0,0 +1,2 @@ +import "@ui5/webcomponents/dist/Label.js"; +import "@ui5/webcomponents/dist/Avatar.js"; diff --git a/packages/website/docs/_samples/main/Avatar/Decorative/sample.html b/packages/website/docs/_samples/main/Avatar/Decorative/sample.html new file mode 100644 index 000000000000..6b622240e364 --- /dev/null +++ b/packages/website/docs/_samples/main/Avatar/Decorative/sample.html @@ -0,0 +1,43 @@ + + + + + + + + Sample + + + + + + + +
+ + Decorative avatar with initials - not in accessibility tree +
+ +
+ + Image mode avatar (default) - announced as "Avatar CD" +
+ +
+ + Decorative mode overrides interactive property +
+ + + + + + + From 28eb1b43e0b863332b5c8a381666e8e9cf502c3f Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Mon, 2 Feb 2026 18:43:47 +0200 Subject: [PATCH 3/4] - interactive prop takes precedence over mode prop --- packages/main/cypress/specs/Avatar.cy.tsx | 10 ++++----- packages/main/src/Avatar.ts | 21 +++++++++++++++---- packages/main/test/pages/Avatar.html | 4 ++-- .../main/Avatar/Decorative/sample.html | 2 +- 4 files changed, 25 insertions(+), 12 deletions(-) diff --git a/packages/main/cypress/specs/Avatar.cy.tsx b/packages/main/cypress/specs/Avatar.cy.tsx index bd474b1fa5af..9c74cb854b40 100644 --- a/packages/main/cypress/specs/Avatar.cy.tsx +++ b/packages/main/cypress/specs/Avatar.cy.tsx @@ -139,7 +139,7 @@ describe("Accessibility", () => { .should("not.have.attr", "tabindex"); }); - it("should override interactive when mode is Decorative", () => { + it("should allow interactive to override Decorative mode", () => { cy.mount( { > ); - // Even with interactive=true, Decorative mode should win + // Interactive property takes precedence over Decorative mode cy.get("#decorative-interactive") .shadow() .find(".ui5-avatar-root") - .should("have.attr", "role", "presentation") - .should("have.attr", "aria-hidden", "true") - .should("not.have.attr", "tabindex"); + .should("have.attr", "role", "button") + .should("not.have.attr", "aria-hidden") + .should("have.attr", "tabindex", "0"); }); it("should use role='img' in Image mode when not interactive", () => { diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts index 518d3dd5c977..f47a0f2295ff 100644 --- a/packages/main/src/Avatar.ts +++ b/packages/main/src/Avatar.ts @@ -107,7 +107,8 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { * Defines the mode of the component. * * **Note:** When set to `Decorative`, the avatar will be purely decorative, - * with `role="presentation"` and `aria-hidden="true"`, regardless of the `interactive` property. + * with `role="presentation"` and `aria-hidden="true"`. However, this property won't have effect + * if the `interactive` property is set to `true`. * @default "Image" * @public */ @@ -285,11 +286,15 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { if (this.forcedTabIndex) { return parseInt(this.forcedTabIndex); } - // Decorative mode should never be tabbable + // Interactive property takes precedence over decorative mode + if (this._interactive) { + return 0; + } + // Decorative mode should not be tabbable if (this.mode === AvatarMode.Decorative) { return undefined; } - return this._interactive ? 0 : undefined; + return undefined; } /** @@ -313,13 +318,21 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { } get _role() { + // Interactive property takes precedence over decorative mode + if (this._interactive) { + return "button"; + } if (this.mode === AvatarMode.Decorative) { return "presentation"; } - return this._interactive ? "button" : "img"; + return "img"; } get effectiveAriaHidden() { + // Interactive property takes precedence over decorative mode + if (this._interactive) { + return undefined; + } return this.mode === AvatarMode.Decorative ? "true" : undefined; } diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html index 6da2e032c702..44ca1301078a 100644 --- a/packages/main/test/pages/Avatar.html +++ b/packages/main/test/pages/Avatar.html @@ -185,8 +185,8 @@

Avatar - mode="Image" (default)

-

Avatar - Decorative mode overrides interactive

-

Even with interactive=true, decorative mode makes it non-interactive

+

Avatar - Interactive property overrides Decorative mode

+

When interactive=true, it takes precedence over decorative mode (becomes interactive)

diff --git a/packages/website/docs/_samples/main/Avatar/Decorative/sample.html b/packages/website/docs/_samples/main/Avatar/Decorative/sample.html index 6b622240e364..65afab8f49e4 100644 --- a/packages/website/docs/_samples/main/Avatar/Decorative/sample.html +++ b/packages/website/docs/_samples/main/Avatar/Decorative/sample.html @@ -32,7 +32,7 @@
- Decorative mode overrides interactive property + Interactive property overrides decorative mode - avatar becomes interactive
From b0a7139b993a2ba97379f48cf2676a42e1bf8ac3 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Tue, 3 Feb 2026 18:43:14 +0200 Subject: [PATCH 4/4] - deprecated 'interactive' property - new 'mode' property with 'Interactive' value - added since tags - updated samples and documentation - fixed related tests --- packages/main/cypress/specs/Avatar.cy.tsx | 56 +++++++++++++------ packages/main/src/Avatar.ts | 46 +++++++-------- packages/main/src/types/AvatarMode.ts | 13 ++++- packages/main/test/pages/Avatar.html | 17 ++++-- .../_components_pages/main/Avatar/Avatar.mdx | 6 +- .../main/Avatar/Decorative/sample.html | 4 +- .../main/Avatar/Interactive/sample.html | 2 +- 7 files changed, 92 insertions(+), 52 deletions(-) diff --git a/packages/main/cypress/specs/Avatar.cy.tsx b/packages/main/cypress/specs/Avatar.cy.tsx index 9c74cb854b40..91bd3ab237a3 100644 --- a/packages/main/cypress/specs/Avatar.cy.tsx +++ b/packages/main/cypress/specs/Avatar.cy.tsx @@ -13,7 +13,7 @@ describe("Accessibility", () => { it("checks if initials of avatar are correctly announced", () => { const INITIALS = "XS"; - cy.mount(); + cy.mount(); // Store the expected label to compare against const expectedLabel = `Avatar ${INITIALS}`; @@ -34,7 +34,7 @@ describe("Accessibility", () => { @@ -77,7 +77,7 @@ describe("Accessibility", () => { ); @@ -139,23 +139,46 @@ describe("Accessibility", () => { .should("not.have.attr", "tabindex"); }); - it("should allow interactive to override Decorative mode", () => { + it("should support mode='Interactive' with role='button' and focusable", () => { cy.mount( ); - // Interactive property takes precedence over Decorative mode - cy.get("#decorative-interactive") + cy.get("#interactive-mode-avatar") .shadow() .find(".ui5-avatar-root") .should("have.attr", "role", "button") - .should("not.have.attr", "aria-hidden") - .should("have.attr", "tabindex", "0"); + .should("have.attr", "tabindex", "0") + .should("not.have.attr", "aria-hidden"); + }); + + it("deprecated interactive property still allows click events but doesn't affect accessibility", () => { + cy.mount( +
+ + +
+ ); + + function increment() { + const input = document.getElementById("click-event-deprecated") as HTMLInputElement; + input.value = "1"; + } + + // Should have role="img" (not button) since mode is not Interactive + cy.get("#deprecated-interactive") + .shadow() + .find(".ui5-avatar-root") + .should("have.attr", "role", "img") + .should("not.have.attr", "tabindex"); + + // But should still fire click event + cy.get("#deprecated-interactive").realClick(); + cy.get("#click-event-deprecated").should("have.value", "1"); }); it("should use role='img' in Image mode when not interactive", () => { @@ -174,17 +197,16 @@ describe("Accessibility", () => { .should("not.have.attr", "aria-hidden"); }); - it("should use role='button' in Image mode when interactive", () => { + it("should use role='button' in Interactive mode", () => { cy.mount( ); - cy.get("#interactive-image-mode") + cy.get("#interactive-mode") .shadow() .find(".ui5-avatar-root") .should("have.attr", "role", "button") diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts index f47a0f2295ff..28e9ab7158dc 100644 --- a/packages/main/src/Avatar.ts +++ b/packages/main/src/Avatar.ts @@ -49,7 +49,7 @@ type AvatarAccessibilityAttributes = Pick; * * ### Keyboard Handling * - * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true. + * - [Space] / [Enter] or [Return] - Fires the `click` event if the `mode` is set to `Interactive` or the deprecated `interactive` property is set to true. * - [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event. * * ### ES6 Module Import @@ -93,12 +93,20 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { disabled = false; /** - * Defines if the avatar is interactive (focusable and pressable). + * Defines if the avatar fires click events. + * + * **Note:** This property only controls event firing behavior. + * It does not affect the component's accessibility attributes. + * To make the avatar interactive with proper accessibility (role="button", focusable), + * use `mode="Interactive"` instead. * * **Note:** This property won't have effect if the `disabled` * property is set to `true`. * @default false * @public + * @deprecated Since version 2.19. Use the `mode` property with value `Interactive` instead. + * For accessibility and visual affordance (role="button", focusable), set `mode="Interactive"`. + * This property now only controls whether click events are fired. */ @property({ type: Boolean }) interactive = false; @@ -106,11 +114,13 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { /** * Defines the mode of the component. * - * **Note:** When set to `Decorative`, the avatar will be purely decorative, - * with `role="presentation"` and `aria-hidden="true"`. However, this property won't have effect - * if the `interactive` property is set to `true`. + * **Note:** + * - `Image` (default) - renders with role="img" + * - `Decorative` - renders with role="presentation" and aria-hidden="true", making it purely decorative + * - `Interactive` - renders with role="button", focusable (tabindex="0"), and supports keyboard interaction * @default "Image" * @public + * @since 2.19 */ @property() mode: `${AvatarMode}` = "Image"; @@ -286,14 +296,10 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { if (this.forcedTabIndex) { return parseInt(this.forcedTabIndex); } - // Interactive property takes precedence over decorative mode - if (this._interactive) { + // Interactive mode makes the avatar focusable + if (this.mode === AvatarMode.Interactive) { return 0; } - // Decorative mode should not be tabbable - if (this.mode === AvatarMode.Decorative) { - return undefined; - } return undefined; } @@ -318,21 +324,17 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { } get _role() { - // Interactive property takes precedence over decorative mode - if (this._interactive) { + switch (this.mode) { + case AvatarMode.Interactive: return "button"; - } - if (this.mode === AvatarMode.Decorative) { + case AvatarMode.Decorative: return "presentation"; + default: + return "img"; } - return "img"; } get effectiveAriaHidden() { - // Interactive property takes precedence over decorative mode - if (this._interactive) { - return undefined; - } return this.mode === AvatarMode.Decorative ? "true" : undefined; } @@ -465,7 +467,7 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { _getAriaHasPopup() { const ariaHaspopup = this.accessibilityAttributes.hasPopup; - if (!this._interactive || !ariaHaspopup) { + if (this.mode !== AvatarMode.Interactive || !ariaHaspopup) { return; } @@ -536,7 +538,7 @@ class Avatar extends UI5Element implements ITabbable, IAvatarGroupItem { get accessibilityInfo() { return { role: this._role as AriaRole, - type: this.interactive ? Avatar.i18nBundle.getText(AVATAR_TYPE_BUTTON) : Avatar.i18nBundle.getText(AVATAR_TYPE_IMAGE), + type: this.mode === AvatarMode.Interactive ? Avatar.i18nBundle.getText(AVATAR_TYPE_BUTTON) : Avatar.i18nBundle.getText(AVATAR_TYPE_IMAGE), description: this.accessibleNameText, disabled: this.disabled, }; diff --git a/packages/main/src/types/AvatarMode.ts b/packages/main/src/types/AvatarMode.ts index 95c86e7413cf..3facebc35bd7 100644 --- a/packages/main/src/types/AvatarMode.ts +++ b/packages/main/src/types/AvatarMode.ts @@ -5,8 +5,9 @@ enum AvatarMode { /** * Image mode (by default). - * Configures the component to internally render role="img" or role="button" (when interactive). + * Configures the component to internally render role="img". * @public + * @since 2.19 */ Image = "Image", @@ -15,8 +16,18 @@ enum AvatarMode { * Configures the component to internally render role="presentation" and aria-hidden="true", * making it purely decorative without semantic content or interactivity. * @public + * @since 2.19 */ Decorative = "Decorative", + + /** + * Interactive mode. + * Configures the component to internally render role="button". + * This mode also supports focus and enables keyboard interaction. + * @public + * @since 2.19 + */ + Interactive = "Interactive", } export default AvatarMode; diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html index 44ca1301078a..dd796ac8c3de 100644 --- a/packages/main/test/pages/Avatar.html +++ b/packages/main/test/pages/Avatar.html @@ -167,7 +167,7 @@

Avatar - interactive


- + @@ -181,13 +181,18 @@

Avatar - mode="Decorative"

Avatar - mode="Image" (default)

-

Image mode avatars have role="img" or role="button" when interactive

+

Image mode avatars have role="img"

- -

Avatar - Interactive property overrides Decorative mode

-

When interactive=true, it takes precedence over decorative mode (becomes interactive)

- +

Avatar - mode="Interactive"

+

Interactive mode avatars have role="button", are focusable, and support keyboard interaction

+ + +

Avatar - Deprecated interactive property

+

The interactive property (deprecated) fires events but doesn't affect accessibility

+ +

For proper accessibility, use mode="Interactive" instead

+
diff --git a/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx b/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx index b879a34d8cca..ea28bf8de93c 100644 --- a/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx +++ b/packages/website/docs/_components_pages/main/Avatar/Avatar.mdx @@ -32,13 +32,13 @@ The Avatar comes in several sizes (S to XL). -### Interactive -The Avatar can be interactive, e.g. responds to hover, focus and press. +### Interactive Mode +The Avatar can be set to interactive mode with `mode="Interactive"`, making it focusable with role="button" and enabling keyboard interaction. This is the recommended way to make an avatar interactive. ### Decorative Mode -The Avatar can be set to decorative mode, making it purely visual without semantic content. This is useful when the avatar is used for visual purposes only and shouldn't be announced by screen readers. +The Avatar can be set to decorative mode with `mode="Decorative"`, making it purely visual without semantic content (role="presentation", aria-hidden="true"). This is useful when the avatar is used for visual purposes only and shouldn't be announced by screen readers. diff --git a/packages/website/docs/_samples/main/Avatar/Decorative/sample.html b/packages/website/docs/_samples/main/Avatar/Decorative/sample.html index 65afab8f49e4..8cf9bfdcacc1 100644 --- a/packages/website/docs/_samples/main/Avatar/Decorative/sample.html +++ b/packages/website/docs/_samples/main/Avatar/Decorative/sample.html @@ -31,8 +31,8 @@
- - Interactive property overrides decorative mode - avatar becomes interactive + + Interactive mode - focusable with role="button"
diff --git a/packages/website/docs/_samples/main/Avatar/Interactive/sample.html b/packages/website/docs/_samples/main/Avatar/Interactive/sample.html index 2f347b188a0f..08505a234994 100644 --- a/packages/website/docs/_samples/main/Avatar/Interactive/sample.html +++ b/packages/website/docs/_samples/main/Avatar/Interactive/sample.html @@ -11,7 +11,7 @@ - +