[a11y][Avatar]: Focus visuals missing after ENTER key use

[OliKei]

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

1. Move focus onto a Avatar by using the TAB key.
2. See how the focus is visualized, a focus ring appears (2px wide)
3. Now press ENTER to trigger the Avatar.
4. The visual estate changes from a focus ring with 2px to a ring with 1px.
5. Move focus out of the component by pressing TAB.
6. Press Shift+TAB to move focus back on the component
7. 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.

[vladitasev]

Hello colleagues,

The bug is reproducible. Hitting Enter repeatedly makes ui5-avatar behave kind of like a "toggle button".

However, this seems intended, judging by this snippet of code:

	_fireClick() {
		this.fireEvent("click");
		this.pressed = !this.pressed;
	}

Please have a look

BR, Vladi

[OliKei]

In case the Avatar is designed to work like a toggle button the implementation should probably be consistent too. However, the toggle button allows toggling via SPACE or ENTER key but does not allow to trigger an action.

Isn't the designed purpose of the Avatar component to trigger actions? For purposes such as displaying details on the Avatar object (e.g. Adress data, etc). The sample of a pressed state may be misleading... if it is not the designed purpose to toggle Avatars. Maybe the pressed state is provided as long as the fireEvent shows a modal dialog with object details and restores to an unpressed state once the modal is removed and the focus returns on the Avatar component.

[OliKei]

I checked the Avatar group which provides an option to select items.

So the Avatar item, which may also get used in the Avatar Group, may also provide a selected state. Selections are typically toggled via the use of the SPACE key. The ENTER key is usually used for triggering actions. However, if both is possible at the same time there should probably be a recommendation how or which of the actions are triggered via mouse or touch use.

[kgogov]

Hello @OliKei,

Thank you for your report! The issue you described has been fixed with the following change: #8474. Therefore, I am closing this ticket.

Best regards, Konstantin