DevExpress · EugeniyKiyashko · Sep 1, 2026 · Sep 1, 2026 · Sep 1, 2026 · Sep 1, 2026
diff --git a/apps/demos/testing/common.test.ts b/apps/demos/testing/common.test.ts
@@ -62,10 +62,16 @@ const getIgnoredRules = (testName) => {
 
   if ((isMaterial() || isFluent())
     && [
-      // False positive: contrast rules do not apply to disabled tags
-      'Accordion-Overview',
-      'TagBox-Overview',
+      // Cause not reproduced: the demo has no disabled element, so the original
+      // "disabled tags" reason does not apply to it. Needs a measurement in CI.
       'TreeList-StatePersistence',
+      // Not a false positive, and not the demo's colour: it paints the falling quote with the
+      // theme's own --dx-color-danger. In the dark palette that role is #e4554f, which is
+      // 4.92:1 on an alternating row (#161616) but 4.22:1 on a normal one (#242424), so roughly
+      // half the rows fail and which ones is decided by the live data. The role is the one the
+      // package itself assigns to error text (text-input.color.invalid.content.rest) and the one
+      // Blazor uses, so the fix belongs to the palette rather than to this demo.
+      'DataGrid-SignalRService',
       // False positive: contrast rules do not apply to custom orange color
       'CardView-FieldTemplate',
       // False positive: contrast rules do not apply to read-only editors on the custom option panel background

diff --git a/apps/demos/testing/etalons/Gantt-ExportToPDF (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-ExportToPDF (fluent-next.blue.light).png
diff --git a/apps/demos/testing/etalons/Gantt-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-Overview (fluent-next.blue.light).png
diff --git a/apps/demos/testing/etalons/Gantt-Toolbar (fluent-next.blue.light).png b/apps/demos/testing/etalons/Gantt-Toolbar (fluent-next.blue.light).png
diff --git a/apps/demos/testing/etalons/RadioGroup-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/RadioGroup-Overview (fluent-next.blue.light).png
diff --git a/apps/demos/testing/etalons/Switch-Overview (fluent-next.blue.light).png b/apps/demos/testing/etalons/Switch-Overview (fluent-next.blue.light).png
diff --git a/.../etalons/chat_customization_is_disabled_after_sent (fluent-next.blue.light).png b/.../etalons/chat_customization_is_disabled_after_sent (fluent-next.blue.light).png
diff --git a/.../widgets/chat/etalons/confirmation_dialog_is_shown (fluent-next.blue.light).png b/.../widgets/chat/etalons/confirmation_dialog_is_shown (fluent-next.blue.light).png
diff --git a/...editor_appearance_variants_filled_floating_desktop (fluent-next.blue.light).png b/...editor_appearance_variants_filled_floating_desktop (fluent-next.blue.light).png
diff --git a/...n_editor_appearance_variants_filled_hidden_desktop (fluent-next.blue.light).png b/...n_editor_appearance_variants_filled_hidden_desktop (fluent-next.blue.light).png
diff --git a/..._editor_appearance_variants_filled_outside_desktop (fluent-next.blue.light).png b/..._editor_appearance_variants_filled_outside_desktop (fluent-next.blue.light).png
diff --git a/...n_editor_appearance_variants_filled_static_desktop (fluent-next.blue.light).png b/...n_editor_appearance_variants_filled_static_desktop (fluent-next.blue.light).png
diff --git a/...itor_appearance_variants_outlined_floating_desktop (fluent-next.blue.light).png b/...itor_appearance_variants_outlined_floating_desktop (fluent-next.blue.light).png
diff --git a/...editor_appearance_variants_outlined_hidden_desktop (fluent-next.blue.light).png b/...editor_appearance_variants_outlined_hidden_desktop (fluent-next.blue.light).png
diff --git a/...ditor_appearance_variants_outlined_outside_desktop (fluent-next.blue.light).png b/...ditor_appearance_variants_outlined_outside_desktop (fluent-next.blue.light).png
diff --git a/...editor_appearance_variants_outlined_static_desktop (fluent-next.blue.light).png b/...editor_appearance_variants_outlined_static_desktop (fluent-next.blue.light).png
diff --git a/...or_appearance_variants_underlined_floating_desktop (fluent-next.blue.light).png b/...or_appearance_variants_underlined_floating_desktop (fluent-next.blue.light).png
diff --git a/...itor_appearance_variants_underlined_hidden_desktop (fluent-next.blue.light).png b/...itor_appearance_variants_underlined_hidden_desktop (fluent-next.blue.light).png
diff --git a/...tor_appearance_variants_underlined_outside_desktop (fluent-next.blue.light).png b/...tor_appearance_variants_underlined_outside_desktop (fluent-next.blue.light).png
diff --git a/...itor_appearance_variants_underlined_static_desktop (fluent-next.blue.light).png b/...itor_appearance_variants_underlined_static_desktop (fluent-next.blue.light).png
diff --git a/.../widgets/form/etalons/form_validation_before_reset (fluent-next.blue.light).png b/.../widgets/form/etalons/form_validation_before_reset (fluent-next.blue.light).png
diff --git a/...ectbox/etalons/selectbox_groupeditems_third_opened (fluent-next.blue.light).png b/...ectbox/etalons/selectbox_groupeditems_third_opened (fluent-next.blue.light).png
diff --git a/...pper/etalons/Form Integration-Fifth step confirmed (fluent-next.blue.light).png b/...pper/etalons/Form Integration-Fifth step confirmed (fluent-next.blue.light).png
diff --git a/...tepper/etalons/Form Integration-Fifth step summary (fluent-next.blue.light).png b/...tepper/etalons/Form Integration-Fifth step summary (fluent-next.blue.light).png
diff --git a/.../etalons/Form Integration-Fifth step summary final (fluent-next.blue.light).png b/.../etalons/Form Integration-Fifth step summary final (fluent-next.blue.light).png
diff --git a/...lons/Form Integration-First step validation failed (fluent-next.blue.light).png b/...lons/Form Integration-First step validation failed (fluent-next.blue.light).png
diff --git a/...s/Form Integration-Fourth optional step form empty (fluent-next.blue.light).png b/...s/Form Integration-Fourth optional step form empty (fluent-next.blue.light).png
diff --git a/e2e/testcafe-devextreme/helpers/accessibility/test.ts b/e2e/testcafe-devextreme/helpers/accessibility/test.ts
@@ -2,7 +2,7 @@ import { ElementContext } from 'axe-core';
 import type { WidgetName } from 'devextreme-testcafe-models/types';
 import { createWidget } from '../createWidget';
 import { getThemeName } from '../themeUtils';
-import { a11yCheck, A11yCheckOptions } from './utils';
+import { a11yCheck, isA11yCheckApplicable, A11yCheckOptions } from './utils';
 import { generateOptionMatrix, Options } from '../generateOptionMatrix';
 
 export interface Configuration<TComponentOptions = unknown> {
@@ -32,8 +32,6 @@ const getOptionConfigurations = <TComponentOptions = unknown>(
   return generateOptionMatrix(options);
 };
 
-const componentsWithDisabledColorContrastIssues: WidgetName[] = ['dxTagBox', 'dxFileUploader', 'dxDateRangeBox'];
-
 export const testAccessibility = <TComponentOptions = unknown>(
   configuration: Configuration<TComponentOptions>,
 ): void => {
@@ -47,25 +45,14 @@ export const testAccessibility = <TComponentOptions = unknown>(
 
   const optionConfigurations = getOptionConfigurations(options);
 
-  optionConfigurations.forEach((optionConfiguration, index) => {
-    test(`${component}: test with axe #${index}`, async (t) => {
-      const currentA11yCheckConfig = { ...a11yCheckConfig } as A11yCheckOptions;
-      const isComponentDisabled = (optionConfiguration as Record<string, unknown>).disabled;
-      const shouldIgnoreColorContrast = componentsWithDisabledColorContrastIssues
-        .includes(component) && isComponentDisabled;
-
-      if (shouldIgnoreColorContrast) {
-        if (currentA11yCheckConfig.runOnly === 'color-contrast') {
-          return;
-        }
+  // A theme that runs color-contrast only has nothing left to check once the rule is off.
+  // Declaring the skip here keeps it visible in the report; bailing out of the test body
+  // used to report it as passed.
+  const declareTest = isA11yCheckApplicable(a11yCheckConfig) ? test : test.skip;
 
-        currentA11yCheckConfig.rules = {
-          ...currentA11yCheckConfig.rules,
-          'color-contrast': { enabled: false },
-        };
-      }
-
-      await a11yCheck(t, currentA11yCheckConfig, selector, optionConfiguration);
+  optionConfigurations.forEach((optionConfiguration, index) => {
+    declareTest(`${component}: test with axe #${index}`, async (t) => {
+      await a11yCheck(t, a11yCheckConfig, 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
@@ -20,6 +20,11 @@ const isColorContrastChecked = (options: A11yCheckOptions): boolean => {
   return options.runOnly === undefined || options.runOnly === COLOR_CONTRAST_RULE;
 };
 
+// Whether the given configuration leaves anything for the current theme to check. Call sites
+// use it to declare a test with `test.skip`, so a check that cannot run is visible as skipped
+// instead of counted as passed.
+export const isA11yCheckApplicable = (options: A11yCheckOptions = defaultOptions): boolean => getThemeName() !== 'fluent-next' || isColorContrastChecked(options);
+
 const createFullReport = (results, configuration) => {
   let report = createReport(results.violations);
 
@@ -41,9 +46,14 @@ Promise<void> => {
   // so only color-contrast is re-checked for it — regardless of the caller's config.
   const isColorContrastOnly = getThemeName() === 'fluent-next';
 
-  // Nothing is left to check: the caller excluded the only rule this theme runs.
+  // Returning here used to report the test as passed with no assertion at all. A check that
+  // cannot run has to be declared as skipped where the test is declared, not swallowed here.
   if (isColorContrastOnly && !isColorContrastChecked(options)) {
-    return;
+    throw new Error(
+      'a11yCheck was called on fluent-next with a configuration that excludes color-contrast, '
+      + 'the only rule this theme runs. Nothing would be checked. Either declare the test with '
+      + 'isA11yCheckApplicable() so it is skipped explicitly, or leave color-contrast enabled.',
+    );
   }
 
   const effectiveOptions: A11yCheckOptions = isColorContrastOnly

@@ -15,11 +15,7 @@ test('headerPanel dragging column when it has sorting and headerFilter', async (
 
   await triggerDragStart(columnElement);
 
-  const a11yCheckConfig = {
-    // False positive: contrast rules do not apply to disabled elements
-    rules: { 'color-contrast': { enabled: false } },
-  };
-  await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
+  await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
 }).before(async () => createWidget('dxCardView', {
   allowColumnReordering: true,
   columnChooser: {

@@ -16,8 +16,6 @@ const DRAG_MOVE_Y_COEFFICIENT = 1;
 
 const a11yCheckConfig = {
   rules: {
-    // False positive: contrast rules do not apply to disabled elements
-    'color-contrast': { enabled: false },
     // NOTE: Draggable template is outside the role="main" landmark
     region: { enabled: false },
   },

diff --git a/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts b/e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts
@@ -196,9 +196,12 @@ test('Filter row - filter menu', async (t) => {
 
   await a11yCheck(t, {
     ...a11yCheckConfig,
-    runOnly: '',
     rules: {
       'aria-command-name': { enabled: true },
+      // The filter menu is rendered into body, outside the role="main" landmark, so its
+      // scrollable content trips the best-practice `region` rule the way every portalled
+      // overlay does here (see cardView/sortable.ts and the overlay checks in pivotGrid.ts).
+      region: { enabled: false },
     },
   });
 }).before(async () => createWidget('dxDataGrid', {
@@ -298,10 +301,7 @@ test('Filter panel - popup with filter builder', async (t) => {
     .expect(filterPanel.isOpened)
     .ok();
 
-  await a11yCheck(t, {
-    ...a11yCheckConfig,
-    runOnly: '',
-  });
+  await a11yCheck(t, a11yCheckConfig);
 }).before(async () => createWidget('dxDataGrid', {
   dataSource: getData(10, 5),
   keyExpr: 'field_0',
@@ -347,10 +347,7 @@ test('Search panel - highlight', async (t) => {
     .expect(dataGrid.isReady())
     .ok();
 
-  await a11yCheck(t, {
-    ...a11yCheckConfig,
-    runOnly: '',
-  }, DATA_GRID_SELECTOR);
+  await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
 }).before(async () => createWidget('dxDataGrid', {
   dataSource: getData(10, 5),
   keyExpr: 'field_0',
@@ -517,7 +514,6 @@ test('Column chooser with the \'select\' mode', async (t) => {
 
   await a11yCheck(t, {
     ...a11yCheckConfig,
-    runOnly: '',
     rules: {
       'scrollable-region-focusable': { enabled: false },
     },
@@ -563,7 +559,6 @@ test('Empty column chooser', async (t) => {
 
   await a11yCheck(t, {
     ...a11yCheckConfig,
-    runOnly: '',
     rules: {
       'aria-required-children': { enabled: false },
     },
@@ -657,10 +652,7 @@ test('Row editing mode - confirm delete message', async (t) => {
     .expect(isDialogOpened)
     .ok();
 
-  await a11yCheck(t, {
-    ...a11yCheckConfig,
-    runOnly: '',
-  });
+  await a11yCheck(t, a11yCheckConfig);
 }).before(async () => createWidget('dxDataGrid', {
   dataSource: getData(10, 5),
   keyExpr: 'field_0',
@@ -967,10 +959,7 @@ test('Export', async (t) => {
     .expect(exportButton.isOpened)
     .ok();
 
-  await a11yCheck(t, {
-    ...a11yCheckConfig,
-    runOnly: '',
-  });
+  await a11yCheck(t, a11yCheckConfig);
 }).before(async () => createWidget('dxDataGrid', {
   dataSource: getData(10, 5),
   keyExpr: 'field_0',
@@ -998,7 +987,6 @@ test('Context menu', async (t) => {
 
   await a11yCheck(t, {
     ...a11yCheckConfig,
-    runOnly: '',
     rules: {
       region: { enabled: false },
     },

diff --git a/...d/fieldPanel/etalons/field-panel_column-action_dnd (fluent-next.blue.light).png b/...d/fieldPanel/etalons/field-panel_column-action_dnd (fluent-next.blue.light).png
diff --git a/...ldPanel/etalons/field-panel_column-field_dnd-first (fluent-next.blue.light).png b/...ldPanel/etalons/field-panel_column-field_dnd-first (fluent-next.blue.light).png
diff --git a/...rid/fieldPanel/etalons/field-panel_data-action_dnd (fluent-next.blue.light).png b/...rid/fieldPanel/etalons/field-panel_data-action_dnd (fluent-next.blue.light).png
diff --git a/...Grid/fieldPanel/etalons/field-panel_row-action_dnd (fluent-next.blue.light).png b/...Grid/fieldPanel/etalons/field-panel_row-action_dnd (fluent-next.blue.light).png
@@ -82,7 +82,12 @@ $pagination-info-paddings: 9px;
       box-sizing: content-box;
 
       &.dx-button-disable {
-        opacity: $pagination-nav-disabled-opacity;
+        /* false opts out of the dim; `null` would be overwritten by the `!default` above and
+        silently restore it */
+        @if $pagination-nav-disabled-opacity {
+          opacity: $pagination-nav-disabled-opacity;
+        }
+
         cursor: inherit;
       }
     }

@@ -92,6 +92,14 @@ $sortable-side-offset: 6px;
   min-width: fit-content;
   padding: 0 $cardview-header-item__right-padding 0 $cardview-header-item__left-padding;
 
+  /* dxSortable dims a drag source to 0.5 on this element, and opacity on a child cannot undo a
+  parent's group opacity - the header item's own opt-out was inert and its text measured 3.33
+  against its own background. The component marks the source with colour instead, so the dim is
+  cancelled here, where it is applied. */
+  &.dx-sortable-source {
+    opacity: 1;
+  }
+
   &:first-child {
     padding: 0 $cardview-header-item__right-padding 0 $cardview-header-item__left-padding;
   }

@@ -57,24 +57,33 @@
     outline-offset: -2px;
   }
 
-  &.dx-sortable-source {
+  /* The element being dragged is ordinary, active content, not a disabled one: the parameters are
+  named after the state they mark, and the colours a theme feeds them have to keep the content
+  readable - Blazor marks a drag source and leaves the content alone
+  (ds-themes/components/tabs/layout.scss).
+
+  Both selectors are needed: dxSortable puts dx-sortable-source on the item's container here, and
+  matching only the item left the component's own opt-out from the generic .dx-sortable-source dim
+  (0.5) inert - the header text measured 3.33 against its own background. */
+  &.dx-sortable-source,
+  .dx-sortable-source > & {
     opacity: 1.0;
-    background-color: $cardview-header-panel__item--disabled-bg-color;
-    border-color: $cardview-header-panel__item--disabled-border-color;
-    color: $cardview-header-panel__item--disabled-text-color;
-    font-weight: $cardview-header-panel__item--disabled-text-weight;
+    background-color: $cardview-header-panel__item--drag-source-bg-color;
+    border-color: $cardview-header-panel__item--drag-source-border-color;
+    color: $cardview-header-panel__item--drag-source-text-color;
+    font-weight: $cardview-header-panel__item--drag-source-text-weight;
 
     .dx-icon {
-      color: $cardview-header-panel__item--disabled__icon-color;
+      color: $cardview-header-panel__item--drag-source__icon-color;
     }
 
     .dx-header-filter-icon--selected {
-      color: $cardview-header-panel__item--disabled__header-filter-icon--selected-color;
+      color: $cardview-header-panel__item--drag-source__header-filter-icon--selected-color;
     }
 
     .dx-cardview-header-item-sorting-order {
-      color: $cardview-header-panel__item--disabled__sort-index-text-color;
-      font-weight: $cardview-header-panel__item--disabled__sort-index-text-weight;
+      color: $cardview-header-panel__item--drag-source__sort-index-text-color;
+      font-weight: $cardview-header-panel__item--drag-source__sort-index-text-weight;
     }
   }
 

@@ -25,14 +25,14 @@ $cardview-header-panel__item--hovered__header-filter-icon--selected-color: null
 $cardview-header-panel__item--hovered__sort-index-text-color: null !default;
 $cardview-header-panel__item--hovered__sort-index-text-weight: null !default;
 
-$cardview-header-panel__item--disabled-bg-color: null !default;
-$cardview-header-panel__item--disabled-border-color: null !default;
-$cardview-header-panel__item--disabled-text-color: null !default;
-$cardview-header-panel__item--disabled-text-weight: null !default;
-$cardview-header-panel__item--disabled__icon-color: null !default;
-$cardview-header-panel__item--disabled__header-filter-icon--selected-color: null !default;
-$cardview-header-panel__item--disabled__sort-index-text-color: null !default;
-$cardview-header-panel__item--disabled__sort-index-text-weight: null !default;
+$cardview-header-panel__item--drag-source-bg-color: null !default;
+$cardview-header-panel__item--drag-source-border-color: null !default;
+$cardview-header-panel__item--drag-source-text-color: null !default;
+$cardview-header-panel__item--drag-source-text-weight: null !default;
+$cardview-header-panel__item--drag-source__icon-color: null !default;
+$cardview-header-panel__item--drag-source__header-filter-icon--selected-color: null !default;
+$cardview-header-panel__item--drag-source__sort-index-text-color: null !default;
+$cardview-header-panel__item--drag-source__sort-index-text-weight: null !default;
 
 $cardview-header-panel__item--dragged-bg-color: null !default;
 $cardview-header-panel__item--dragged-border-color: null !default;

@@ -1,8 +1,11 @@
+$chat-disabled-opacity: 0.5 !default;
 $chat-file-name-font-weight: 600 !default;
 $chat-editing-preview-caption-font-weight: 500 !default;
 
 @use "../mixins" as *;
-@use "layout/chat" as *;
+@use "layout/chat" as * with (
+  $disabled-opacity: $chat-disabled-opacity,
+);
 @use "layout/chat-avatar" as *;
 @use "layout/chat-fileview" as * with (
   $file-name-font-weight: $chat-file-name-font-weight,

@@ -1,3 +1,5 @@
+$disabled-opacity: 0.5 !default;
+
 .dx-chat {
   display: flex;
   flex-direction: column;
@@ -8,7 +10,11 @@
   overflow-y: auto;
 
   &.dx-state-disabled {
-    opacity: 0.5;
+    /* false opts out of the dim; `null` would be overwritten by the `!default` in the parent
+    module and silently restore it */
+    @if $disabled-opacity {
+      opacity: $disabled-opacity;
+    }
   }
 }
 

@@ -8,7 +8,9 @@ $datagrid-common-form-buttons-border-radius: null !default;
 $datagrid-common-form-buttons-margin-left: null !default;
 $datagrid-common-form-buttons-margin-right: null !default;
 
-@include grid-base(datagrid);
+$datagrid-draggable-column-opacity: 0.5 !default;
+
+@include grid-base(datagrid, $datagrid-draggable-column-opacity);
 
 .dx-datagrid {
   position: relative;

@@ -25,7 +25,10 @@ $datagrid-common-form-buttons-border-radius: 3px !default;
 $datagrid-common-form-buttons-margin-left: 10px !default;
 $datagrid-common-form-buttons-margin-right: 6px !default;
 
+$datagrid-draggable-column-opacity: 0.5 !default;
+
 @use "./common" with (
+  $datagrid-draggable-column-opacity: $datagrid-draggable-column-opacity,
   $datagrid-common-group-min-width: $datagrid-common-group-min-width,
   $datagrid-common-addrow-margin-right: $datagrid-common-addrow-margin-right,
   $datagrid-common-addrow-margin-left: $datagrid-common-addrow-margin-left,

diff --git a/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss b/packages/devextreme-scss/scss/widgets/base/gridBase/_index.scss
@@ -26,7 +26,7 @@
   clip-path: polygon(0 0);
 }
 
-@mixin grid-base($widget-name) {
+@mixin grid-base($widget-name, $draggable-column-opacity: 0.5) {
   @include grid-base-cell($widget-name);
 
   .dx-#{$widget-name}-checkbox-size {
@@ -177,7 +177,9 @@
           }
 
           &.dx-#{$widget-name}-draggable-column {
-            opacity: 0.5;
+            @if $draggable-column-opacity {
+              opacity: $draggable-column-opacity;
+            }
           }
         }
       }
@@ -255,7 +257,11 @@
   }
 
   .dx-#{$widget-name}-draggable-column {
-    opacity: 0.5;
+    /* false opts out of the dim; a theme that marks the dragged column with colour instead does
+    not want its header text halved */
+    @if $draggable-column-opacity {
+      opacity: $draggable-column-opacity;
+    }
   }
 
   .dx-data-row.dx-state-hover {