Ignoring a11y false positives violations related to li elements inside DatePicker with Time Component.

[siddhantrawal]

Two of the a11y violations related to DatePicker Component were failing locally but passing correctly on Cypress GUI. The issue was caused due to all the li elements inside the DatePickerWithTimeExample and DatePickerWithCombinedTimeExample Component not meeting color-contrast criteria locally.

Electron Browser ( DatePickerWithCombinedTimeExample):

FailureSummary: Element has insufficient color contrast of 1.38 (foreground color: #dbdbdb, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"

Electron Browser ( DatePickerWithTimeExample):

FailureSummary: Element has insufficient color contrast of 1.38 (foreground color: #dbdbdb, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"

Locally (Terminal) :

Cypress GUI:

As discussed during the call, they were false positives.

Change

Thanks to Rohan for this. Workaround for this was to ignore these violations as shown in this config.

Testing

Ran it locally and on Cypress GUI and no longer got the failure result.

Locally (Terminal) :

Cypress GUI:

Docs

"N/A".

[mayank99]

suggestions to improve maintainability:
(1) in the PR description, add an explanation with screenshot of exactly what part is triggering the false positive.
(2) in the code, include a comment linking to this PR.

[gretanausedaite]

No comments from my side.
There are couple more contrast failures in a11y test results. They are not false positive?

[siddhantrawal]

No comments from my side. There are couple more contrast failures in a11y test results. They are not false positive?

I have that in my mind and will plan to double-check if they are false positives or not. I plan to handle those in different PR if that's okay?

[siddhantrawal]

suggestions to improve maintainability: (1) in the PR description, add an explanation with screenshot of exactly what part is triggering the false positive. (2) in the code, include a comment linking to this PR.

Updated. Please Verify.

[mayank99]

Screenshots within cypress browser with highlights would better:

Combined with the full message (from the cypress browser console):

"Element has insufficient color contrast of 1.38 (foreground color: #dbdbdb, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"

[siddhantrawal]

Screenshots within cypress browser with highlights would better:

Combined with the full message (from the cypress browser console):

"Element has insufficient color contrast of 1.38 (foreground color: #dbdbdb, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1"

Updated. Thanks for the help.

[mayank99]

LGTM for now.

Since we discovered this issue was specific to Electron browser (which is what gets used in CI), we might want to consider switching to Chromium in a future PR.