DevExpress · EugeniyKiyashko · Jan 12, 2026 · Jan 22, 2026 · Jan 23, 2026 · Jan 26, 2026
@@ -95,6 +95,7 @@ jobs:
       matrix:
         ARGS: [
           { componentFolder: "accessibility", name: "accessibility" },
+          { componentFolder: "accessibility - material", name: "accessibility", theme: 'material.blue.light' },
           { componentFolder: "common", name: "common" },
 
           { name: "generic", theme: 'generic.light' },

@@ -132,7 +132,7 @@ export class AppComponent {
 
     return (value > 50000)
       ? { font: '006100', fill: 'C6EFCE', bold: false }
-      : { font: '9C6500', fill: 'FFEB9C', bold: false };
+      : { font: '6E4600', fill: 'FFEB9C', bold: false };
   }
 }
 

@@ -81,7 +81,7 @@ const getConditionalAppearance = (cell: PivotGridCell): ConditionalAppearance =>
   if (value > 50000) {
     return { font: '006100', fill: 'C6EFCE' };
   }
-  return { font: '9C6500', fill: 'FFEB9C' };
+  return { font: '6E4600', fill: 'FFEB9C' };
 };
 
 const onExporting = (e: PivotGridTypes.ExportingEvent) => {

@@ -66,7 +66,7 @@ const getConditionalAppearance = (cell) => {
   if (value > 50000) {
     return { font: '006100', fill: 'C6EFCE' };
   }
-  return { font: '9C6500', fill: 'FFEB9C' };
+  return { font: '6E4600', fill: 'FFEB9C' };
 };
 const onExporting = (e) => {
   const workbook = new Workbook();

@@ -125,7 +125,7 @@ function getConditionalAppearance(cell: DxPivotGridTypes.Cell): ConditionalAppea
   if (value > 50000) {
     return { font: '006100', fill: 'C6EFCE' };
   }
-  return { font: '9C6500', fill: 'FFEB9C' };
+  return { font: '6E4600', fill: 'FFEB9C' };
 }
 
 </script>
@@ -110,6 +110,6 @@ $(() => {
     if (cell.value > 50000) {
       return { font: '006100', fill: 'C6EFCE' };
     }
-    return { font: '9C6500', fill: 'FFEB9C' };
+    return { font: '6E4600', fill: 'FFEB9C' };
   }
 });
@@ -46,7 +46,7 @@
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {

@@ -46,7 +46,7 @@
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {

@@ -46,7 +46,7 @@
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {

@@ -127,7 +127,7 @@ function getPriorityClass(task: Task) {
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {

@@ -46,7 +46,7 @@
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {

@@ -45,7 +45,7 @@
 
 ::ng-deep .demo-info {
   padding-left: 8px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 ::ng-deep .icon-container {

@@ -45,7 +45,7 @@
 
 .demo-info {
   padding-left: 8px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .icon-container {

@@ -45,7 +45,7 @@
 
 .demo-info {
   padding-left: 8px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .icon-container {

@@ -114,7 +114,7 @@ const selectedItemId = ref(employees[0].id);
 
   .demo-info {
     padding-left: 8px;
-    opacity: 0.6;
+    color: var(--dx-color-icon);
   }
 
   .icon-container {

@@ -45,7 +45,7 @@
 
 .demo-info {
   padding-left: 8px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .icon-container {

diff --git a/apps/demos/testing/accessibility-unsupported-components.js b/apps/demos/testing/accessibility-unsupported-components.js
diff --git a/apps/demos/testing/common.test.ts b/apps/demos/testing/common.test.ts
@@ -15,11 +15,12 @@ import {
   execCode,
   injectStyle,
 } from '../utils/visual-tests/matrix-test-helper';
-import { testScreenshot } from '../utils/visual-tests/helpers/theme-utils';
+import {
+  testScreenshot,
+  THEME,
+} from '../utils/visual-tests/helpers/theme-utils';
 import { createMdReport, createTestCafeReport } from '../utils/axe-reporter/reporter';
-import { accessibilityUnsupportedComponents } from './accessibility-unsupported-components';
 import { knownWarnings } from './known-warnings';
-import { skipJsErrorsComponents } from './skip-js-errors-components';
 import { skippedTests } from './skipped-tests';
 
 import { gitHubIgnored } from '../utils/visual-tests/github-ignored-list';
@@ -30,18 +31,41 @@ const execTestCafeCode = (t, code) => {
   return testCafeFunction(t);
 };
 
-const COMMON_SKIP_RULES = ['color-contrast'];
-const getTestSpecificSkipRules = (testName) => {
-  switch (testName) {
-    case 'Calendar-MultipleSelection':
-      return ['empty-table-header'];
-    case 'Localization-UsingGlobalize':
-      return ['label'];
-    case 'DataGrid-EditStateManagement':
-      return ['aria-required-parent'];
-    default:
-      return [];
+const getIgnoredRules = (testName) => {
+  const ignoredRules = [];
+
+  if (process.env.THEME === THEME.material
+    && [
+      // False positive: contrast rules do not apply to disabled tags
+      'TagBox-Overview',
+    ].includes(testName)
+  ) {
+    ignoredRules.push('color-contrast');
   }
+
+  const specificRules = {
+    'Accordion-Overview': ['nested-interactive'],
+    'Calendar-MultipleSelection': ['empty-table-header'],
+    'Localization-UsingGlobalize': ['label'],
+    'DataGrid-EditStateManagement': ['aria-required-parent'],
+    'DataGrid-RemoteCRUDOperations': ['scrollable-region-focusable'],
+    'Charts-BarSparklines': ['empty-table-header'],
+    'Charts-AreaSparklines': ['empty-table-header'],
+    'Charts-SimpleBullets': ['empty-table-header'],
+    'Charts-SimpleSparklines': ['empty-table-header'],
+    'Charts-WinlossSparklines': ['empty-table-header'],
+    'Diagram-Adaptability': ['aria-dialog-name', 'label'],
+    'Diagram-AdvancedDataBinding': ['aria-dialog-name', 'label'],
+    'Diagram-Containers': ['aria-dialog-name', 'label'],
+    'Diagram-CustomShapesWithIcons': ['aria-dialog-name', 'label'],
+    'Diagram-CustomShapesWithTemplates': ['label'],
+    'Diagram-CustomShapesWithTemplatesWithEditing': ['label'],
+  };
+
+  return [
+    ...ignoredRules,
+    ...(specificRules[testName] || []),
+  ];
 };
 
 const getClientScripts = () => {
@@ -102,7 +126,7 @@ Object.values(FRAMEWORKS).forEach((approach) => {
 
     let comparisonOptions;
     if (process.env.DISABLE_DEMO_TEST_SETTINGS !== 'all') {
-      if (process.env.STRATEGY === 'accessibility' && accessibilityUnsupportedComponents.includes(widgetName)) {
+      if (process.env.STRATEGY === 'accessibility') {
         return;
       }
 
@@ -140,8 +164,7 @@ Object.values(FRAMEWORKS).forEach((approach) => {
 
     runTestAtPage(
       test,
-      pageURL,
-      skipJsErrorsComponents.includes(widgetName),
+      pageURL
     )
       .clientScripts(clientScriptSource)(testName, async (t) => {
         if (visualTestStyles) {
@@ -160,10 +183,10 @@ Object.values(FRAMEWORKS).forEach((approach) => {
         }
 
         if (process.env.STRATEGY === 'accessibility') {
-          const specificSkipRules = getTestSpecificSkipRules(testName);
+          const ignoredRules = getIgnoredRules(testName);
           const options = { rules: {} };
 
-          [...COMMON_SKIP_RULES, ...specificSkipRules].forEach((ruleName) => {
+          [...ignoredRules].forEach((ruleName) => {
             options.rules[ruleName] = { enabled: false };
           });
 

diff --git a/apps/demos/utils/visual-tests/matrix-test-helper.ts b/apps/demos/utils/visual-tests/matrix-test-helper.ts
@@ -274,13 +274,9 @@ export function shouldRunTestExplicitly(demoUrl) {
   );
 }
 
-export function runTestAtPage(test, demoUrl, shouldSkipJsError) {
+export function runTestAtPage(test, demoUrl) {
   let executor = test;
 
-  if (shouldSkipJsError) {
-    test.skipJsErrors();
-  }
-
   if (settings.explicitTests) {
     // eslint-disable-next-line no-only-tests/no-only-tests
     executor = shouldRunTestExplicitly(demoUrl) ? test.only : executor = test.skip;

diff --git a/apps/demos/utils/visual-tests/testcafe-runner.ts b/apps/demos/utils/visual-tests/testcafe-runner.ts
@@ -1,7 +1,7 @@
 import createTestCafe, { ClientFunction } from 'testcafe';
 import fs from 'fs';
 
-const LAUNCH_RETRY_ATTEMPTS = 3;
+const LAUNCH_RETRY_ATTEMPTS = 1;
 const LAUNCH_RETRY_TIMEOUT = 10000;
 
 const wait = async (

diff --git a/e2e/testcafe-devextreme/helpers/accessibility/test.ts b/e2e/testcafe-devextreme/helpers/accessibility/test.ts
@@ -45,7 +45,20 @@ export const testAccessibility = <TComponentOptions = unknown>(
 
   optionConfigurations.forEach((optionConfiguration, index) => {
     test(`${component}: test with axe #${index}`, async (t) => {
-      await a11yCheck(t, a11yCheckConfig, selector, optionConfiguration);
+      const currentA11yCheckConfig = { ...a11yCheckConfig } as A11yCheckOptions;
+
+      if ((component === 'dxTagBox' || component === 'dxFileUploader' || component === 'dxDateRangeBox') && (optionConfiguration as any).disabled === true) {
+        if (currentA11yCheckConfig.runOnly === 'color-contrast') {
+          return;
+        }
+
+        currentA11yCheckConfig.rules = {
+          ...currentA11yCheckConfig.rules,
+          'color-contrast': { enabled: false },
+        };
+      }
+
+      await a11yCheck(t, currentA11yCheckConfig, selector, optionConfiguration);
     }).before(async (t) => {
       await createWidget(
         component,

diff --git a/e2e/testcafe-devextreme/helpers/accessibility/utils.ts b/e2e/testcafe-devextreme/helpers/accessibility/utils.ts
@@ -8,7 +8,7 @@ export interface A11yCheckOptions extends RunOptions {
 
 const defaultOptions = {
   rules: {
-    'color-contrast': { enabled: false },
+    'color-contrast': { enabled: true },
   },
 };
 

diff --git a/e2e/testcafe-devextreme/runner.ts b/e2e/testcafe-devextreme/runner.ts
@@ -14,7 +14,7 @@ import { getCurrentTheme } from './helpers/themeUtils';
 
 const LAUNCH_RETRY_ATTEMPTS = 3;
 const LAUNCH_RETRY_TIMEOUT = 10000;
-const FAILED_TESTS_RETRY_ATTEMPTS = 2;
+const FAILED_TESTS_RETRY_ATTEMPTS = 0;
 
 const wait = async (
   timeout: number,

@@ -35,7 +35,7 @@ const created = async (t: TestController, optionConfiguration): Promise<void> =>
 
 const a11yCheckConfig = {
   // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: false } },
+  rules: { 'color-contrast': { enabled: true } },
 };
 
 const configuration: Configuration = {

@@ -2,7 +2,6 @@ import { Properties } from 'devextreme/ui/action_sheet.d';
 import url from '../../helpers/getPageUrl';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { isMaterial, isMaterialBased } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'));
@@ -22,15 +21,8 @@ const options: Options<Properties> = {
   showCancelButton: [true, false],
 };
 
-const a11yCheckConfig = isMaterialBased() ? {
-  // NOTE: color-contrast issues in Material
-  runOnly: isMaterial() ? '' : 'color-contrast',
-  rules: { 'color-contrast': { enabled: !isMaterial() } },
-} : {};
-
 const configuration: Configuration = {
   component: 'dxActionSheet',
-  a11yCheckConfig,
   options,
 };
 

diff --git a/e2e/testcafe-devextreme/tests/accessibility/autocomplete.ts b/e2e/testcafe-devextreme/tests/accessibility/autocomplete.ts
@@ -28,7 +28,7 @@ const buttonsOptions: Options<Properties> = {
 const a11yCheckConfig = {
   rules: {
     // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
+    'color-contrast': { enabled: true },
   },
 };
 

@@ -36,7 +36,7 @@ const created = async (t: TestController, optionConfiguration): Promise<void> =>
 const a11yCheckConfig = {
   rules: {
     // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
+    'color-contrast': { enabled: true },
     // NOTE: false positive in isMaterialBased
     'nested-interactive': { enabled: !isMaterialBased() },
   },

@@ -27,7 +27,7 @@ const optionsWithSimpleItems: Options<Properties> = {
 const a11yCheckConfig = {
   rules: {
     // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
+    'color-contrast': { enabled: true },
   },
 };
 

@@ -18,7 +18,7 @@ const options: Options<Properties> = {
 const a11yCheckConfig = {
   rules: {
     // NOTE: color-contrast issues
-    'color-contrast': { enabled: false },
+    'color-contrast': { enabled: true },
     // NOTE: empty-table-header issues
     'empty-table-header': { enabled: false },
   },

@@ -41,7 +41,7 @@ test('column chooser in \'dragAndDrop\' mode', async (t) => {
   await cardView.apiShowColumnChooser();
 
   const a11yCheckConfig = {
-    rules: { 'color-contrast': { enabled: false } },
+    rules: { 'color-contrast': { enabled: true } },
   };
   await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
 }).before(async () => createWidget('dxCardView', {