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

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

@@ -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);
+    },
+  );
+});

packages/devextreme-scss/scss/widgets/generic/gridBase/_colors.scss

@@ -86,12 +86,6 @@ $datagrid-row-focused-bg: null !default;
 $datagrid-hover-bg: null !default;
 $datagrid-row-hovered-color: null !default;
 
-/**
-* $name 30. Context menu icon color
-* $type color
-*/
-$datagrid-menu-icon-color: null !default;
-
 /**
 * $name 40. Modified data border color
 * $type color
@@ -219,7 +213,6 @@ $datagrid-draggable-column-text-color: null !default;
   $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
   $datagrid-hover-bg: darken($base-bg, 2%) !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;
@@ -260,7 +253,6 @@ $datagrid-draggable-column-text-color: null !default;
   $datagrid-row-focused-bg: $base-accent !default;
   $datagrid-row-hovered-color: $base-text-color !default;
   $datagrid-hover-bg: $base-bg !default;
-  $datagrid-menu-icon-color: $base-icon-color !default;
   $datagrid-cell-modified-border-color: $base-text-color !default;
   $datagrid-nodata-color: $base-text-color !default;
   $datagrid-group-row-color: $base-text-color !default;
@@ -305,7 +297,6 @@ $datagrid-draggable-column-text-color: null !default;
   $datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default;
   $datagrid-hover-bg: lighten($datagrid-base-background-color, 4%) !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;
@@ -348,7 +339,6 @@ $datagrid-draggable-column-text-color: null !default;
   $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
   $datagrid-hover-bg: darken($base-bg, 2%) !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;
@@ -391,7 +381,6 @@ $datagrid-draggable-column-text-color: null !default;
   $datagrid-row-focused-bg: mix($base-bg, $base-accent, 15%) !default;
   $datagrid-hover-bg: $base-row-alternation-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: darken($datagrid-base-color, 40%) !default;
   $datagrid-group-row-color: $base-header-color !default;
@@ -434,7 +423,6 @@ $datagrid-draggable-column-text-color: null !default;
   $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
   $datagrid-hover-bg: darken($base-bg, 3%) !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;
@@ -477,7 +465,6 @@ $datagrid-draggable-column-text-color: null !default;
   $datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default;
   $datagrid-hover-bg: darken($datagrid-base-background-color, 4%) !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;
@@ -520,7 +507,6 @@ $datagrid-draggable-column-text-color: null !default;
   $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
   $datagrid-hover-bg: darken($datagrid-base-background-color, 2%) !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;

packages/devextreme-scss/scss/widgets/generic/gridBase/_index.scss

@@ -45,14 +45,6 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
 @mixin grid-base($widget-name) {
   .dx-#{$widget-name},
   .dx-#{$widget-name}-container {
-    &.dx-filter-menu {
-      .dx-menu-item-has-icon {
-        .dx-icon {
-          color: $datagrid-menu-icon-color;
-        }
-      }
-    }
-
     &.dx-context-menu {
       .dx-menu-items-container {
         .dx-icon-context-menu-sort-asc {
@@ -555,12 +547,6 @@ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic
       }
     }
 
-    .dx-menu-item-content {
-      .dx-icon {
-        color: $datagrid-menu-icon-color;
-      }
-    }
-
     td .dx-editor-container .dx-filter-range-content {
       padding: $generic-grid-base-cell-padding $generic-grid-base-cell-padding $generic-grid-base-cell-padding $generic-grid-base-texteditor-input-padding;
     }

packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss

@@ -73,12 +73,6 @@ $datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default;
 $datagrid-hover-bg: null !default;
 $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;
-
 /**
 * $name 40. Modified data background color
 * $type color

packages/devextreme-scss/scss/widgets/material/gridBase/_index.scss

@@ -63,8 +63,6 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
     &.dx-filter-menu {
       .dx-menu-item-content {
         .dx-icon {
-          color: $datagrid-menu-icon-color;
-
           @include dx-icon-sizing($material-grid-base-filter-icon-size - 4);
 
           &.dx-icon-filter-operation-default {

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/filtering.integration.tests.js

@@ -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');
         }
     });
 

packages/testcafe-models/dataGrid/filter/cell.ts

@@ -2,6 +2,7 @@ import FocusableElement from '../../internal/focusable';
 
 const CLASS = {
   filterMenu: 'dx-filter-menu',
+  filterMenuItem: 'dx-menu-item',
   editorInput: 'dx-texteditor-input',
   filterEditor: 'dx-editor-with-menu',
   focused: 'dx-focused',
@@ -16,7 +17,7 @@ export default class FilterCell extends FocusableElement {
   }
 
   getSearchIcon(): FocusableElement {
-    return new FocusableElement(this.element.find(`.${CLASS.filterMenu}`));
+    return new FocusableElement(this.element.find(`.${CLASS.filterMenuItem}`));
   }
 
   getEditorInput(): FocusableElement {

packages/testcafe-models/dataGrid/index.ts

@@ -35,6 +35,8 @@ export const CLASS = {
   filterPanel: 'filter-panel',
   filterRow: 'filter-row',
   filterRangeOverlay: 'filter-range-overlay',
+  filterMenu: 'dx-filter-menu',
+  filterMenuItem: 'dx-menu-item',
   focusOverlay: 'focus-overlay',
   pager: 'pager',
   editFormRow: 'edit-form',
@@ -224,6 +226,7 @@ export default class DataGrid extends Widget {
   getFilterRangeOverlay(): Selector {
     return this.body.find(`.${this.addWidgetPrefix(CLASS.filterRangeOverlay)}`);
   }
+
   getFocusOverlay() {
     return this.body.find(`.${this.addWidgetPrefix(CLASS.focusOverlay)}`);
   }