Material & Fluent themes: ensure compliance with color-contrast requirements according to a11y standards (#32162)

Author: EugeniyKiyashko

.github/workflows/testcafe_tests.yml

@@ -23,11 +23,22 @@ jobs:
     runs-on: devextreme-shr2
     outputs:
       should-run: ${{ steps.check.outputs.should-run }}
+      styles-changed: ${{ steps.changes.outputs.styles }}
     steps:
+      - uses: actions/checkout@v4
       - name: Check RUN_TESTS flag
         id: check
         run: echo "should-run=${{ env.RUN_TESTS }}" >> $GITHUB_OUTPUT
 
+      - uses: dorny/paths-filter@v3
+        id: changes
+        with:
+          filters: |
+            styles:
+              - 'packages/devextreme-scss/**'
+              - 'packages/devextreme/js/**/themes/**'
+              - 'e2e/testcafe-devextreme/helpers/accessibility/**'
+
   build:
     name: Build DevExtreme
     needs: check-should-run
@@ -94,6 +105,9 @@ jobs:
       matrix:
         ARGS: [
           { componentFolder: "accessibility", name: "accessibility" },
+          { componentFolder: "accessibility", name: "accessibility - fluent.dark", theme: 'fluent.blue.dark', styleDependent: true },
+          { componentFolder: "accessibility", name: "accessibility - material.light", theme: 'material.blue.light', styleDependent: true },
+          { componentFolder: "accessibility", name: "accessibility - material.dark", theme: 'material.blue.dark', styleDependent: true },
           { componentFolder: "common", name: "common" },
 
           { name: "generic", theme: 'generic.light' },
@@ -177,6 +191,7 @@ jobs:
 
     - name: Run TestCafe tests
       working-directory: ./e2e/testcafe-devextreme
+      if: ${{ !matrix.ARGS.styleDependent || needs.check-should-run.outputs.styles-changed == 'true' }}
       env:
         NODE_OPTIONS: --max-old-space-size=8192
       run: |

.github/workflows/demos_visual_tests.yml .github/workflows/visual-tests-demos.yml.github/workflows/demos_visual_tests.yml renamed to .github/workflows/visual-tests-demos.yml

@@ -584,7 +584,7 @@ jobs:
         fi
 
   testcafe-jquery:
-    needs: [check-should-run, build-devextreme]
+    needs: [check-should-run, build-devextreme, determine-framework-tests-scope]
     if: |
       always() &&
       needs.check-should-run.outputs.should-run == 'true' &&
@@ -593,7 +593,7 @@ jobs:
       fail-fast: false
       matrix:
         STRATEGY: [screenshots, accessibility]
-        THEME: ['material.blue.light', 'fluent.blue.light']
+        THEME: ['material.blue.light', 'fluent.blue.light', 'material.blue.dark', 'fluent.blue.dark']
         CONSTEL: [jquery(1/3), jquery(2/3), jquery(3/3), jquery]
         exclude:
           - STRATEGY: accessibility
@@ -604,6 +604,10 @@ jobs:
             CONSTEL: jquery(3/3)
           - STRATEGY: screenshots
             CONSTEL: jquery
+          - STRATEGY: screenshots
+            THEME: 'material.blue.dark'
+          - STRATEGY: screenshots
+            THEME: 'fluent.blue.dark'
     env:
       ACCESSIBILITY_TESTCAFE_REPORT_PATH: "accessibility_testcafe_report"
 
@@ -691,6 +695,7 @@ jobs:
     - name: Run TestCafe tests (jQuery)
       shell: bash
       working-directory: apps/demos
+      if: ${{ !contains(matrix.THEME, 'dark') || needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none' }}
       env:
         NODE_OPTIONS: --max-old-space-size=8192
         STRATEGY: ${{ matrix.STRATEGY }}

apps/demos/Demos/Button/PredefinedTypes/Angular/app/app.component.css

@@ -18,7 +18,7 @@
   width: 150px;
   height: 35px;
   font-size: 130%;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
   text-align: left;
   padding-left: 15px;
 }

apps/demos/Demos/Button/PredefinedTypes/React/styles.css

@@ -18,7 +18,7 @@
   width: 150px;
   height: 35px;
   font-size: 130%;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
   text-align: left;
   padding-left: 15px;
 }

apps/demos/Demos/Button/PredefinedTypes/ReactJs/styles.css

@@ -18,7 +18,7 @@
   width: 150px;
   height: 35px;
   font-size: 130%;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
   text-align: left;
   padding-left: 15px;
 }

apps/demos/Demos/Button/PredefinedTypes/Vue/App.vue

@@ -167,7 +167,7 @@ function onClick(e: DxButtonTypes.ClickEvent) {
   width: 150px;
   height: 35px;
   font-size: 130%;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
   text-align: left;
   padding-left: 15px;
 }

apps/demos/Demos/Button/PredefinedTypes/jQuery/styles.css

@@ -14,7 +14,7 @@
   width: 150px;
   height: 35px;
   font-size: 130%;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
   text-align: left;
   padding-left: 15px;
 }

apps/demos/Demos/CardView/FieldTemplate/Angular/app/priority/priority.component.css

@@ -12,7 +12,7 @@
 }
 
 .priority--urgent {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .priority--high {

apps/demos/Demos/CardView/FieldTemplate/React/styles.css

@@ -26,7 +26,7 @@
 }
 
 .task__priority--urgent {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .task__priority--high {

apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css

@@ -26,7 +26,7 @@
 }
 
 .task__priority--urgent {
-  color: #f7630c;
+  color: var(--dx-color-warning);
 }
 
 .task__priority--high {