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

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

Open pppwr7 opened this issue 3 months ago • 2 comments

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

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

pppwr7 avatar May 15 '24 09:05 pppwr7