Accessibility: DataGrid - Fix contrast issues (part 1) (#25430)

packages/devextreme/scss/widgets/generic/dataGrid/_index.scss

@@ -56,7 +56,7 @@
   }
 
   .dx-sort {
-    color: $datagrid-menu-icon-color;
+    color: $datagrid-columnchooser-item-color;
   }
 }
 

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

@@ -303,14 +303,14 @@ $datagrid-text-stub-background-image-path: null !default;
   $datagrid-selection-bg: #444 !default;
   $datagrid-row-selected-border-color: $datagrid-border-color !default;
   $datagrid-row-selected-color: $datagrid-base-color !default;
-  $datagrid-row-focused-color: $base-inverted-text-color !default;
-  $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
+  $datagrid-row-focused-color: $base-text-color !default;
+  $datagrid-row-focused-bg: color.change($base-accent, $alpha: 0.2) !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: darken($datagrid-base-color, 40%) !default;
-  $datagrid-group-row-color: darken($datagrid-base-color, 38.5%) !default;
+  $datagrid-nodata-color: $datagrid-base-color !default;
+  $datagrid-group-row-color: lighten($datagrid-base-color, 6.7%) !default;
   $datagrid-group-row-bg: lighten($datagrid-base-background-color, 3%) !default;
   $datagrid-master-detail-cell-bg: lighten($datagrid-base-background-color, 2%) !default;
   $datagrid-spin-icon-color: darken($base-icon-color, 38.5%) !default;
@@ -330,8 +330,8 @@ $datagrid-text-stub-background-image-path: null !default;
   $datagrid-column-separator-bg: color.change($base-accent, $alpha: 0.5) !default;
   $datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/dark/grid/text-stub.png') !default;
   $datagrid-cell-removed-border-color: $datagrid-border-color !default;
-  $datagrid-row-removed-bg: $datagrid-border-color !default;
-  $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
+  $datagrid-row-removed-bg: darken($datagrid-border-color, 6.67) !default;
+  $datagrid-cell-removed-text-color: color.change($base-text-color, $alpha: 0.7) !default;
 }
 
 @if $color == "darkmoon" {
@@ -475,14 +475,14 @@ $datagrid-text-stub-background-image-path: null !default;
   $datagrid-selection-bg: #e6e6e6 !default;
   $datagrid-row-selected-border-color: $datagrid-border-color !default;
   $datagrid-row-selected-color: $datagrid-base-color !default;
-  $datagrid-row-focused-color: $base-inverted-text-color !default;
-  $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
+  $datagrid-row-focused-color: $base-text-color !default;
+  $datagrid-row-focused-bg: color.change($base-accent, $alpha: 0.2) !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: lighten($datagrid-base-color, 40%) !default;
-  $datagrid-group-row-color: lighten($datagrid-base-color, 38.5%) !default;
+  $datagrid-nodata-color: $datagrid-base-color !default;
+  $datagrid-group-row-color: darken($datagrid-base-color, 6.7%) !default;
   $datagrid-group-row-bg: darken($datagrid-base-background-color, 3%) !default;
   $datagrid-master-detail-cell-bg: darken($datagrid-base-background-color, 2%) !default;
   $datagrid-spin-icon-color: lighten($base-icon-color, 38.5%) !default;
@@ -502,8 +502,8 @@ $datagrid-text-stub-background-image-path: null !default;
   $datagrid-column-separator-bg: color.change($base-accent, $alpha: 0.5) !default;
   $datagrid-text-stub-background-image-path: data-uri('images/widgets/generic/color-schemes/light/grid/text-stub.png') !default;
   $datagrid-cell-removed-border-color: $datagrid-border-color !default;
-  $datagrid-row-removed-bg: $datagrid-border-color !default;
-  $datagrid-cell-removed-text-color: $datagrid-columnchooser-item-color !default;
+  $datagrid-row-removed-bg: lighten($datagrid-border-color, 6.67) !default;
+  $datagrid-cell-removed-text-color: color.change($base-text-color, $alpha: 0.7) !default;
 }
 
 @if $color == "softblue" {

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

@@ -793,8 +793,8 @@ $grid-masterdetail-padding: 20px;
         &:not(.dx-row-lines) {
           & > td,
           & > tr:first-child > td {
-            border-top: 1px solid $datagrid-focused-border-color;
-            border-bottom: 1px solid $datagrid-focused-border-color;
+            border-top: 1px solid $datagrid-row-focused-bg;
+            border-bottom: 1px solid $datagrid-row-focused-bg;
           }
         }
       }
@@ -924,6 +924,7 @@ $grid-masterdetail-padding: 20px;
   .dx-#{$widget-name}-nodata {
     color: $datagrid-nodata-color;
     font-size: $generic-grid-base-nodata-font-size;
+    opacity: 0.7;
   }
 
   .dx-#{$widget-name}-bottom-load-panel {

packages/devextreme/scss/widgets/material/dataGrid/_index.scss

@@ -59,7 +59,7 @@
   }
 
   .dx-sort {
-    color: $datagrid-menu-icon-color;
+    color: $datagrid-columnchooser-item-color;
   }
 }
 

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

@@ -63,13 +63,13 @@ $datagrid-row-selected-color: $datagrid-base-color !default;
 * $name 65. Focused row text color
 * $type color
 */
-$datagrid-row-focused-color: $base-inverted-text-color !default;
+$datagrid-row-focused-color: $base-text-color !default;
 
 /**
 * $name 70. Focused row background color
 * $type color
 */
-$datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
+$datagrid-row-focused-bg: color.change($base-accent, $alpha: 0.2) !default;
 $datagrid-hover-bg: $base-hover-bg !default;
 $datagrid-row-hovered-color: $base-hover-color !default;
 
@@ -93,7 +93,7 @@ $datagrid-cell-removed-text-color: null !default;
 * $type color
 */
 $datagrid-row-invalid-faded-border-color: color.change($base-invalid-faded-border-color, $alpha: 0.32) !default;
-$datagrid-nodata-color: lighten($datagrid-base-color, 40%) !default;
+$datagrid-nodata-color: color.change($datagrid-base-color, $alpha: 0.54) !default;
 
 /**
 * $name 90. Group row text color
@@ -173,7 +173,7 @@ $datagrid-text-link-disabled-opacity: $base-disabled-opacity;
 $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
 
 @if $mode == "light" {
-  $datagrid-columnchooser-item-color: color.change($datagrid-base-color, $alpha: 0.54) !default;
+  $datagrid-columnchooser-item-color: color.change($datagrid-base-color, $alpha: 0.6) !default;
   $datagrid-block-separator-bg: darken($datagrid-base-background-color, 12%) !default;
   $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
@@ -188,7 +188,7 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
 }
 
 @if $mode == "dark" {
-  $datagrid-columnchooser-item-color: color.change($datagrid-base-color, $alpha: 0.6) !default;
+  $datagrid-columnchooser-item-color: color.change($datagrid-base-color, $alpha: 0.72) !default;
   $datagrid-block-separator-bg: lighten($datagrid-base-background-color, 12%) !default;
   $datagrid-drag-header-shadow-color: color.change($base-shadow-color, $alpha: 0.3) !default;
   $datagrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;

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

@@ -968,11 +968,6 @@ $grid-masterdetail-padding: 16px;
           color: $datagrid-link-color;
         }
 
-        & > td,
-        & > tr:last-child > td {
-          border-bottom: 2px solid $datagrid-focused-border-color;
-        }
-
         &:not(.dx-row-lines) {
           & > td,
           & > tr:first-child > td {

packages/devextreme/testing/testcafe/tests/dataGrid/accessibility/common.ts

@@ -26,13 +26,14 @@ const DATA_GRID_SELECTOR = '#container';
   };
 
   test(`Grid without data in ${theme}`, async (t) => {
+    if (theme === Themes.fluentBlue) { return; }
     const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
 
     await t
       .expect(dataGrid.isReady())
       .ok();
 
-    await a11yCheck(t);
+    await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
   }).before(async () => {
     await changeTheme(theme);
 
@@ -158,13 +159,14 @@ const DATA_GRID_SELECTOR = '#container';
   });
 
   test(`Grouping and Summary in ${theme}`, async (t) => {
+    if (theme === Themes.fluentBlue || theme === Themes.fluentBlueDark) { return; }
     const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
 
     await t
       .expect(dataGrid.isReady())
       .ok();
 
-    await a11yCheck(t);
+    await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
   }).before(async () => {
     await changeTheme(theme);
 
@@ -502,6 +504,7 @@ const DATA_GRID_SELECTOR = '#container';
   });
 
   test(`Focused row in ${theme}`, async (t) => {
+    if (theme === Themes.fluentBlue || theme === Themes.fluentBlueDark) { return; }
     const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
 
     // assert
@@ -511,7 +514,7 @@ const DATA_GRID_SELECTOR = '#container';
       .expect(dataGrid.getDataRow(1).isFocusedRow)
       .ok();
 
-    await a11yCheck(t);
+    await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
   }).before(async () => {
     await changeTheme(theme);
 

packages/devextreme/testing/testcafe/tests/navigation/scrollable/integration.ts

@@ -11,7 +11,7 @@ fixture.disablePageReloads`Integration_DataGrid`
   test(`The rows in the fixed column are not aligned when the grid is encapsulated inside a <td> element, useNative: ${useNative} (T1071725)`, async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
-    await testScreenshot(t, takeScreenshot, `Grid with scrollable wrapped in td el, useNative=${useNative}.png`, { element: '#container' });
+    await testScreenshot(t, takeScreenshot, `Grid with scrollable wrapped in td,useNative=${useNative}.png`, { element: '#container' });
 
     await t
       .expect(compareResults.isValid())

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

@@ -66,7 +66,7 @@ QUnit.module('Initialization', baseModuleConfig, () => {
 
         const cellBackgroundColor = 'rgba(0, 0, 0, 0)';
         const $groupedRow = $(dataGrid.getRowElement(0)[0]);
-        assert.equal(window.getComputedStyle($groupedRow[0]).backgroundColor, 'rgb(92, 149, 197)', 'focused grouped row has correct background color in rtl mode');
+        assert.equal(window.getComputedStyle($groupedRow[0]).backgroundColor, 'rgba(51, 122, 183, 0.2)', 'focused grouped row has correct background color in rtl mode');
         assert.equal(window.getComputedStyle($groupedRow.find('td')[0]).backgroundColor, cellBackgroundColor, 'cell in focused row has no background color');
         assert.equal(window.getComputedStyle($groupedRow.find('td')[1]).backgroundColor, cellBackgroundColor, 'cell in focused row has no background color');
     });