Components & Demos: test color-contrast rule #32162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft

EugeniyKiyashko wants to merge 12 commits into DevExpress:26_1 from EugeniyKiyashko:26_1_color_contrast

+401 −316

.github/workflows/testcafe_tests.yml

-Original file line number
+Diff line change
@@ Expand Up / @@ -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' },
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
     }
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
     }
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
     }
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
     }
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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;
     }
@@ Expand Down @@

apps/demos/Demos/DateRangeBox/Overview/Angular/app/app.component.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ @@
     ::ng-deep .selected-days-wrapper {
       font-size: 12px;
-      opacity: 0.5;
+      color: var(--dx-color-icon);
     }
     ::ng-deep .multiline-label {
@@ Expand Down @@

apps/demos/Demos/DateRangeBox/Overview/React/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ @@
     .selected-days-wrapper {
       font-size: 12px;
-      opacity: 0.5;
+      color: var(--dx-color-icon);
     }
     .multiline-label {
@@ Expand Down @@

apps/demos/Demos/DateRangeBox/Overview/ReactJs/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ @@
     .selected-days-wrapper {
       font-size: 12px;
-      opacity: 0.5;
+      color: var(--dx-color-icon);
     }
     .multiline-label {
@@ Expand Down @@

apps/demos/Demos/DateRangeBox/Overview/Vue/App.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -114,7 +114,7 @@ function convertRangeToDays([startDate, endDate]: Date[]) { @@
     .selected-days-wrapper {
       font-size: 12px;
-      opacity: 0.5;
+      color: var(--dx-color-icon);
     }
     .multiline-label {
@@ Expand Down @@

apps/demos/Demos/DateRangeBox/Overview/jQuery/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,7 @@ @@
     .selected-days-wrapper {
       font-size: 12px;
-      opacity: 0.5;
+      color: var(--dx-color-icon);
     }
     .multiline-label {
@@ Expand Down @@

apps/demos/Demos/DropDownButton/Overview/Angular/app/app.component.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -55,7 +55,7 @@ @@
     .button-row {
       font-size: 12px;
       line-height: 14px;
-      opacity: 0.6;
+      color: var(--dx-color-icon);
     }
     ::ng-deep #custom-template .dx-button {
@@ Expand Down @@

apps/demos/Demos/DropDownButton/Overview/React/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -55,7 +55,7 @@ @@
     .button-row {
       font-size: 12px;
       line-height: 14px;
-      opacity: 0.6;
+      color: var(--dx-color-icon);
     }
     #custom-template .dx-button {
@@ Expand Down @@

apps/demos/Demos/DropDownButton/Overview/ReactJs/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -55,7 +55,7 @@ @@
     .button-row {
       font-size: 12px;
       line-height: 14px;
-      opacity: 0.6;
+      color: var(--dx-color-icon);
     }
     #custom-template .dx-button {
@@ Expand Down @@

apps/demos/Demos/DropDownButton/Overview/Vue/App.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -246,7 +246,7 @@ function onColorClick(clickedColor: string) { @@
       .button-row {
         font-size: 12px;
         line-height: 14px;
-        opacity: 0.6;
+        color: var(--dx-color-icon);
       }
       #custom-template .dx-button {
@@ Expand Down @@

apps/demos/Demos/DropDownButton/Overview/jQuery/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -59,7 +59,7 @@ @@
     .button-row {
       font-size: 12px;
       line-height: 14px;
-      opacity: 0.6;
+      color: var(--dx-color-icon);
     }
     #custom-template .dx-button {
@@ Expand Down @@

apps/demos/Demos/HtmlEditor/Mentions/Angular/app/app.component.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,7 @@ @@
     }
     ::ng-deep .date {
-      opacity: 0.5;
+      color: var(--dx-color-icon);
     }
     ::ng-deep .photo {
@@ Expand Down @@

apps/demos/Demos/HtmlEditor/Mentions/React/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,7 @@ @@
     }
     .date {
-      opacity: 0.5;
+      color: var(--dx-color-icon);
     }
     .photo {
@@ Expand Down @@

apps/demos/Demos/HtmlEditor/Mentions/ReactJs/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,7 @@ @@
     }
     .date {
-      opacity: 0.5;
+      color: var(--dx-color-icon);
     }
     .photo {
@@ Expand Down @@

apps/demos/Demos/HtmlEditor/Mentions/Vue/App.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -132,7 +132,7 @@ const mentions = ref([{ @@
     }
     .date {
-      opacity: 0.5;
+      color: var(--dx-color-icon);
     }
     .photo {
@@ Expand Down @@

apps/demos/Demos/HtmlEditor/Mentions/jQuery/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -29,7 +29,7 @@ @@
     }
     .date {
-      opacity: 0.5;
+      color: var(--dx-color-icon);
     }
     .photo {
@@ Expand Down @@

apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -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 };
       }
     }
@@ Expand Down @@

apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
       if (value > 50000) {
         return { font: '006100', fill: 'C6EFCE' };
       }
-      return { font: '9C6500', fill: 'FFEB9C' };
+      return { font: '6E4600', fill: 'FFEB9C' };
     };
     const onExporting = (e: PivotGridTypes.ExportingEvent) => {
@@ Expand Down @@

apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -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();
@@ Expand Down @@

apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Vue/App.vue

-Original file line number
+Diff line change
@@ Expand Up @@
       if (value > 50000) {
         return { font: '006100', fill: 'C6EFCE' };
       }
-      return { font: '9C6500', fill: 'FFEB9C' };
+      return { font: '6E4600', fill: 'FFEB9C' };
     }
     </script>

apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/jQuery/index.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -110,6 +110,6 @@ $(() => { @@
         if (cell.value > 50000) {
           return { font: '006100', fill: 'C6EFCE' };
         }
-        return { font: '9C6500', fill: 'FFEB9C' };
+        return { font: '6E4600', fill: 'FFEB9C' };
       }
     });

apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ @@
     }
     .card-assignee {
-      opacity: 0.6;
+      color: var(--dx-color-icon);
     }
     .card-priority {
@@ Expand Down @@

apps/demos/Demos/Sortable/Kanban/React/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ @@
     }
     .card-assignee {
-      opacity: 0.6;
+      color: var(--dx-color-icon);
     }
     .card-priority {
@@ Expand Down @@

apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ @@
     }
     .card-assignee {
-      opacity: 0.6;
+      color: var(--dx-color-icon);
     }
     .card-priority {
@@ Expand Down @@

apps/demos/Demos/Sortable/Kanban/Vue/App.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -127,7 +127,7 @@ function getPriorityClass(task: Task) { @@
     }
     .card-assignee {
-      opacity: 0.6;
+      color: var(--dx-color-icon);
     }
     .card-priority {
@@ Expand Down @@

apps/demos/Demos/Sortable/Kanban/jQuery/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ @@
     }
     .card-assignee {
-      opacity: 0.6;
+      color: var(--dx-color-icon);
     }
     .card-priority {
@@ Expand Down @@

apps/demos/Demos/Tabs/Selection/Angular/app/app.component.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,7 @@ @@
     ::ng-deep .demo-info {
       padding-left: 8px;
-      opacity: 0.6;
+      color: var(--dx-color-icon);
     }
     ::ng-deep .icon-container {
@@ Expand Down @@

apps/demos/Demos/Tabs/Selection/React/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,7 @@ @@
     .demo-info {
       padding-left: 8px;
-      opacity: 0.6;
+      color: var(--dx-color-icon);
     }
     .icon-container {
@@ Expand Down @@

apps/demos/Demos/Tabs/Selection/ReactJs/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,7 @@ @@
     .demo-info {
       padding-left: 8px;
-      opacity: 0.6;
+      color: var(--dx-color-icon);
     }
     .icon-container {
@@ Expand Down @@

apps/demos/Demos/Tabs/Selection/Vue/App.vue

-Original file line number
+Diff line change
@@ Expand Up / @@ -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 {
@@ Expand Down @@

apps/demos/Demos/Tabs/Selection/jQuery/styles.css

-Original file line number
+Diff line change
@@ Expand Up / @@ -45,7 +45,7 @@ @@
     .demo-info {
       padding-left: 8px;
-      opacity: 0.6;
+      color: var(--dx-color-icon);
     }
     .icon-container {
@@ Expand Down @@

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

This file was deleted.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Components & Demos: test color-contrast rule #32162

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

Components & Demos: test color-contrast rule #32162

Are you sure you want to change the base?

Components & Demos: test color-contrast rule #32162

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!