Skip to content

Material & Fluent themes: ensure compliance with color-contrast requirements according to a11y standards #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.

Sign up for GitHub

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

Merged
EugeniyKiyashko merged 43 commits into from
Feb 4, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
06012bc
Demos: test color-contrast rule
EugeniyKiyashko Jan 12, 2026
f9dd903
Step1: update base colors
EugeniyKiyashko Jan 22, 2026
6fd1ff8
Step 2: update base colors again. Fix button.disabled, slider, menu, …
EugeniyKiyashko Jan 23, 2026
9099a51
skip disabled check for TagBox
EugeniyKiyashko Jan 26, 2026
fd7a8ad
Step 1.2: update base variables in Dark mode
EugeniyKiyashko Jan 26, 2026
6aabbcc
Step 2.2: fix scheduler and datagrid error row cases
EugeniyKiyashko Jan 29, 2026
9849e10
Step 2.3: fix color-contrast issues in PivotGrid, TimeView, checkbox …
EugeniyKiyashko Jan 29, 2026
e9b8ae6
skip demos with false positive issues
EugeniyKiyashko Jan 29, 2026
11d0c64
skip demos with false positive issues
EugeniyKiyashko Jan 29, 2026
d9eb13e
Merge branch '26_1_color_contrast' of https://github.com/EugeniyKiyas…
EugeniyKiyashko Jan 29, 2026
ed2ac3e
Merge branch '26_1' into 26_1_color_contrast
EugeniyKiyashko Jan 29, 2026
f9431e1
ignore specific rules
EugeniyKiyashko Jan 29, 2026
1a2b2a3
Step 2.5: fix PivotGrid, DataGrid, Gantt and others demos
EugeniyKiyashko Jan 30, 2026
8216396
Step 3: run dark theme testing
EugeniyKiyashko Jan 30, 2026
d7a105c
Merge branch '26_1' into 26_1_color_contrast
EugeniyKiyashko Jan 30, 2026
0c652a7
rename workflow
EugeniyKiyashko Jan 30, 2026
776975a
Merge branch '26_1_color_contrast' of https://github.com/EugeniyKiyas…
EugeniyKiyashko Jan 30, 2026
d56397c
change dataTheme
EugeniyKiyashko Jan 30, 2026
a0f164e
fix: trigger workflow
EugeniyKiyashko Jan 30, 2026
a2e9ad2
fix: trigger workflow
EugeniyKiyashko Jan 30, 2026
fa880e4
Step 3.1: fix base bg color in dark theme
EugeniyKiyashko Jan 30, 2026
84f0e11
Step 3.2: fix gantt, responsive box demos
EugeniyKiyashko Feb 2, 2026
e349963
Merge branch '26_1' into 26_1_color_contrast
EugeniyKiyashko Feb 2, 2026
3797da6
Merge branch '26_1' into 26_1_color_contrast
EugeniyKiyashko Feb 2, 2026
8596c3e
revert some changes
EugeniyKiyashko Feb 2, 2026
fb169ca
Merge branch '26_1' into 26_1_color_contrast
EugeniyKiyashko Feb 3, 2026
2c8ac8b
Step 4: fix known issues in Fluent
EugeniyKiyashko Feb 3, 2026
55edf35
Step 4: fix known issues in Fluent
EugeniyKiyashko Feb 3, 2026
1e756e1
Merge branch '26_1_color_contrast' of https://github.com/EugeniyKiyas…
EugeniyKiyashko Feb 3, 2026
a550bb0
Merge branch '26_1' into 26_1_color_contrast
EugeniyKiyashko Feb 3, 2026
f804ec0
Merge branch '26_1' into 26_1_color_contrast
EugeniyKiyashko Feb 3, 2026
d74eff9
Merge branch '26_1_color_contrast' of https://github.com/EugeniyKiyas…
EugeniyKiyashko Feb 3, 2026
bc28bd4
Merge branch '26_1' into 26_1_color_contrast
EugeniyKiyashko Feb 3, 2026
df0456f
determine test scope
EugeniyKiyashko Feb 3, 2026
39ad6c0
update etalons
EugeniyKiyashko Feb 4, 2026
dcf8e73
Merge branch '26_1' into 26_1_color_contrast
EugeniyKiyashko Feb 4, 2026
e770f9f
update etalons
EugeniyKiyashko Feb 4, 2026
0631fc8
Merge branch '26_1_color_contrast' of https://github.com/EugeniyKiyas…
EugeniyKiyashko Feb 4, 2026
e5db3e1
Merge branch '26_1' into 26_1_color_contrast
EugeniyKiyashko Feb 4, 2026
3ab2d39
fix typos
EugeniyKiyashko Feb 4, 2026
7c1d370
remove demo etalons
EugeniyKiyashko Feb 4, 2026
85b23dd
update material etalons
EugeniyKiyashko Feb 4, 2026
19e81b2
Merge branch '26_1' into 26_1_color_contrast
EugeniyKiyashko Feb 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
15 changes: 15 additions & 0 deletions .github/workflows/testcafe_tests.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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' },
Expand Down Expand Up @@ -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: |
Expand Down
9 changes: 7 additions & 2 deletions .github/workflows/demos_visual_tests.yml → .github/workflows/visual-tests-demos.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' &&
Expand All @@ -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
Expand All @@ -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"

Expand Down Expand Up @@ -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 }}
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Button/PredefinedTypes/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff 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
2 changes: 1 addition & 1 deletion apps/demos/Demos/Button/PredefinedTypes/React/styles.css
View file
Open in desktop
Original file line number Diff 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
2 changes: 1 addition & 1 deletion apps/demos/Demos/Button/PredefinedTypes/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff 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
2 changes: 1 addition & 1 deletion apps/demos/Demos/Button/PredefinedTypes/Vue/App.vue
View file
Open in desktop
Original file line number Diff 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
2 changes: 1 addition & 1 deletion apps/demos/Demos/Button/PredefinedTypes/jQuery/styles.css
View file
Open in desktop
Original file line number Diff 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
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/FieldTemplate/Angular/app/priority/priority.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
}

.priority--urgent {
color: #f7630c;
color: var(--dx-color-warning);
}

.priority--high {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/FieldTemplate/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}

.task__priority--urgent {
color: #f7630c;
color: var(--dx-color-warning);
}

.task__priority--high {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/FieldTemplate/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}

.task__priority--urgent {
color: #f7630c;
color: var(--dx-color-warning);
}

.task__priority--high {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/FieldTemplate/Vue/Priority.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const priorityClassName = computed(() =>
}
.task__priority--urgent {
color: #f7630c;
color: var(--dx-color-warning);
}
.task__priority--high {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/FieldTemplate/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
}

.task__priority--urgent {
color: #f7630c;
color: var(--dx-color-warning);
}

.task__priority--high {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/Overview/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

.status--commission {
color: #f7630c;
color: var(--dx-color-warning);
}

.status--terminated {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/Overview/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

.status--commission {
color: #f7630c;
color: var(--dx-color-warning);
}

.status--terminated {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/Overview/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

.status--commission {
color: #f7630c;
color: var(--dx-color-warning);
}

.status--terminated {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/Overview/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ const cardView = ref<DxCardView>();
}

.status--commission {
color: #f7630c;
color: var(--dx-color-warning);
}

.status--terminated {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/CardView/Overview/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
}

.status--commission {
color: #f7630c;
color: var(--dx-color-warning);
}

.status--terminated {
Expand Down
3 changes: 2 additions & 1 deletion apps/demos/Demos/Charts/SignalRService/test-code.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions apps/demos/Demos/Common/ListsOverview/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
}

::ng-deep .left .list .dx-list-group-header {
color: #f05b41;
font-weight: normal;
font-size: 18px;
}
Expand Down Expand Up @@ -102,5 +101,5 @@
font-size: 11px;
line-height: 12px;
padding-left: 2px;
opacity: 0.7;
color: var(--dx-texteditor-label-color);
}
3 changes: 1 addition & 2 deletions apps/demos/Demos/Common/ListsOverview/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
}

.left .list .dx-list-group-header {
color: #f05b41;
font-weight: normal;
font-size: 18px;
}
Expand Down Expand Up @@ -102,5 +101,5 @@
font-size: 11px;
line-height: 12px;
padding-left: 2px;
opacity: 0.7;
color: var(--dx-texteditor-label-color);
}
3 changes: 1 addition & 2 deletions apps/demos/Demos/Common/ListsOverview/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
}

.left .list .dx-list-group-header {
color: #f05b41;
font-weight: normal;
font-size: 18px;
}
Expand Down Expand Up @@ -102,5 +101,5 @@
font-size: 11px;
line-height: 12px;
padding-left: 2px;
opacity: 0.7;
color: var(--dx-texteditor-label-color);
}
3 changes: 1 addition & 2 deletions apps/demos/Demos/Common/ListsOverview/Vue/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
}

.left .list .dx-list-group-header {
color: #f05b41;
font-weight: normal;
font-size: 18px;
}
Expand Down Expand Up @@ -102,5 +101,5 @@
font-size: 11px;
line-height: 12px;
padding-left: 6px;
opacity: 0.7;
color: var(--dx-texteditor-label-color);
}
3 changes: 1 addition & 2 deletions apps/demos/Demos/Common/ListsOverview/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
}

.left .list .dx-list-group-header {
color: #f05b41;
font-weight: normal;
font-size: 18px;
}
Expand Down Expand Up @@ -102,5 +101,5 @@
font-size: 11px;
line-height: 12px;
padding-left: 2px;
opacity: 0.7;
color: var(--dx-texteditor-label-color);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/Common/NavigationOverview/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ sup {

::ng-deep .right-content .sub-title {
font-size: 120%;
color: rgba(152, 152, 152, 0.8);
color: var(--dx-texteditor-color-label);
}

::ng-deep .title-container {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Common/NavigationOverview/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ sup {

.right-content .sub-title {
font-size: 120%;
color: rgba(152, 152, 152, 0.8);
color: var(--dx-texteditor-color-label);
}

.title-container {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Common/NavigationOverview/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ sup {

.right-content .sub-title {
font-size: 120%;
color: rgba(152, 152, 152, 0.8);
color: var(--dx-texteditor-color-label);
}

.title-container {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Common/NavigationOverview/Vue/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ sup {

.right-content .sub-title {
font-size: 120%;
color: rgba(152, 152, 152, 0.8);
color: var(--dx-texteditor-color-label);
}

.title-container {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/Common/NavigationOverview/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ sup {

.right-content .sub-title {
font-size: 120%;
color: rgba(152, 152, 152, 0.8);
color: var(--dx-texteditor-color-label);
}

.title-container {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Basics/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Basics/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Basics/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Basics/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,6 @@ function itemClick({ itemData }: DxContextMenuTypes.ItemClickEvent<ContextMenuIt
}
.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
</style>
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Basics/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Templates/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Templates/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/ContextMenu/Templates/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@
}

.label {
color: #767676;
color: var(--dx-texteditor-color-label);
}
Loading
Loading