CI optimization: optimize TestCafe accessibility tests (Navigation) (#31249)

Author: pharret31

…treme/tests/accessibility/common/form.ts …ests/accessibility/common/form/common.tse2e/testcafe-devextreme/tests/accessibility/common/form.ts renamed to e2e/testcafe-devextreme/tests/accessibility/common/form/common.ts e2e/testcafe-devextreme/tests/accessibility/common/form.ts renamed to e2e/testcafe-devextreme/tests/accessibility/common/form/common.ts

@@ -1,28 +1,25 @@
-import { Properties } from 'devextreme/ui/form.d';
-import url from '../../../helpers/getPageUrl';
-import { testAccessibility, Configuration } from '../../../helpers/accessibility/test';
-import { Options } from '../../../helpers/generateOptionMatrix';
+import { Properties } from 'devextreme/ui/form';
+import url from '../../../../helpers/getPageUrl';
+import { testAccessibility, Configuration } from '../../../../helpers/accessibility/test';
+import { Options } from '../../../../helpers/generateOptionMatrix';
 
 fixture.disablePageReloads`Accessibility`
-  .page(url(__dirname, '../../container.html'));
+  .page(url(__dirname, '../../../container.html'));
 
 const formData = {
   ID: 1,
   FirstName: 'John',
   LastName: 'Heart',
   Position: 'CEO',
+  Active: true,
 };
 
 const options: Options<Properties> = {
   height: [200],
   hint: [undefined, 'hint'],
-  requiredMark: [undefined, '#'],
   alignItemLabels: [true, false],
-  showRequiredMark: [true, false],
   showOptionalMark: [true, false],
-  showValidationSummary: [true, false],
-  showColonAfterLabel: [true, false],
-  formData: [undefined, formData],
+  formData: [formData],
 };
 
 const a11yCheckConfig = {

e2e/testcafe-devextreme/tests/accessibility/common/form/requiredFields.ts

@@ -0,0 +1,36 @@
+import { Properties } from 'devextreme/ui/form';
+import url from '../../../../helpers/getPageUrl';
+import { testAccessibility, Configuration } from '../../../../helpers/accessibility/test';
+import { Options } from '../../../../helpers/generateOptionMatrix';
+
+fixture.disablePageReloads`Accessibility`
+  .page(url(__dirname, '../../../container.html'));
+
+const items: Properties['items'] = [{
+  itemType: 'simple',
+  dataField: 'Email',
+  validationRules: [{
+    type: 'required',
+    message: 'Email is required',
+  }],
+}];
+
+const options: Options<Properties> = {
+  height: [200],
+  showRequiredMark: [true, false],
+  showValidationSummary: [true, false],
+  items: [items],
+};
+
+const a11yCheckConfig = {
+  // NOTE: color-contrast issues
+  rules: { 'color-contrast': { enabled: false } },
+};
+
+const configuration: Configuration = {
+  component: 'dxForm',
+  a11yCheckConfig,
+  options,
+};
+
+testAccessibility(configuration);

e2e/testcafe-devextreme/tests/accessibility/common/gallery.ts

@@ -1,4 +1,4 @@
-import { Properties } from 'devextreme/ui/gallery.d';
+import { Properties } from 'devextreme/ui/gallery';
 import url from '../../../helpers/getPageUrl';
 import { testAccessibility, Configuration } from '../../../helpers/accessibility/test';
 import { Options } from '../../../helpers/generateOptionMatrix';
@@ -25,7 +25,6 @@ const options: Options<Properties> = {
   height: [300],
   width: [300],
   dataSource: [gallery],
-  loop: [true, false],
   swipeEnabled: [true, false],
   showIndicator: [true, false],
   showNavButtons: [true, false],

e2e/testcafe-devextreme/tests/accessibility/common/list/simpleItems.ts

@@ -7,9 +7,10 @@ fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../../../container.html'));
 
 const simpleItems = ['Item_1', 'Item_2', 'Item_3'];
+const simpleItemsPaged = { store: simpleItems, pageSize: 2 };
 
 const optionsWithSimpleItems: Options<Properties> = {
-  dataSource: [[], simpleItems],
+  dataSource: [[], simpleItems, simpleItemsPaged],
   height: [400],
   grouped: [false],
   searchEnabled: [true, false],

e2e/testcafe-devextreme/tests/navigation/gallery/accessibility.ts

@@ -4,7 +4,6 @@ import List from 'devextreme-testcafe-models/list';
 import { isMaterialBased, isFluent, testScreenshot } from '../../../helpers/themeUtils';
 import url from '../../../helpers/getPageUrl';
 import { createWidget } from '../../../helpers/createWidget';
-import { a11yCheck } from '../../../helpers/accessibility/utils';
 
 fixture`List`
   .page(url(__dirname, '../../container.html'));
@@ -366,27 +365,3 @@ test('The button icon in custom template should be displayed correctly after the
     element.append(button);
   },
 }));
-
-test('Checking simple list with selectAll and "more" button via aXe', async (t) => {
-  await a11yCheck(t);
-}).before(async () => createWidget('dxList', {
-  dataSource: {
-    store: ['item 1', 'item 2', 'item 3'],
-    pageSize: 2,
-  },
-  selectionMode: 'all',
-  showSelectionControls: true,
-}));
-
-test('Checking group list via aXe', async (t) => {
-  await a11yCheck(t);
-}).before(async () => createWidget('dxList', {
-  dataSource: [{
-    key: 'Group 1',
-    items: ['item 1', 'item 2', 'item 3'],
-  }, {
-    key: 'Group 2',
-    items: ['item 1', 'item 2', 'item 3'],
-  }],
-  grouped: true,
-}));