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.5k stars 260 forks source link

[SAP][Button]: On mouse hover button border fails to meet color contrast ratio of 3:1 #6840

Closed rama1990br closed 7 months ago

rama1990br commented 1 year ago

Describe the bug

On mouse hover button border fails to meet color contrast ratio of 3:1.

Isolated Example

No response

Reproduction steps

Instance: REMOVED - see internal slack channel

Steps: Login to instance. Directly goto link given Script-Based Integration Settings page is opened. Goto Add Vendor button Verify color on mouse hover. Then on Script-Based Integration Settings, verify color for all button/UI elements on mouse hover

Actual Results: On mouse hover, buttons have light grey border with color ratio of 1.18 which does not meet 3:1 ratio

Expected Behaviour

The text and border foreground color and background color of each interactive element should have a contrast ratio of at least 3:1.

Screenshots or Videos

info icon border color issue border color ratio issue

UI5 Web Components for React Version

1.5.1

UI5 Web Components Version

1.9.1

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Relevant log output

No response

Declaration

MarcusNotheis commented 1 year ago

Hi @rama1990br,

please do not post internal system links with their credentials in the issue description. These issues are public and everybody can use these credentials to access our internal test systems. I've now removed the information from the issue and moved them to internal slack channel.

This is also explicitly mentioned in our issue template:

Please don't disclose any internal or sensitive information like: internal urls, login credentials, screenshots of applications or features in development. This is a public GitHub repository and all the information is publicly available.

As the affected component is developed in the UI5 Web Components repository, I'll forward this issue to our colleagues.

Best regards, Marcus

unazko commented 1 year ago

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

This issue is reproducible via the following playground same for the "Default" and "Transparent" design types: https://sap.github.io/ui5-webcomponents/playground/components/Button/

Graphical components should have contrast ratio of 3:1 between one another.

For those design types this ratio is 1.5:1. We would need to check this one with the visual design colleagues.

Best regards, Boyan

rama1990br commented 1 year ago

Hi Team, Can we please have an update on this ticket?

tsanislavgatev commented 7 months ago

Hello colleagues,

For those design types this ratio is 1.5:1. and after applying the new style parameters, the issue is no longer reproducible. https://sap.github.io/ui5-webcomponents/playground/?path=/story/main-button--different-types

Best Regards, Tsanislav