Ocean Blue swatch violates accessibility criteria for contrast

[dtopalov]

Describe the bug When the Default theme Ocean Blue swatch is applied, multiple accessibility criteria for contrast across multiple components are violated.

To reproduce Some of the examples include (but there are probably much more, for example buttons in toolbars scenarios):

1. The focus indicator of the PanelBar has a contrast ratio of 1.32:1. Should be at least 3:1: https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance-minimum.html
2. Dropdowns - Focus state contrast ratio is 1.19 against the background – against the border of the element is 1.1, both of which fall below the Contrast ratio minimum.
3. Grid - Contrast ratio of the focus indicator is 1.16.
4. Gantt - Contrast ratio of the selected timeline item is 2.16.
5. Button - https://www.aditus.io/button-contrast-checker & https://runner.telerik.io/fullscreen/IXopEHeR

Expected behavior When the swatch is applied no WCAG criteria related to contrast ratio are violated across all components and suites.

Affected package

• theme-default

Affected suites

• Kendo UI for jQuery
• Kendo UI for Angular
• Kendo UI for React
• Kendo UI for Vue
• Telerik UI for Blazor

Affected browsers

• All

Build system information (please remove the unneeded items)

• Not Applicable

Additional context All Kendo products are undergoing a major effort for improved compliance with the accessibility standards and best practices. Having a theme/swatch that complies with all established requirements is an integral part of delivering accessible and compliant components.

[veselints]

Automation of the test process may be based on: https://github.com/telerik/kendo-themes/issues/2468

[jivanova]

When fixing the issue keep in mind the WCAG 2.2. compliance requirements:

Accessibility Criteria

2.4.11 Focus Appearance (Minimum) Level AA

When solid (not dashed) and fully enclosing the element, the focus indicator must have:

Minimum area (thickness) (1px). Minimum contrast ratio against its background (3:1). Minimum contrast ratio against the same pixel the indicator is displayed on when no focus is present (3:1). Minimum contrast ration against any parts of the focused element that are adjacent to the indicator (3:1).

https://w3c.github.io/wcag/guidelines/22/#focus-appearance

!!! We must also review 1.4.11 Non text contrast Level AA compliance in all states of our controls and focus indicator is present.

https://w3c.github.io/wcag/guidelines/22/#non-text-contrast

2.4.12 Focus Not Obscured (Minimum) Level AA – We must review the components having scrollable content and ensure there is no state in which focused element remains outside of the currently visible scrollable area.

https://w3c.github.io/wcag/guidelines/22/#focus-not-obscured-minimum

2.4.13 Focus Not Obscured (Enhanced) Level AAA – same as above

https://w3c.github.io/wcag/guidelines/22/#focus-not-obscured-enhanced

In addition, let's have a testing solution for color-contrast as well. https://github.com/telerik/kendo-themes/blob/develop/packages/default/scss/core/functions/_colors.scss

In case the evaluation of the report needs design, please update the parent issue with design & front-end R2 planning:

https://github.com/telerik/web-components-planning/issues/125

[veselints]

Implement WCAG contrast ratio testing

• [x] axe tests against color-contrast rule for violations;
• [x] exclude reports for disabled elements;
• [x] axe tests against color-contrast rule for incomplete;
• [x] exclude incomplete reports for items not present in the view;
• [x] axe tests against color-contrast-enhanced rule for violations;
• [x] add focus state contrast test (added both WCAG 2.1 SC 1.4.11 and WCAG 2.2 SC 2.4.11 checks);
• [ ] research/add task to build only default-ocean-blue swatch;
• [x] create CI-a11y that fails for color-contrast and focus-contrast violations and reports color-contrast incomplete and color-contrast-enhanced violations;
• [x] add documentation describing the focus contrast SC exceptions (those that are meaningful): https://github.com/telerik/kendo-themes/issues/3724#issuecomment-1318675058
• [x] exclude failing text contrast checks for known scenarios
• [x] add documentation text for known failing text contrast scenarios: https://github.com/telerik/kendo-themes/issues/3724#issuecomment-1342922473

[veselints]

Scenarios in which focus indicator fails WCAG 2.1 SC 1.4.11

After a huge effort from Dimitar, he managed to reduce the focus indicator contrast issues to the following set:

• TimeSelector: TimeList in the Popup;
• Button: In Outline mode: fails contrast against border.
• Button: Warning color does not meet contrast requirements
• Chip and MenuButton: In Outline mode with Base color: fails contrast against border.
• ColorPalette: Tile focus indicator
• BottomNavigation: Item focus
• Card: when k-focus and k-selected are used simultaneously
• Rating: fails contrast for the focus indicator on its items
• Stepper: the focus indicator of a not completed (or current) step in Stepper: fails contrast against white background

[veselints]

Scenarios in which text contrast fails WCAG 2.1 SC 1.4.3

• BottomNavigation: Most colors apart from the default (gray) fail items text contrast;
• Chip: Most colors apart from the default (gray) fail text contrast;
• TreeMap: Colors used in the TreeMap do not ensure text contrast;
• Loader: When Loader is used without panel its text does not contrast against the overlay color;
• Button: Warning color does not meet minimum text contrast requirements;
• Avatar: Warning color does not meet minimum text contrast requirements;

[veselints]

Suggested text that can be added to the docs and the VPAT, so those properly represent the state of our components: BottomNavigation, ColorPalette and Rating fail WCAG success criteria 1.4.11 Non-text contrast for the focus indicator on its items.