feat(ui5-avatar): add mode property with three modes#13004
feat(ui5-avatar): add mode property with three modes#13004plamenivanov91 wants to merge 13 commits intomainfrom
Conversation
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.
|
🚀 Deployed on https://pr-13004--ui5-webcomponents-preview.netlify.app |
- new 'mode' property with 'Interactive' value - added since tags - updated samples and documentation - fixed related tests
|
as 2.19 is released - the since info should be updated to 2.20 |
There was a problem hiding this comment.
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".
plamenivanov91
force-pushed
the
avatar-decorative-prop
branch
from
9116c5c to
40c41ac
Compare
plamenivanov91
changed the title
yanaminkova
left a comment
yanaminkova
left a comment
There was a problem hiding this comment.
When the avatar is used with both mode="Interactive" and disabled set to true, the component still has role="button". In this case, the correct role should be img.
This works correctly when using interactive together with disabled.
# Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.
Nice catch. Fixed and added tests. |
5 participants
Avatar component now supports the 'mode' property with three options:
making it hidden from assistive technologies
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.