Scheduler - A11y - Don't hide tooltip on item delete (#33410)

Author: Tucchhaa

e2e/testcafe-devextreme/tests/scheduler/common/recurrences/etalons/recurrence-delete-dialog-screenshot (fluent.blue.light).png

@@ -70,4 +70,8 @@ export const setupSchedulerTestEnvironment = ({
 
     return defaultRect;
   });
+
+  Element.prototype.getClientRects = jest.fn(function (): DOMRectList {
+    return [Element.prototype.getBoundingClientRect.call(this)] as unknown as DOMRectList;
+  });
 };

packages/devextreme/js/__internal/scheduler/__tests__/__mock__/m_mock_scheduler.ts

@@ -1,12 +1,28 @@
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import type dxTooltip from '@js/ui/tooltip';
 import { within } from '@testing-library/dom';
 
-const TOOLTIP_WRAPPER_SELECTOR = '.dx-overlay-wrapper.dx-scheduler-appointment-tooltip-wrapper';
+const TOOLTIP_WRAPPER_SELECTOR = `
+  .dx-overlay-wrapper.dx-scheduler-overlay-panel,
+  .dx-overlay-wrapper.dx-scheduler-appointment-tooltip-wrapper
+`;
 
 export class TooltipModel {
-  private get element(): HTMLElement | null {
+  get element(): HTMLElement | null {
     return document.querySelector<HTMLElement>(TOOLTIP_WRAPPER_SELECTOR);
   }
 
+  get dxTooltip(): dxTooltip {
+    // @ts-expect-error
+    return $('.dx-tooltip.dx-widget').dxTooltip('instance') as dxTooltip;
+  }
+
+  get target(): Element | null {
+    const $target = this.dxTooltip.option('target') as unknown as dxElementWrapper;
+    return $target?.get(0) ?? null;
+  }
+
   isVisible(): boolean {
     return this.element !== null;
   }
@@ -15,24 +31,35 @@ export class TooltipModel {
     return this.element?.querySelector('.dx-scrollable .dx-scrollview-content') ?? null;
   }
 
-  getDeleteButton(index = 0): HTMLElement {
-    const tooltip = this.element;
-    const buttons = tooltip
-      ? within(tooltip).queryAllByRole('button').filter((btn) => btn.classList.contains('dx-tooltip-appointment-item-delete-button'))
+  getDeleteButtons(): HTMLElement[] {
+    return this.element
+      ? within(this.element).queryAllByRole('button').filter(
+        (btn) => btn.classList.contains('dx-tooltip-appointment-item-delete-button'),
+      )
       : [];
+  }
 
-    if (buttons.length === 0) {
+  getDeleteButton(index = 0): HTMLElement {
+    const buttons = this.getDeleteButtons();
+
+    if (buttons.length <= index) {
       throw new Error('Tooltip delete button not found');
     }
 
     return buttons[index];
   }
 
-  getAppointmentItem(index = 0): HTMLElement | null {
-    const tooltip = this.element;
-    if (!tooltip) {
-      return null;
+  getAppointmentItems(): HTMLElement[] {
+    return this.element ? within(this.element).queryAllByRole('option') : [];
+  }
+
+  getAppointmentItem(index = 0): HTMLElement {
+    const items = this.getAppointmentItems();
+
+    if (items.length <= index) {
+      throw new Error('Tooltip appointment item not found');
     }
-    return within(tooltip).queryAllByRole('option')[index] ?? null;
+
+    return items[index];
   }
 }