Skip to content

feat(ui5-avatar-badge): add accessibleName property for custom tooltip#13390

Open
plamenivanov91 wants to merge 4 commits intomainfrom
avatar-tooltip
Open

feat(ui5-avatar-badge): add accessibleName property for custom tooltip#13390
plamenivanov91 wants to merge 4 commits intomainfrom
avatar-tooltip

Conversation

@plamenivanov91
Copy link
Copy Markdown
Contributor

The badge now supports a new accessibleName property to customize the tooltip text displayed on hover. When not provided, the badge uses a smart fallback:

  1. User-provided accessibleName (highest priority)
  2. Icon semantic name (e.g., "edit" -> "Edit")
  3. i18n "Avatar" text from message bundle (lowest, ensures always defined)

This gives developers full control over badge accessibility while maintaining sensible defaults for better user experience and accessibility.

  • Added public accessibleName property
  • Integrated i18n bundle support with @i18n decorator for fallback
  • Updated Icon mode from "Decorative" to "Image" to enable tooltip display
  • Added comprehensive Cypress tests for default, custom, and invalid icon cases
  • Updated documentation with accessibleName property explanation
  • Fixed React sample alignment by wrapping avatars in flex container
  • Updated HTML and React test pages with accessibility examples

…p text

The badge now supports a new accessibleName property to customize the tooltip
text displayed on hover. When not provided, the badge uses a smart fallback:
1. User-provided accessibleName (highest priority)
2. Icon semantic name (e.g., "edit" -> "Edit")
3. i18n "Avatar" text from message bundle (lowest, ensures always defined)

This gives developers full control over badge accessibility while maintaining
sensible defaults for better user experience and accessibility.

- Added public accessibleName property
- Integrated i18n bundle support with @i18n decorator for fallback
- Updated Icon mode from "Decorative" to "Image" to enable tooltip display
- Added comprehensive Cypress tests for default, custom, and invalid icon cases
- Updated documentation with accessibleName property explanation
- Fixed React sample alignment by wrapping avatars in flex container
- Updated HTML and React test pages with accessibility examples
@plamenivanov91 plamenivanov91 requested a review from kgogov April 15, 2026 12:40
@ui5-webcomponents-bot
Copy link
Copy Markdown
Collaborator

ui5-webcomponents-bot commented Apr 15, 2026

@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview April 15, 2026 12:47 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview April 15, 2026 13:42 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview April 15, 2026 14:20 Inactive
@ui5-webcomponents-bot ui5-webcomponents-bot temporarily deployed to preview April 16, 2026 06:46 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.

2 participants