search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.51k stars 263 forks source link

Input : Double focus is seen when user tries to focus on the icon present inside Input element #8970

Closed pppwr7 closed 3 months ago

pppwr7 commented 4 months ago

Describe the bug

When I focus on the icon present inside the input field, then the blue outline for focus is seen for the icon as well as the input box. Ideally, the blue outline should be only shown on the icon and not on the input box. This issue has been raised as part of accessibility testing.

Isolated Example

https://stackblitz.com/edit/github-pzlhay-kxhlew?file=src%2FApp.tsx

Reproduction steps

  1. go to https://stackblitz.com/edit/github-pzlhay-kxhlew?file=src%2FApp.tsx
  2. click on the input box to focus on it. One can see the blue outline on the input box 3.click on the 'x' icon to put focus on it. One can see the blue outling on the icon as well as on the input box

Expected Behaviour

blue outline on input box should not be seen on focus on icon

Screenshots or Videos

image

UI5 Web Components for React Version

latest

UI5 Web Components Version

latest

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

Lukas742 commented 4 months ago

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

GerganaKremenska commented 4 months ago

Hello @SAP/ui5-webcomponents-topic-rl ,

When an input is focused and interactive icon is sloted, double focus appears. Screenshot 2024-05-15 at 16 01 08

The issue is reproducible this isolated example.

Not sure if this should be fixed in the icon or input. I am handing it over to the input owners as the double focus is visible there.

Best Regards, Gergana

ndeshev commented 3 months ago

Hello @pppwr7 the interactive property of the ui5-icon component defines if the icon should be focusable - https://sap.github.io/ui5-webcomponents/nightly/components/Icon/#interactive, and as you pointed out in the description of the issue - it should not be when it is used in а ui5-input slot.

Is there a special reason why you add the 'interactive' property?

ndeshev commented 3 months ago

Hello, I the issue is no longer producible in the nightly version I will close the issue for now.

pppwr7 commented 3 months ago

ndeshev please let me know the lib versions in the nightly version where the issue has been fixed. Also, we have to set the icon as interactive as we want to perform search action on click of the icon in the input field