Others: Add configurations for accessibility testing

e2e/testcafe-devextreme/tests/accessibility/drawer.ts

@@ -0,0 +1,32 @@
+import { Properties } from 'devextreme/ui/drawer.d';
+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 options: Options<Properties> = {
+ height: [400],
+ disabled: [true, false],
+ hint: [undefined, 'hint'],
+ revealMode: ['slide', 'expand'],
+ opened: [true, false],
+ template: [() => {
+ const $drawerContent = $('<div>').width(200).css('height', '100%');
+ return $drawerContent;
+ }],
+};
+
+const a11yCheckConfig = {
+ // NOTE: color-contrast issues
+ rules: { 'color-contrast': { enabled: false } },
+};
+
+const configuration: Configuration = {
+ component: 'dxDrawer',
+ a11yCheckConfig,
+ options,
+};
+
+testAccessibility(configuration);

e2e/testcafe-devextreme/tests/accessibility/dropDownBox.ts

@@ -0,0 +1,50 @@
+import { Properties } from 'devextreme/ui/drop_down_box.d';
+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 = ['Download Trial For Visual Studio', 'Download Trial For All Platforms', 'Package Managers'];
+
+const options: Options<Properties> = {
+ dataSource: [[], items],
+ disabled: [true, false],
+ readOnly: [true, false],
+ name: [undefined, 'name'],
+ text: [undefined, 'Download Trial'],
+ label: [undefined, 'label'],
+ showClearButton: [true, false],
+ showDropDownButton: [true, false],
+ opened: [true, false],
+ deferRendering: [true, false],
+ buttons: [
+ undefined,
+ [
+ {
+ name: 'today',
+ location: 'before',
+ options: {
+ text: 'Today',
+ stylingMode: 'text',
+ onClick: () => {},
+ },
+ },
+ ],
+ ],
+ inputAttr: [{ 'aria-label': 'DropDownBox' }],
+};
+
+const a11yCheckConfig = {
+ // NOTE: color-contrast issues
+ rules: { 'color-contrast': { enabled: false } },
+};
+
+const configuration: Configuration = {
+ component: 'dxDropDownBox',
+ a11yCheckConfig,
+ options,
+};
+
+testAccessibility(configuration);

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

@@ -0,0 +1,39 @@
+import { Properties } from 'devextreme/ui/form.d';
+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 formData = {
+ ID: 1,
+ FirstName: 'John',
+ LastName: 'Heart',
+ Position: 'CEO',
+};
+
+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],
+};
+
+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/loadIndicator.ts

@@ -0,0 +1,26 @@
+import { Properties } from 'devextreme/ui/load_indicator.d';
+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 options: Options<Properties> = {
+ height: [undefined, 40],
+ width: [undefined, 40],
+ hint: [undefined, 'hint'],
+};
+
+const a11yCheckConfig = {
+ // NOTE: color-contrast issues
+ rules: { 'color-contrast': { enabled: false } },
+};
+
+const configuration: Configuration = {
+ component: 'dxLoadIndicator',
+ a11yCheckConfig,
+ options,
+};
+
+testAccessibility(configuration);

e2e/testcafe-devextreme/tests/accessibility/map.ts

@@ -0,0 +1,38 @@
+import { Properties } from 'devextreme/ui/map.d';
+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 markersData = [
+ { location: '40.7825, -73.966111' },
+ { location: [40.755833, -73.986389] },
+ { location: { lat: 40.753889, lng: -73.981389 } },
+ { location: 'Brooklyn Bridge,New York,NY' },
+];
+
+const options: Options<Properties> = {
+ provider: ['bing'],
+ apiKey: [{
+ bing: 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC',
+ }],
+ hint: [undefined, 'hint'],
+ controls: [true, false],
+ zoom: [undefined, 10],
+ markers: [undefined, markersData],
+};
+
+const a11yCheckConfig = {
+ // NOTE: color-contrast issues
+ rules: { 'color-contrast': { enabled: false } },
+};
+
+const configuration: Configuration = {
+ component: 'dxMap',
+ a11yCheckConfig,
+ options,
+};
+
+testAccessibility(configuration);

e2e/testcafe-devextreme/tests/accessibility/validationSummary.ts

@@ -0,0 +1,24 @@
+import { Properties } from 'devextreme/ui/validation_summary.d';
+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 options: Options<Properties> = {
+ validationGroup: [undefined, 'validationGroup'],
+};
+
+const a11yCheckConfig = {
+ // NOTE: color-contrast issues
+ rules: { 'color-contrast': { enabled: false } },
+};
+
+const configuration: Configuration = {
+ component: 'dxValidationSummary',
+ a11yCheckConfig,
+ options,
+};
+
+testAccessibility(configuration);

packages/testcafe-models/types.ts

@@ -57,7 +57,11 @@ export type WidgetName =
  | 'dxSlider'
  | 'dxDropDownBox'
  | 'dxFileManager'
- | 'dxSwitch';
+ | 'dxSwitch'
+ | 'dxLoadIndicator'
+ | 'dxMap'
+ | 'dxDrawer'
+ | 'dxValidationSummary';
 
 export interface WidgetOptions {
  dxDataGrid: DataGridProperties;