[SF][A11y][DatePicker] - In High contrast black on white theme (sap_belize_hcw), the current date outline in date picker fails to meet 7:1

[2bno1]

Bug Description

In High contrast black on white theme (sap_belize_hcw), the current date outline in date picker fails to meet 7:1

Expected Behavior

UI5 reference: If you observe there is a white space between the grey background and the purple outline in order for this outline color to meet 7:1 color contrast against white which is the immediate background color. Same must be applied here as well.

Steps to Reproduce

1. Go to https://sap.github.io/ui5-webcomponents-react/?path=/docs/inputs-datepicker--default-story&globals=theme:sap_belize_hcw;contentDensity:Compact
2. Open the date picker
3. Observe the contrast

Context

• UI5 Web Components version: 1.4.0
• OS/Platform: macOS
• Browser: Chrom
• Affected component: DatePicker

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

• Breaks entire application or system - High or Very High
• Accessibility issue - Medium or High
• Functional issue - Medium or High
• Visual issue - Low or Medium

[dimovpetar]

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

This issue is also reproducible in the test pages - https://sap.github.io/ui5-webcomponents/main/playground/main/pages/DatePicker/?sap-ui-theme=sap_belize_hcw

Best regards, Petar

[unazko]

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

A consultation with the visual design colleagues should take place.

Best Regards, Boyan Rakilovski

[unazko]

Hello @2bno1,

After a consultation with the accessibility experts I've understood that there is actually no accessibility issue regarding the contrast ratio as 7:1 would be for a regular text and its background. We have above the minimal contrast ratio between a UI graphical areas like the purple outline color and the grey background color. The showcased by the analyzer tool is a false positive. There are visual deviations from the specification though, which we can address through the current incident. As a result we could continue with the incident processing in a regular manner according to the medium priority.

Best Regards, Boyan Rakilovski

[anuvenkatesh1]

@unazko Thank you. Could you please consult with your accessibility experts again because as per SAP standards, in high contrast themes, the outline is expected to meet 7:1 color contrast against the immediate background because its a visual detail that identifies "today", which in the WC date picker case (as seen in the "actual" screenshot attached in the ticket description is purple against grey which seems to be below 7:1). The expected behavior shows SAP UI5 date picker which has a white space between the purple and grey for this reason as purple against white will meet 7:1. Hence please consider this an accessibility violation and proceed accordingly. Thank you.

[anuvenkatesh1]

I have spoken to our Central team expert. She didn't have access to github so pasting her comments here: "SAP products are supposed to follow the SAP Product Standards as these are our quality measures. The product standard Accessibility also incorporates user experience from affected users and customer feedback. Therefore, it also contains rules for color contrast for high contrast themes also for non-text content, as Anu already wrote and linked. The lack of specific success criteria in external regulations shall not stop us from supporting our users the best we can.

So please enhance the visibility and perceivability of the today marker. The Horizon color palette offers appropriate colors. As Anu wrote, aligning with the design in UI5 also contributes to a consistent user experience, which in turn supports users with learning issues, memory issues, users who are easily distracted or stressed, to name a few."

If you have further concerns, please reach out to our Central team Accessibility expert.

[don-obrien]

Can we please have a status update on this? When can we expect a fix?