Skip to content

feat(ui5-avatar): add mode property with three modes#13004

Open
plamenivanov91 wants to merge 11 commits intomainfrom
avatar-decorative-prop
Open

feat(ui5-avatar): add mode property with three modes#13004
plamenivanov91 wants to merge 11 commits intomainfrom
avatar-decorative-prop

Conversation

@plamenivanov91
Copy link
Contributor

@plamenivanov91 plamenivanov91 commented Feb 2, 2026

Avatar component now supports the 'mode' property with three options:

  • 'Image' (default) - renders with role="img"
  • 'Decorative' - renders with role="presentation" and aria-hidden="true",
    making it hidden from assistive technologies
  • 'Interactive' - renders with role="button", focusable, with keyboard
    interaction support

The existing 'interactive' boolean property remains fully supported and
takes precedence over the 'mode' property. When interactive=true, the
avatar behaves as interactive regardless of the mode value.

Both interactive=true and mode="Interactive" produce identical behavior,
providing two ways to make avatars interactive with proper accessibility.

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.
@ui5-webcomponents-bot
Copy link
Collaborator

ui5-webcomponents-bot commented Feb 2, 2026

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 2, 2026 15:36 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 2, 2026 16:50 Inactive
- new 'mode' property with 'Interactive' value
- added since tags
- updated samples and documentation
- fixed related tests
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 3, 2026 16:51 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 9, 2026 09:03 Inactive
@ilhan007
Copy link
Contributor

ilhan007 commented Feb 9, 2026

as 2.19 is released - the since info should be updated to 2.20

Copy link
Contributor

@yanaminkova yanaminkova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently, when mode="Interactive" is set, the avatar does not appear interactive because the corresponding CSS styles are not applied.

Also, until the interactive property is deleted in version 3.0, its current behavior must remain unchanged. Currently, when the interactive property is used, the avatar only appears visually interactive, but it is internally rendered with role="img".

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 9, 2026 14:45 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 9, 2026 15:01 Inactive
@plamenivanov91 plamenivanov91 changed the title feat(ui5-avatar): add mode property feat(ui5-avatar): add mode property with three modes Feb 11, 2026
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 11, 2026 15:03 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview February 11, 2026 15:36 Inactive
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants