Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task done
pppwr7 opened this issue May 15, 2024 · 4 comments
Closed
1 task done
Assignees
Labels
bug This issue is a bug in the code Medium Prio TOPIC RL

Comments

@pppwr7
Copy link

pppwr7 commented May 15, 2024

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

  • I’m not disclosing any internal or sensitive information.
@pppwr7 pppwr7 added the bug This issue is a bug in the code label May 15, 2024
@Lukas742
Copy link
Collaborator

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

@Lukas742 Lukas742 transferred this issue from SAP/ui5-webcomponents-react May 15, 2024
@GerganaKremenska GerganaKremenska self-assigned this May 15, 2024
@GerganaKremenska GerganaKremenska added this to New Issues in Maintenance - Topic RL via automation May 15, 2024
@GerganaKremenska
Copy link
Member

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

@GerganaKremenska GerganaKremenska removed their assignment May 15, 2024
@niyap niyap self-assigned this May 28, 2024
@niyap niyap moved this from New Issues to In progress in Maintenance - Topic RL May 28, 2024
@niyap niyap removed their assignment Jun 7, 2024
@niyap niyap moved this from In progress to New Issues in Maintenance - Topic RL Jun 7, 2024
@niyap niyap moved this from New Issues to In progress in Maintenance - Topic RL Jun 7, 2024
@niyap niyap moved this from In progress to New Issues in Maintenance - Topic RL Jun 7, 2024
@ndeshev ndeshev moved this from New Issues to In progress in Maintenance - Topic RL Jun 10, 2024
@ndeshev ndeshev self-assigned this Jun 10, 2024
@ndeshev
Copy link
Contributor

ndeshev commented Jun 11, 2024

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
Copy link
Contributor

ndeshev commented Jun 14, 2024

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

@ndeshev ndeshev closed this as completed Jun 14, 2024
Maintenance - Topic RL automation moved this from In progress to Completed Jun 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug This issue is a bug in the code Medium Prio TOPIC RL
Projects
Status: Completed
Development

No branches or pull requests

5 participants