Icon is non focusable without making it interactive

[abhi091000]

Is your feature request related to a problem?

When a user navigates through the icon the focus will not point to that icon and it goes missing in the jaws reader.

Describe the solution you'd like

In the current UI5 Web Components, the Icon component behaves differently based on whether it is marked as interactive or not. When the interactive property is set to true, the icon becomes focusable via the keyboard (e.g., using the Tab key), which provides users with the ability to interact with the element. However, in this mode, it may give the impression that the icon has associated actions or events, potentially leading to confusion if no event handler is implemented. Conversely, when the icon is set to non-interactive, it is not focusable by default, which prevents users from accessing the icon via keyboard navigation.

Key Concerns:
Focus and Perception of Interactivity:

Interactive Mode: When the interactive property is enabled, the icon becomes focusable, which means it can be accessed via keyboard navigation. However, this introduces a potential accessibility issue because users may expect the icon to trigger an event (e.g., onClick or onPress), especially if no event handler is defined. This could lead to confusion if the icon does not respond to user input, as users may believe the element is broken or malfunctioning.

Non-Interactive Mode: In this mode, the icon is not focusable, which may improve the clarity for users who rely on keyboard navigation, as it indicates that the icon is not meant to be interacted with. However, this could negatively impact accessibility for users who need to access the icon for visual purposes or as part of the UI’s structure without necessarily interacting with it.

Describe alternatives you've considered

please refer to this stackblitz example where it can reproducible:-
https://stackblitz.com/edit/github-3utwkqxh?file=src%2FApp.tsx

Additional Context

in the SS the icon is shown as focusable

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @abhi091000

please use the correct template, this is not a feature request, but a bug report.

Your example is showing the ObjectStatus. When rendering a custom icon in this component it should only be decorative, meaning it shouldn't be picked up by screen readers. You can achieve that by setting the mode prop to "Decorative". We'll add a note about this to the icon prop description.
For the internal icons of the ObjectStatus, we previously set aria-hidden because the "Decorative" mode wasn't available when we first implemented the component. The linked PR will change that.

If the interactive prop of the Icon component is set to true the click event should be handled as well, otherwise the Icon shouldn't be interactive.

In case this issue is regarding the ObjectStatus and not Icons in general, the linked PR will solve this. Otherwise please create a new issue using our "Bug Report" template.