DataGrid - Contrast between icons in the Filter Row menu and their background doesn't comply with WCAG accessibility standards (T1257970) (#28564)

Author: tongsonbarbs

apps/demos/testing/etalons/DataGrid-DeferredSelection (material.blue.light).png

@@ -0,0 +1,56 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import FilterTextBox from 'devextreme-testcafe-models/dataGrid/editors/filterTextBox';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+import { getData } from '../helpers/generateDataSourceData';
+import { Themes } from '../../../helpers/themes';
+import { changeTheme } from '../../../helpers/changeTheme';
+
+fixture.disablePageReloads`DataGrid - contrast`
+  .page(url(__dirname, '../../container.html'));
+
+// T1257970
+[
+  Themes.genericLight,
+  Themes.fluentBlue,
+  Themes.materialBlue,
+].forEach((theme) => {
+  test('DataGrid - Contrast between icons in the Filter Row menu and their background doesn\'t comply with WCAG accessibility standards', async (t) => {
+    const dataGrid = new DataGrid('#container');
+    const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+    const searchButton = filterEditor.menuButton;
+    const filterMenu = filterEditor.menu;
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+    await t
+      .expect(dataGrid.isReady())
+      .ok();
+    await t
+      .click(searchButton)
+      .expect(filterMenu.element.exists)
+      .ok();
+    await t
+      .expect(await takeScreenshot(`T1257970-datagrid-menu-icon-contrast-${theme}.png`, dataGrid.element))
+      .ok()
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }).before(
+    async () => {
+      await changeTheme(theme);
+      await createWidget('dxDataGrid', {
+        dataSource: getData(5, 5),
+        filterRow: {
+          visible: true,
+        },
+      });
+    },
+  ).after(
+    async () => {
+      if (theme === Themes.genericLight) {
+        return;
+      }
+      await changeTheme(Themes.genericLight);
+    },
+  );
+});

apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_gridbox (material.blue.light).png

@@ -27,10 +27,9 @@ $menu-item-link-color: $base-link-color !default;
 $menu-item-focused-selected-bg: null !default;
 
 @if $mode == "light" {
-    $menu-item-focused-selected-bg: darken($base-bg, 9.8) !default;
+  $menu-item-focused-selected-bg: darken($base-bg, 9.8) !default;
 }
-  
+
 @if $mode == "dark" {
-    $menu-item-focused-selected-bg: lighten($base-bg, 18.04) !default;
+  $menu-item-focused-selected-bg: lighten($base-bg, 18.04) !default;
 }
-

e2e/testcafe-devextreme/tests/dataGrid/accessibility/contrast.ts

@@ -90,7 +90,7 @@ $datagrid-row-hovered-color: null !default;
 * $name 30. Context menu icon color
 * $type color
 */
-$datagrid-menu-icon-color: null !default;
+$datagrid-menu-icon-color: inherit !default;
 
 /**
 * $name 40. Modified data border color
@@ -218,7 +218,6 @@ $datagrid-text-stub-background-image-path: null !default;
   $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
   $datagrid-hover-bg: $base-hover-bg !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
-  $datagrid-menu-icon-color: $base-icon-color !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
   $datagrid-nodata-color: $base-label-color !default;
   $datagrid-group-row-color: $base-label-color !default;
@@ -302,7 +301,6 @@ $datagrid-text-stub-background-image-path: null !default;
   $datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default;
   $datagrid-hover-bg: $base-hover-bg !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
-  $datagrid-menu-icon-color: darken($base-icon-color, 33.7%) !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
   $datagrid-nodata-color: $datagrid-base-color !default;
   $datagrid-group-row-color: lighten($datagrid-base-color, 6.7%) !default;
@@ -344,7 +342,6 @@ $datagrid-text-stub-background-image-path: null !default;
   $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
   $datagrid-hover-bg: $base-hover-bg !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
-  $datagrid-menu-icon-color: $base-icon-color !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
   $datagrid-nodata-color: $base-icon-color !default;
   $datagrid-group-row-color: $base-text-color !default;
@@ -386,7 +383,6 @@ $datagrid-text-stub-background-image-path: null !default;
   $datagrid-row-focused-bg: mix($base-bg, $base-accent, 15%) !default;
   $datagrid-hover-bg: $base-hover-bg !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
-  $datagrid-menu-icon-color: $base-icon-color !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
   $datagrid-nodata-color: darken($datagrid-base-color, 40%) !default;
   $datagrid-group-row-color: $base-header-color !default;
@@ -428,7 +424,6 @@ $datagrid-text-stub-background-image-path: null !default;
   $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
   $datagrid-hover-bg: color.change(darken($base-bg, 9%), $alpha: 0.4) !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
-  $datagrid-menu-icon-color: $base-icon-color !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
   $datagrid-nodata-color: lighten($datagrid-base-color, 40%) !default;
   $datagrid-group-row-color: lighten($datagrid-base-color, 38.5%) !default;
@@ -470,7 +465,6 @@ $datagrid-text-stub-background-image-path: null !default;
   $datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default;
   $datagrid-hover-bg: $base-hover-bg !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
-  $datagrid-menu-icon-color: lighten($base-icon-color, 33.7%) !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
   $datagrid-nodata-color: $datagrid-base-color !default;
   $datagrid-group-row-color: darken($datagrid-base-color, 6.7%) !default;
@@ -512,7 +506,6 @@ $datagrid-text-stub-background-image-path: null !default;
   $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
   $datagrid-hover-bg: $base-webwidget-hover-background !default;
   $datagrid-row-hovered-color: $base-hover-color !default;
-  $datagrid-menu-icon-color: $base-icon-color !default;
   $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
   $datagrid-nodata-color: $base-icon-color !default;
   $datagrid-group-row-color: $base-icon-color !default;

e2e/testcafe-devextreme/tests/dataGrid/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-fluent.blue.light.png

@@ -77,7 +77,7 @@ $datagrid-row-hovered-color: $base-hover-color !default;
 * $name 30. Context menu icon color
 * $type color
 */
-$datagrid-menu-icon-color: lighten($base-icon-color, 33.7%) !default;
+$datagrid-menu-icon-color: inherit !default;
 
 /**
 * $name 40. Modified data background color

e2e/testcafe-devextreme/tests/dataGrid/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-generic.light.png

@@ -74,8 +74,9 @@ QUnit.module('Initialization', baseModuleConfig, () => {
         assert.notOk(subMenu._isVisible(), 'submenu is hidden');
     });
 
-    // T860356
-    QUnit.test('Filter row\'s menu icons and text should have different colors', function(assert) {
+    // T860356 - Deprecated change
+    // T1257970 - New change for Contrast Accessibility WCAG Standard
+    QUnit.test('Filter row\'s menu icons and text should have similar colors', function(assert) {
         // arrange
         const filterRowWrapper = dataGridWrapper.filterRow;
 
@@ -104,7 +105,7 @@ QUnit.module('Initialization', baseModuleConfig, () => {
         for(let i = 0; i < $items.length; i++) {
             $currentItem = $items.eq(i);
 
-            assert.notEqual($currentItem.find('.dx-menu-item-text').css('color'), $currentItem.find('.dx-icon').css('color'), 'colors are different');
+            assert.equal($currentItem.find('.dx-menu-item-text').css('color'), $currentItem.find('.dx-icon').css('color'), 'colors are similar');
         }
     });