DataGrid, Scheduler, TreeList, CardView: move a11y tests into the general accessibility folder

e2e/testcafe-devextreme/helpers/testPageUtils.ts

@@ -0,0 +1,68 @@
+/* eslint-disable spellcheck/spell-checker */
+import { ClientFunction } from 'testcafe';
+import {
+  removeStylesheetRulesFromPage,
+} from './domUtils';
+
+export async function clearTestPage(testController: TestController): Promise<void> {
+  const shadowDom = process.env.shadowDom === 'true';
+
+  const clearTestPageFn = ClientFunction(() => {
+    const widgetSelector = '.dx-widget';
+    const $elements = $(widgetSelector)
+      .filter((_, element) => $(element).parents(widgetSelector).length === 0);
+    $elements.each((_, element) => {
+      const $widgetElement = $(element);
+      const widgetNames = $widgetElement.data().dxComponents;
+      widgetNames?.forEach((name) => {
+        if ($widgetElement.hasClass('dx-widget')) {
+          // @ts-expect-error ts-erroe
+          $widgetElement[name]?.('dispose');
+        }
+      });
+      $widgetElement.empty();
+    });
+
+    const body = document.querySelector('body');
+    if (body) {
+      body.innerHTML = '';
+
+      body.className = 'dx-surface';
+    }
+
+    const temp = document.createElement('div');
+    temp.innerHTML = `
+      <div id="parentContainer" role="main">
+        <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>
+        <div id="container"></div>
+        <div id="otherContainer"></div>
+      </div>
+    `;
+
+    body?.prepend(temp.firstElementChild!);
+  }, {
+    dependencies: {
+      shadowDom,
+    },
+  });
+
+  await clearTestPageFn.with({ boundTestRun: testController })();
+  await removeStylesheetRulesFromPage.with({ boundTestRun: testController })();
+}
+
+export async function loadAxeCore(t: TestController): Promise<void> {
+  await t.eval(() => new Promise<void>((resolve, reject) => {
+    // @ts-expect-error ts-error
+    if (window.axe) {
+      resolve();
+      return;
+    }
+
+    const script = document.createElement('script');
+    script.src = '../../../node_modules/axe-core/axe.min.js';
+    // @ts-expect-error ts-error
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  }));
+}

e2e/testcafe-devextreme/runner.ts

@@ -1,10 +1,14 @@
+/* eslint-disable spellcheck/spell-checker */
 import createTestCafe, { ClientFunction } from 'testcafe';
 import * as fs from 'fs';
 import * as process from 'process';
 import parseArgs from 'minimist';
 import { globSync } from 'glob';
 import { DEFAULT_BROWSER_SIZE } from './helpers/const';
-import * as testPageUtils from './helpers/clearPage';
+import {
+  clearTestPage,
+  loadAxeCore,
+} from './helpers/testPageUtils';
 import 'nconf';
 
 interface ParsedArgs {
@@ -251,8 +255,20 @@ createTestCafe(TESTCAFE_CONFIG)
         test: {
           before: async (t: TestController) => {
             if (!componentFolder.includes('accessibility')) {
+              await ClientFunction(() => {
+                if (document.activeElement && document.activeElement !== document.body) {
+                  (document.activeElement as HTMLElement).blur();
+                }
+
+                window.getSelection()?.removeAllRanges();
+              }).with({ boundTestRun: t })();
+
+              await t.hover('html');
+
               const [width, height] = DEFAULT_BROWSER_SIZE;
               await t.resizeWindow(width, height);
+            } else {
+              await loadAxeCore(t);
             }
 
             if (args.shadowDom) {
@@ -269,7 +285,7 @@ createTestCafe(TESTCAFE_CONFIG)
             }
           },
           after: async (t: TestController) => {
-            await testPageUtils.clearTestPage(t);
+            await clearTestPage(t);
           },
         },
       },

e2e/testcafe-devextreme/tests/accessibility/cardView/columnChooser.ts

@@ -0,0 +1,79 @@
+import CardView from 'devextreme-testcafe-models/cardView';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+import { a11yCheck } from '../../../helpers/accessibility/utils';
+
+fixture.disablePageReloads`CardView - ColumnChooser`
+  .page(url(__dirname, '../../container.html'));
+
+const CARD_VIEW_SELECTOR = '#container';
+
+test('column chooser in \'select\' mode', async (t) => {
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+
+  await cardView.apiShowColumnChooser();
+
+  await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
+}).before(async () => createWidget('dxCardView', {
+  columnChooser: {
+    enabled: true,
+    mode: 'select',
+    height: 400,
+    width: 400,
+    search: {
+      enabled: true,
+    },
+    selection: {
+      allowSelectAll: true,
+    },
+  },
+  columns: [
+    { dataField: 'Column 1', visible: false },
+    { dataField: 'Column 2', allowHiding: false },
+    { dataField: 'Column 3', showInColumnChooser: false },
+    { dataField: 'Column 4' },
+  ],
+}));
+
+test('column chooser in \'dragAndDrop\' mode', async (t) => {
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+
+  await cardView.apiShowColumnChooser();
+
+  const a11yCheckConfig = {
+    rules: { 'color-contrast': { enabled: false } },
+  };
+  await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
+}).before(async () => createWidget('dxCardView', {
+  columnChooser: {
+    enabled: true,
+    mode: 'dragAndDrop',
+    height: 400,
+    width: 400,
+    search: {
+      enabled: true,
+    },
+  },
+  columns: [
+    { dataField: 'Column 1', visible: false },
+    { dataField: 'Column 2', visible: false, allowHiding: false },
+    { dataField: 'Column 3', visible: false, showInColumnChooser: false },
+    { dataField: 'Column 4', visible: false },
+  ],
+}));
+
+test('cardView with opened columnChooser', async (t) => {
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+
+  await cardView.apiShowColumnChooser();
+
+  await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
+}).before(async () => createWidget('dxCardView', {
+  dataSource: Array.from({ length: 50 }, (_, i) => ({ value: `value_${i}` })),
+  columnChooser: {
+    enabled: true,
+  },
+  columns: [
+    { dataField: 'value' },
+  ],
+}));

e2e/testcafe-devextreme/tests/accessibility/cardView/columnSortable.ts

@@ -0,0 +1,87 @@
+import CardView from 'devextreme-testcafe-models/cardView';
+import { createWidget } from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+import { getColumnItem, triggerDragEnd, triggerDragStart } from '../../cardView/columnSortable/utils';
+import { a11yCheck } from '../../../helpers/accessibility/utils';
+
+fixture.disablePageReloads`CardView - ColumnSortable`
+  .page(url(__dirname, '../../container.html'));
+
+const CARD_VIEW_SELECTOR = '#container';
+
+test('headerPanel dragging column when it has sorting and headerFilter', async (t) => {
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+  const columnElement = cardView.getHeaders().getHeaderItemNth(0).element;
+
+  await triggerDragStart(columnElement);
+
+  const a11yCheckConfig = {
+    rules: { 'color-contrast': { enabled: false } },
+  };
+  await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
+}).before(async () => createWidget('dxCardView', {
+  allowColumnReordering: true,
+  columnChooser: {
+    enabled: true,
+  },
+  headerFilter: {
+    visible: true,
+  },
+  columns: [{
+    dataField: 'test',
+    allowReordering: true,
+    sortOrder: 'asc',
+  }],
+}));
+
+test('dropzone appear in headerPanel when drag from columnChooser a column', async (t) => {
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+  const columnElement = getColumnItem(cardView, 0, 'columnChooser');
+
+  await cardView.apiShowColumnChooser();
+
+  await triggerDragStart(columnElement);
+  await t.wait(500); // wait for dropzone animation to finish
+
+  await triggerDragEnd(columnElement);
+  await t.wait(500); // wait for dropzone animation to finish
+
+  const a11yCheckConfig = {
+    rules: { 'color-contrast': { enabled: false } },
+  };
+  await a11yCheck(t, a11yCheckConfig, CARD_VIEW_SELECTOR);
+}).before(async () => createWidget('dxCardView', {
+  allowColumnReordering: true,
+  columnChooser: {
+    enabled: true,
+  },
+  height: 600,
+  columns: [
+    { dataField: 'Column 1', visible: false },
+  ],
+}));
+
+test('dropzone appears in headerPanel when drag from columnChooser a column with allowReordering: false', async (t) => {
+  const cardView = new CardView(CARD_VIEW_SELECTOR);
+  const columnElement = getColumnItem(cardView, 0, 'columnChooser');
+
+  await cardView.apiShowColumnChooser();
+
+  await triggerDragStart(columnElement);
+  await t.wait(500); // wait for dropzone animation to finish
+
+  await triggerDragEnd(columnElement);
+  await t.wait(500); // wait for dropzone animation to finish
+
+  await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
+}).before(async () => createWidget('dxCardView', {
+  allowColumnReordering: true,
+  columnChooser: {
+    enabled: true,
+  },
+  height: 600,
+  columns: [
+    { dataField: 'Column 1' },
+    { dataField: 'Column 2', visible: false, allowReordering: false },
+  ],
+}));

e2e/testcafe-devextreme/tests/accessibility/cardView/cover.ts

@@ -0,0 +1,53 @@
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+import { a11yCheck } from '../../../helpers/accessibility/utils';
+
+fixture.disablePageReloads`CardView - Cover`
+  .page(url(__dirname, '../container.html'));
+
+const CARD_VIEW_SELECTOR = '#container';
+
+test('default render', async (t) => {
+  await a11yCheck(t, {}, CARD_VIEW_SELECTOR);
+}).before(async () => createWidget('dxCardView', {
+  width: 1000,
+  height: 600,
+  columns: ['Customer', 'Order Date'],
+  cardCover: {
+    imageExpr: (data) => data.Picture && `https://js.devexpress.com/jQuery/Demos/WidgetsGallery/JSDemos/${data.Picture}`,
+    altExpr: 'FirstName',
+  },
+  dataSource: [{
+    ID: 1,
+    FirstName: 'John',
+    LastName: 'Heart',
+    Prefix: 'Mr.',
+    Position: 'CEO',
+    Picture: 'images/employees/01.png',
+    BirthDate: '1964/03/16',
+    HireDate: '1995/01/15',
+    Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003. When not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
+    Address: '351 S Hill St.',
+  }, {
+    ID: 2,
+    FirstName: 'Olivia',
+    LastName: 'Peyton',
+    Prefix: 'Mrs.',
+    Position: 'Sales Assistant',
+    BirthDate: '1981/06/03',
+    HireDate: '2012/05/14',
+    Notes: 'Olivia loves to sell. She has been selling DevAV products since 2012.  Olivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.',
+    Address: '807 W Paseo Del Mar',
+  }, {
+    ID: 3,
+    FirstName: 'Robert',
+    LastName: 'Reagan',
+    Prefix: 'Mr.',
+    Position: 'CMO',
+    Picture: 'images/employees/03.png',
+    BirthDate: '1974/09/07',
+    HireDate: '2002/11/08',
+    Notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team. Robert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.',
+    Address: '4 Westmoreland Pl.',
+  }],
+}));