diff --git a/apps/demos/testing/etalons/DataGrid-DeferredSelection (material.blue.light).png b/apps/demos/testing/etalons/DataGrid-DeferredSelection (material.blue.light).png index 9a69fa00c766..1f0f91df6abb 100644 Binary files a/apps/demos/testing/etalons/DataGrid-DeferredSelection (material.blue.light).png and b/apps/demos/testing/etalons/DataGrid-DeferredSelection (material.blue.light).png differ diff --git a/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_gridbox (material.blue.light).png b/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_gridbox (material.blue.light).png index 5c27f462b1c5..e02de28dfaee 100644 Binary files a/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_gridbox (material.blue.light).png and b/apps/demos/testing/widgets/dropdownbox/etalons/dropdownbox_multiple_selection_gridbox (material.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/accessibility/contrast.ts b/e2e/testcafe-devextreme/tests/dataGrid/accessibility/contrast.ts new file mode 100644 index 000000000000..0dd0e4daf28e --- /dev/null +++ b/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); + }, + ); +}); diff --git a/e2e/testcafe-devextreme/tests/dataGrid/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-fluent.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-fluent.blue.light.png new file mode 100644 index 000000000000..c67ac5806554 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-fluent.blue.light.png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-generic.light.png b/e2e/testcafe-devextreme/tests/dataGrid/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-generic.light.png new file mode 100644 index 000000000000..03e22bdb99e4 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-generic.light.png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-material.blue.light.png b/e2e/testcafe-devextreme/tests/dataGrid/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-material.blue.light.png new file mode 100644 index 000000000000..f973cb17861c Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/accessibility/etalons/T1257970-datagrid-menu-icon-contrast-material.blue.light.png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/filter_row_with_sticky_columns_1_(generic.light).png b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/filter_row_with_sticky_columns_1_(generic.light).png index f525567f5fd3..db32a8f4e391 100644 Binary files a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/filter_row_with_sticky_columns_1_(generic.light).png and b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/filter_row_with_sticky_columns_1_(generic.light).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/filter_row_with_sticky_columns_1_(material.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/filter_row_with_sticky_columns_1_(material.blue.light).png index 5f5fd127512e..a3ccdab39a48 100644 Binary files a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/filter_row_with_sticky_columns_1_(material.blue.light).png and b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/filter_row_with_sticky_columns_1_(material.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/filter_row_with_sticky_columns_2_(material.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/filter_row_with_sticky_columns_2_(material.blue.light).png index c88f1a40847d..eb1ed7c7939f 100644 Binary files a/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/filter_row_with_sticky_columns_2_(material.blue.light).png and b/e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/etalons/filter_row_with_sticky_columns_2_(material.blue.light).png differ diff --git a/packages/devextreme-scss/scss/widgets/fluent/menu/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/menu/_colors.scss index 92c6404feba4..48fc9addd38c 100644 --- a/packages/devextreme-scss/scss/widgets/fluent/menu/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/fluent/menu/_colors.scss @@ -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; } - diff --git a/packages/devextreme-scss/scss/widgets/generic/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/gridBase/_colors.scss index 5513d9d14b74..a3b9fca63e10 100644 --- a/packages/devextreme-scss/scss/widgets/generic/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/generic/gridBase/_colors.scss @@ -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 @@ -219,7 +219,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 +259,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 +303,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 +345,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 +387,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 +429,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 +471,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 +513,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; diff --git a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss index 63944d3d54c8..62d2a2433e2e 100644 --- a/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss +++ b/packages/devextreme-scss/scss/widgets/material/gridBase/_colors.scss @@ -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 diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/filtering.integration.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/filtering.integration.tests.js index b59cefcd8d46..79fc9d4cf481 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/filtering.integration.tests.js +++ b/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'); } });