From 3e775d9822c126826320c89753b13dfa01c6cd9a Mon Sep 17 00:00:00 2001
From: Joshua Victoria <133762589+jdvictoria@users.noreply.github.com>
Date: Tue, 14 May 2024 21:31:17 +0800
Subject: [PATCH] Overlays: Add configurations for accessibility testing
 (#27327)

---
 .../accessibility/floatingActionButton.ts     | 26 +++++++++++
 .../tests/accessibility/loadPanel.ts          | 29 ++++++++++++
 .../tests/accessibility/popover.ts            | 44 +++++++++++++++++++
 .../tests/accessibility/toast.ts              | 28 ++++++++++++
 .../tests/accessibility/tooltip.ts            | 29 ++++++++++++
 packages/testcafe-models/types.ts             |  5 ++-
 6 files changed, 160 insertions(+), 1 deletion(-)
 create mode 100644 e2e/testcafe-devextreme/tests/accessibility/floatingActionButton.ts
 create mode 100644 e2e/testcafe-devextreme/tests/accessibility/loadPanel.ts
 create mode 100644 e2e/testcafe-devextreme/tests/accessibility/popover.ts
 create mode 100644 e2e/testcafe-devextreme/tests/accessibility/toast.ts
 create mode 100644 e2e/testcafe-devextreme/tests/accessibility/tooltip.ts

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<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);
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<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);
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<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);
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<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);
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<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);
diff --git a/packages/testcafe-models/types.ts b/packages/testcafe-models/types.ts
index 9dbf6557e008..ec635b76afec 100644
--- a/packages/testcafe-models/types.ts
+++ b/packages/testcafe-models/types.ts
@@ -57,7 +57,10 @@ export type WidgetName =
   | 'dxSlider'
   | 'dxDropDownBox'
   | 'dxFileManager'
-  | 'dxSwitch';
+  | 'dxSwitch'
+  | 'dxToast'
+  | 'dxLoadPanel'
+  | 'dxTooltip';
 
 export interface WidgetOptions {
   dxDataGrid: DataGridProperties;