ui5-webcomponents
ui5-webcomponents copied to clipboard
[a11y][Avatar]: Focus visuals missing after ENTER key use
Bug Description
When focusing an Avatar component the item receives a focus ring, to indicate it has focus. Now if the user used the ENTER key to trigger the Avatar's action the focus visual is removed and the Avatar component does not visualize a focus ring once it is focused.
Compare with this implementation where the focus is provided: https://sapui5.hana.ondemand.com/#/entity/sap.m.Avatar/sample/sap.m.sample.AvatarWithAffordance or the Button component: https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-button--docs
Affected Component
Avatar
Expected Behaviour
The focus is displayed whenever the component receives focus. Independent from states the Avatar may implement (e.g. a selection, or a visited state).
Isolated Example
https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-avatar--docs
Steps to Reproduce
- Move focus onto a Avatar by using the TAB key.
- See how the focus is visualized, a focus ring appears (2px wide)
- Now press ENTER to trigger the Avatar.
- The visual estate changes from a focus ring with 2px to a ring with 1px.
- Move focus out of the component by pressing TAB.
- Press Shift+TAB to move focus back on the component
- See that the focus visual is now missing. In this state the user does not know where the focus is and thus lost control over the user interface when using keyboard-only interaction.
Log Output, Stack Trace or Screenshots
No response
Priority
Medium
UI5 Web Components Version
1.18.0
Browser
Chrome, Safari
Operating System
macOS 14.2.1
Additional Context
Accessibility
Organization
No response
Declaration
- [X] I’m not disclosing any internal or sensitive information.