[Button | React | 1.20.0 | icons | theming | localization | i18n | typescript]: Buttons_No Visible focus

[durgaprasad1995]

Bug Description

When we are using this theme Quartz-light(sap_fiori_3) the button visible focus is not clear when compare the other's

Visible focus indicator is not clearly visible for all emphasized buttons.

Expected behavior
Strong and clear visible focus should be provided for all the UI elements.

Plug and play here (https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/inputs-button--docs&globals=theme:sap_fiori_3)

Affected Component

Button

Expected Behaviour

Strong and clear visible focus should be provided for all the UI elements.

Isolated Example

https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/inputs-button--docs&globals=theme:sap_fiori_3

Steps to Reproduce

1.Go to https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/inputs-button--docs&globals=theme:sap_fiori_3
2. select the theme Quartz-light
3. select the button design Emphasized
4. then click on tab on the button(example) check the focus
...

Log Output, Stack Trace or Screenshots

No response

Priority

High

UI5 Web Components Version

1.20.0

Browser

Chrome

Operating System

windows

Additional Context

No response

Organization

SAP

Declaration

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

[IlianaB]

Hello @durgaprasad1995 ,
could you please share some information, what do you mean by "compared to the others"? Focus of the Emphasized button with Quartz Light theme is implemented according to the specification - 0.0625rem dotted #fff color.

Regards,
Iliana

[IlianaB]

Hello @SAP/ui5-webcomponents-topic-b , you need to zoom too see actually there is a solid black border, set with styles:
:host([design="Emphasized"][desktop]) .ui5-button-root:focus-within::before, :host([design="Emphasized"]
That makes the focus not so clearly visible.

Regards,
Iliana

[durgaprasad1995]

Hello @durgaprasad1995 , could you please share some information, what do you mean by "compared to the others"? Focus of the Emphasized button with Quartz Light theme is implemented according to the specification - 0.0625rem dotted #fff color.

Regards, Iliana

When compare to Other Theme for this theme (Quartz Light) focus is not very clear

In our application looks like this

[IlianaB]

Hello @durgaprasad1995 ,
thank you for sharing this with us! It wasn't very clear to me without zoom, but then I saw it. I believe the solid black border, seen through the dotted white one, should not be there. And because of it, the focus outline looks a little bit blurred.

Regards,
Iliana

[durgaprasad1995]

Hi @IlianaB any update on this

[DMihaylova]

Hi @durgaprasad1995,

Thank you for your patience!
We're checking it and syncs with designers are taking place.
We'll update you soon.

Regards,
Diana

[ui5-webcomponents-bot]

🎉 This issue has been resolved in version v2.4.0-rc.4 🎉

The release is available on v2.4.0-rc.4

Your semantic-release bot 📦🚀