Editors: Add configurations for accessibility testing (#27317)

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

@@ -0,0 +1,43 @@
+import { Properties } from 'devextreme/ui/file_uploader.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 file: File[] = [{
+ lastModified: Date.now(),
+ name: 'Item_1.png',
+ type: 'image/png',
+ size: 1024,
+ webkitRelativePath: '',
+ slice: () => new Blob(),
+ stream: () => new ReadableStream(),
+ text: () => Promise.resolve('File text'),
+ arrayBuffer: () => Promise.resolve(new ArrayBuffer(1024)),
+}];
+
+const options: Options<Properties> = {
+ value: [undefined, file],
+ multiple: [true, false],
+ disabled: [true, false],
+ readOnly: [true, false],
+ hint: [undefined, 'hint'],
+ name: ['', 'name'],
+ focusStateEnabled: [true],
+ inputAttr: [{ 'aria-label': 'aria-label' }],
+};
+
+const a11yCheckConfig = {
+ // NOTE: color-contrast issues
+ rules: { 'color-contrast': { enabled: false } },
+};
+
+const configuration: Configuration = {
+ component: 'dxFileUploader',
+ a11yCheckConfig,
+ options,
+};
+
+testAccessibility(configuration);

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

@@ -0,0 +1,45 @@
+import { Properties } from 'devextreme/ui/html_editor.d';
+import { Selector } from 'testcafe';
+import url from '../../helpers/getPageUrl';
+import { defaultSelector, testAccessibility, Configuration } from '../../helpers/accessibility/test';
+import { Options } from '../../helpers/generateOptionMatrix';
+
+fixture.disablePageReloads`Accessibility`
+ .page(url(__dirname, '../container.html'));
+
+const markup = '<p>He<em>llo</em></p>';
+
+const options: Options<Properties> = {
+ value: [undefined, markup],
+ readOnly: [true, false],
+ hint: [undefined, 'hint'],
+ name: ['', 'name'],
+ height: [undefined, 300],
+ width: [undefined, 300],
+ placeholder: ['', 'placeholder'],
+ focusStateEnabled: [true],
+ toolbar: [
+ undefined,
+ {
+ items: ['bold', 'color'],
+ },
+ ],
+};
+
+const created = async (t: TestController): Promise<void> => {
+ await t.click(Selector(defaultSelector));
+};
+
+const a11yCheckConfig = {
+ // NOTE: color-contrast issues
+ rules: { 'color-contrast': { enabled: false } },
+};
+
+const configuration: Configuration = {
+ component: 'dxHtmlEditor',
+ a11yCheckConfig,
+ options,
+ created,
+};
+
+testAccessibility(configuration);

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

@@ -0,0 +1,30 @@
+import { Properties } from 'devextreme/ui/progress_bar.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> = {
+ value: [undefined, 45],
+ min: [0],
+ max: [100],
+ disabled: [true, false],
+ hint: [undefined, 'hint'],
+ showStatus: [true, false],
+ elementAttr: [{ 'aria-label': 'Progress Bar' }],
+};
+
+const a11yCheckConfig = {
+ // NOTE: color-contrast issues
+ rules: { 'color-contrast': { enabled: false } },
+};
+
+const configuration: Configuration = {
+ component: 'dxProgressBar',
+ a11yCheckConfig,
+ options,
+};
+
+testAccessibility(configuration);

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

@@ -0,0 +1,52 @@
+import { Properties } from 'devextreme/ui/range_slider.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> = {
+ start: [40],
+ end: [60],
+ disabled: [true, false],
+ readOnly: [true, false],
+ hint: [undefined, 'hint'],
+ height: [undefined, 250],
+ width: [undefined, '50%'],
+ focusStateEnabled: [true],
+ label: [
+ undefined,
+ {
+ visible: true,
+ format(value) {
+ return `${value}%`;
+ },
+ position: 'top',
+ },
+ ],
+ tooltip: [
+ undefined,
+ {
+ enabled: true,
+ format(value) {
+ return `${value}%`;
+ },
+ showMode: 'always',
+ position: 'bottom',
+ },
+ ],
+};
+
+const a11yCheckConfig = {
+ // NOTE: color-contrast issues
+ rules: { 'color-contrast': { enabled: false } },
+};
+
+const configuration: Configuration = {
+ component: 'dxRangeSlider',
+ a11yCheckConfig,
+ options,
+};
+
+testAccessibility(configuration);

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

@@ -0,0 +1,55 @@
+import { Properties } from 'devextreme/ui/slider.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> = {
+ value: [45],
+ disabled: [true, false],
+ readOnly: [true, false],
+ hint: [undefined, 'hint'],
+ name: ['', 'name'],
+ height: [undefined, 250],
+ width: [undefined, '50%'],
+ min: [undefined, 10],
+ max: [undefined, 90],
+ showRange: [true, false],
+ focusStateEnabled: [true],
+ label: [
+ undefined,
+ {
+ visible: true,
+ format(value) {
+ return `${value}%`;
+ },
+ position: 'top',
+ },
+ ],
+ tooltip: [
+ undefined,
+ {
+ enabled: true,
+ format(value) {
+ return `${value}%`;
+ },
+ showMode: 'always',
+ position: 'bottom',
+ },
+ ],
+};
+
+const a11yCheckConfig = {
+ // NOTE: color-contrast issues
+ rules: { 'color-contrast': { enabled: false } },
+};
+
+const configuration: Configuration = {
+ component: 'dxSlider',
+ a11yCheckConfig,
+ options,
+};
+
+testAccessibility(configuration);

e2e/testcafe-devextreme/tests/container.html

@@ -17,6 +17,7 @@
  <link rel="dx-theme" data-theme="fluent.saas.dark" href="../../../packages/devextreme/artifacts/css/dx.fluent.saas.dark.css" data-active="false">
 
  <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/jquery.min.js"></script>
+ <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx-quill.min.js"></script>
  <script type="text/javascript" src="../../../packages/devextreme/artifacts/js/dx.all.js"></script>
  <script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
 </head>

packages/testcafe-models/types.ts

@@ -52,6 +52,8 @@ export type WidgetName =
  | 'dxNumberBox'
  | 'dxValidator'
  | 'dxFileUploader'
+ | 'dxProgressBar'
+ | 'dxRangeSlider'
  | 'dxSlider'
  | 'dxDropDownBox'
  | 'dxFileManager'