Skip to content

T1318244 - DataGrid - The "Certain ARIA roles must be contained by particular parents" error occurs if the grid has no data #32348

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

Open
Raushen wants to merge 6 commits into
base: 26_1
Choose a base branch
from
Open

T1318244 - DataGrid - The "Certain ARIA roles must be contained by particular parents" error occurs if the grid has no data #32348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eae42fc
T1318244
Raushen Jan 29, 2026
bee89c2
Turn on Grid Accessibility tests
Raushen Jan 30, 2026
ac3a36b
Merge branch '26_1' of https://github.com/DevExpress/DevExtreme into …
Raushen Jan 30, 2026
fd83377
Merge branch '26_1' of https://github.com/DevExpress/DevExtreme into …
Raushen Jan 30, 2026
b19587b
Bump aXe
Raushen Jan 30, 2026
f72670b
Move axe-core to the catalog
Raushen Jan 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/demos/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
"@typescript-eslint/parser": "catalog:",
"@vue/eslint-config-typescript": "12.0.0",
"@vue/tsconfig": "0.7.0",
"axe-core": "4.10.3",
"axe-core": "catalog:",
"babel-jest": "29.7.0",
"consola": "3.2.3",
"cookie-parser": "1.4.7",
Expand Down
6 changes: 3 additions & 3 deletions e2e/testcafe-devextreme/helpers/accessibility/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { ElementContext } from 'axe-core';
import type { WidgetName } from 'devextreme-testcafe-models/types';
import { createWidget } from '../createWidget';
import { isMaterialBased } from '../themeUtils';
import { isFluent } from '../themeUtils';
import { a11yCheck, A11yCheckOptions } from './utils';
import { generateOptionMatrix, Options } from '../generateOptionMatrix';

Expand All @@ -16,9 +16,9 @@ export interface Configuration<TComponentOptions = unknown> {
export const defaultSelector = '#container';
const defaultOptions = {};
const defaultCreated = async () => {};
const defaultA11yCheckConfig = isMaterialBased() ? {
const defaultA11yCheckConfig = isFluent() ? {} : {
runOnly: 'color-contrast',
} : {};
};

const getOptionConfigurations = <TComponentOptions = unknown>(
options: Options<TComponentOptions> | undefined,
Expand Down
2 changes: 1 addition & 1 deletion e2e/testcafe-devextreme/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"@babel/plugin-transform-runtime": "7.28.5",
"@testcafe-community/axe": "3.5.0",
"@types/jquery": "catalog:",
"axe-core": "4.10.3",
"axe-core": "catalog:",
"devextreme": "workspace:*",
"devextreme-screenshot-comparer": "2.0.17",
"devextreme-testcafe-models": "workspace:*",
Expand Down
19 changes: 17 additions & 2 deletions e2e/testcafe-devextreme/tests/accessibility/dataGrid/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,26 @@ import { a11yCheck } from '../../../helpers/accessibility/utils';
import url from '../../../helpers/getPageUrl';
import { createWidget } from '../../../helpers/createWidget';
import { getData } from '../../dataGrid/helpers/generateDataSourceData';
import { isMaterialBased } from '../../../helpers/themeUtils';
import { isFluent } from '../../../helpers/themeUtils';

fixture.disablePageReloads`DataGrid - Common`
.page(url(__dirname, '../../container.html'));

const DATA_GRID_SELECTOR = '#container';

const a11yCheckConfig = isMaterialBased() ? { runOnly: 'color-contrast' } : { };
const a11yCheckConfig = isFluent() ? {} : { runOnly: 'color-contrast' };

Comment on lines +15 to +16
Copy link

Copilot AI Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a11yCheckConfig logic changed from isMaterialBased() ? { runOnly: 'color-contrast' } : {} to isFluent() ? {} : { runOnly: 'color-contrast' }. This means non-Fluent runs (e.g., --theme generic.light when running the dataGrid folder) will now only execute the color-contrast rule and skip the rest of the Axe checks, which is a significant reduction in a11y coverage compared to the previous behavior. If the intent is only to keep the Material theme limited to color-contrast, consider keying this condition off isMaterial() (or otherwise preserving full checks for non-material themes) while still enabling full checks for Fluent.

Copilot generated this review using guidance from repository custom instructions.
test('Grid without config', async (t) => {
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);

await t
.expect(dataGrid.isReady())
.ok();

await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
}).before(async () => createWidget('dxDataGrid', {
dataSource: [],
}));

test('Grid without data', async (t) => {
const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
Expand All @@ -24,6 +36,9 @@ test('Grid without data', async (t) => {
await a11yCheck(t, a11yCheckConfig, DATA_GRID_SELECTOR);
}).before(async () => createWidget('dxDataGrid', {
dataSource: [],
columns: [
'test',
],
}));

test('Sorting and group panel', async (t) => {
Expand Down
4 changes: 2 additions & 2 deletions e2e/testcafe-devextreme/tests/accessibility/treeList/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import TreeList from 'devextreme-testcafe-models/treeList';
import { a11yCheck } from '../../../helpers/accessibility/utils';
import url from '../../../helpers/getPageUrl';
import { createWidget } from '../../../helpers/createWidget';
import { isMaterialBased } from '../../../helpers/themeUtils';
import { isFluent } from '../../../helpers/themeUtils';

fixture.disablePageReloads`TreeList - a11y`
.page(url(__dirname, '../../container.html'));
Expand All @@ -27,7 +27,7 @@ function getData(rowCount: number): Record<string, any>[] {
return data;
}

const a11yCheckConfig = isMaterialBased() ? { runOnly: 'color-contrast' } : {};
const a11yCheckConfig = isFluent() ? {} : { runOnly: 'color-contrast' };

test('Search panel, filter panel, pager and selection', async (t) => {
const treeList = new TreeList(TREE_LIST_SELECTOR);
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"@types/tar-fs": "2.0.4",
"@types/yargs": "17.0.35",
"@vue/shared": "3.4.27",
"axe-core": "4.10.3",
"axe-core": "catalog:",
"cheerio": "1.0.0-rc.10",
"codelyzer": "6.0.2",
"devextreme-internal-tools": "catalog:tools",
Expand Down
3 changes: 1 addition & 2 deletions packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -517,10 +517,9 @@ export class RowsView extends ColumnsView {
}

private _setGridRole($element: dxElementWrapper): void {
const hasData = !this._dataController?.isEmpty();
const gridRoleName = this._getGridRoleName();

if ($element?.length && hasData) {
if ($element?.length) {
this.setAria('role', gridRoleName, $element);
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
"@typescript-eslint/parser": "catalog:",
"ast-types": "0.14.2",
"autoprefixer": "10.4.23",
"axe-core": "4.10.3",
"axe-core": "catalog:",
"babel-plugin-add-module-exports": "1.0.4",
"babel-plugin-inferno": "6.8.5",
"cldr-core": "41.0.0",
Expand Down
37 changes: 20 additions & 17 deletions pnpm-lock.yaml
View file
Open in desktop

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

1 change: 1 addition & 0 deletions pnpm-workspace.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ packages:
- '!packages/sbom'

catalog:
axe-core: ^4.11.1
inferno: ^8.2.3
inferno-hydrate: ^8.2.3
inferno-create-element: ^8.2.3
Expand Down
Loading