Demos: test color-contrast rule

Author: EugeniyKiyashko

apps/demos/testing/accessibility-unsupported-components.js

@@ -1,10 +1,10 @@
 export const accessibilityUnsupportedComponents = [
-  'Accordion',
-  'Charts',
-  'Diagram',
-  'FileManager',
-  'Gantt',
-  'Map',
-  'Scheduler',
-  'PivotGrid',
+  // 'Accordion',
+  // 'Charts',
+  // 'Diagram',
+  // 'FileManager',
+  // 'Gantt',
+  // 'Map',
+  // 'Scheduler',
+  // 'PivotGrid',
 ];

apps/demos/testing/common.test.ts

@@ -163,7 +163,7 @@ Object.values(FRAMEWORKS).forEach((approach) => {
           const specificSkipRules = getTestSpecificSkipRules(testName);
           const options = { rules: {} };
 
-          [...COMMON_SKIP_RULES, ...specificSkipRules].forEach((ruleName) => {
+          [/*...COMMON_SKIP_RULES*/, ...specificSkipRules].forEach((ruleName) => {
             options.rules[ruleName] = { enabled: false };
           });
 

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 },
   },
 };
 

e2e/testcafe-devextreme/tests/accessibility/accordion.ts

@@ -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 = {

e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts

@@ -24,8 +24,7 @@ const options: Options<Properties> = {
 
 const a11yCheckConfig = isMaterialBased() ? {
   // NOTE: color-contrast issues in Material
-  runOnly: isMaterial() ? '' : 'color-contrast',
-  rules: { 'color-contrast': { enabled: !isMaterial() } },
+  rules: { 'color-contrast': { enabled: true } },
 } : {};
 
 const configuration: Configuration = {

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 },
   },
 };
 

e2e/testcafe-devextreme/tests/accessibility/button.ts

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

e2e/testcafe-devextreme/tests/accessibility/buttonGroup.ts

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

e2e/testcafe-devextreme/tests/accessibility/calendar.ts

@@ -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 },
   },

e2e/testcafe-devextreme/tests/accessibility/cardView/columnChooser.ts

@@ -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', {