diff --git a/e2e/testcafe-devextreme/tests/accessibility/floatingActionButton.ts b/e2e/testcafe-devextreme/tests/accessibility/floatingActionButton.ts new file mode 100644 index 000000000000..871d8b89dba0 --- /dev/null +++ b/e2e/testcafe-devextreme/tests/accessibility/floatingActionButton.ts @@ -0,0 +1,26 @@ +import { Properties } from 'devextreme/ui/speed_dial_action.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 = { + label: ['', 'label'], + hint: [undefined, 'hint'], + icon: [undefined, 'save'], +}; + +const a11yCheckConfig = { + // NOTE: color-contrast issues + rules: { 'color-contrast': { enabled: false } }, +}; + +const configuration: Configuration = { + component: 'dxSpeedDialAction', + a11yCheckConfig, + options, +}; + +testAccessibility(configuration); diff --git a/e2e/testcafe-devextreme/tests/accessibility/loadPanel.ts b/e2e/testcafe-devextreme/tests/accessibility/loadPanel.ts new file mode 100644 index 000000000000..e201340f8943 --- /dev/null +++ b/e2e/testcafe-devextreme/tests/accessibility/loadPanel.ts @@ -0,0 +1,29 @@ +import { Properties } from 'devextreme/ui/load_panel.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 = { + visible: [true], + showIndicator: [true, false], + showPane: [true, false], + message: [undefined, 'message'], + hint: [undefined, 'hint'], + delay: [undefined, 3000], +}; + +const a11yCheckConfig = { + // NOTE: color-contrast issues + rules: { 'color-contrast': { enabled: false } }, +}; + +const configuration: Configuration = { + component: 'dxLoadPanel', + a11yCheckConfig, + options, +}; + +testAccessibility(configuration); diff --git a/e2e/testcafe-devextreme/tests/accessibility/popover.ts b/e2e/testcafe-devextreme/tests/accessibility/popover.ts new file mode 100644 index 000000000000..7c7c88ee3da5 --- /dev/null +++ b/e2e/testcafe-devextreme/tests/accessibility/popover.ts @@ -0,0 +1,44 @@ +import { Properties } from 'devextreme/ui/popover.d'; +import url from '../../helpers/getPageUrl'; +import { defaultSelector, testAccessibility, Configuration } from '../../helpers/accessibility/test'; +import { Options } from '../../helpers/generateOptionMatrix'; +import { isMaterial, isMaterialBased } from '../../helpers/themeUtils'; + +fixture.disablePageReloads`Accessibility` + .page(url(__dirname, '../container.html')); + +const options: Options = { + visible: [true], + target: [defaultSelector], + width: [300], + height: [280], + showTitle: [true, false], + title: [undefined, 'title'], + showCloseButton: [true, false], + toolbarItems: [ + undefined, + [ + { + location: 'before', + widget: 'dxButton', + options: { + icon: 'back', + }, + }, + ], + ], +}; + +const a11yCheckConfig = isMaterialBased() ? { + // NOTE: color-contrast issues in Material + runOnly: isMaterial() ? '' : 'color-contrast', + rules: { 'color-contrast': { enabled: !isMaterial() } }, +} : {}; + +const configuration: Configuration = { + component: 'dxPopover', + a11yCheckConfig, + options, +}; + +testAccessibility(configuration); diff --git a/e2e/testcafe-devextreme/tests/accessibility/toast.ts b/e2e/testcafe-devextreme/tests/accessibility/toast.ts new file mode 100644 index 000000000000..8e7fc64f5d4d --- /dev/null +++ b/e2e/testcafe-devextreme/tests/accessibility/toast.ts @@ -0,0 +1,28 @@ +import { Properties } from 'devextreme/ui/toast.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 = { + visible: [true], + message: [undefined, 'message'], + hint: [undefined, 'hint'], + displayTime: [undefined, 3000], + type: ['custom', 'error', 'info', 'success', 'warning'], +}; + +const a11yCheckConfig = { + // NOTE: color-contrast issues + rules: { 'color-contrast': { enabled: false } }, +}; + +const configuration: Configuration = { + component: 'dxToast', + a11yCheckConfig, + options, +}; + +testAccessibility(configuration); diff --git a/e2e/testcafe-devextreme/tests/accessibility/tooltip.ts b/e2e/testcafe-devextreme/tests/accessibility/tooltip.ts new file mode 100644 index 000000000000..e0929d60676b --- /dev/null +++ b/e2e/testcafe-devextreme/tests/accessibility/tooltip.ts @@ -0,0 +1,29 @@ +import { Properties } from 'devextreme/ui/tooltip.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 = { + visible: [true], + target: ['#container'], + width: [50], + height: [25], + disabled: [true, false], + hint: [undefined, 'hint'], +}; + +const a11yCheckConfig = { + // NOTE: color-contrast issues + rules: { 'color-contrast': { enabled: false } }, +}; + +const configuration: Configuration = { + component: 'dxTooltip', + a11yCheckConfig, + options, +}; + +testAccessibility(configuration); diff --git a/packages/testcafe-models/types.ts b/packages/testcafe-models/types.ts index ed3c5a579608..fc8006c28b03 100644 --- a/packages/testcafe-models/types.ts +++ b/packages/testcafe-models/types.ts @@ -61,7 +61,10 @@ export type WidgetName = | 'dxLoadIndicator' | 'dxMap' | 'dxDrawer' - | 'dxValidationSummary'; + | 'dxValidationSummary' + | 'dxToast' + | 'dxLoadPanel' + | 'dxTooltip'; export interface WidgetOptions { dxDataGrid: DataGridProperties;