Merge branch '24_1' into 24_1_a11y_Others

Signed-off-by: Joshua Victoria <[email protected]>

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<Properties> = {
+ 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);

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<Properties> = {
+ 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);

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<Properties> = {
+ 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);

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<Properties> = {
+ 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);

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<Properties> = {
+ 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);

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;