ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard

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

Open OliKei opened this issue 7 months ago • 3 comments

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.

OliKei avatar Jan 02 '24 09:01 OliKei