Scheduler: keyboard navigation through appointments on mac (DevExpress#29719) (DevExpress#29724)

Author: wdevfx

e2e/testcafe-devextreme/tests/scheduler/common/keyboardNavigation/dateTable.ts

@@ -0,0 +1,60 @@
+import Scheduler from 'devextreme-testcafe-models/scheduler';
+import { ClientFunction, Selector } from 'testcafe';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+import { appendElementTo } from '../../../../helpers/domUtils';
+
+fixture.disablePageReloads`KeyboardNavigation.DateTable`
+  .page(url(__dirname, '../../../container.html'));
+
+const PARENT_SELECTOR = '#parentContainer';
+const SCHEDULER_SELECTOR = '#container';
+const BOTTOM_BTN_ID = 'bottom-btn';
+const BOTTOM_BTN_SELECTOR = `#${BOTTOM_BTN_ID}`;
+
+const setMacOsScrollableOptions = ClientFunction(() => {
+  ($(SCHEDULER_SELECTOR) as any)
+    .dxScheduler('instance')
+    .getWorkSpaceScrollable()
+    .option('useNative', true);
+}, { dependencies: { SCHEDULER_SELECTOR } });
+
+[
+  'day',
+  'week',
+].forEach((currentView) => {
+  test(`Should pass focus to the next elements after date table on Mac devices (view: ${currentView})`, async (t) => {
+    const bottomBtn = Selector(BOTTOM_BTN_SELECTOR);
+    const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+    const usualAppointment = scheduler.getAppointment('Usual');
+
+    await t
+      .click(usualAppointment.element)
+      .pressKey('tab tab');
+
+    await t.expect(bottomBtn.focused).ok();
+  }).before(async () => {
+    await appendElementTo(PARENT_SELECTOR, 'button', BOTTOM_BTN_ID);
+    await createWidget('dxScheduler', {
+      dataSource: [
+        {
+          startDate: '2024-01-01T01:00:00',
+          endDate: '2024-01-01T02:00:00',
+          text: 'Usual',
+        },
+        // NOTE: This case is reproduced only if view has allDay appointment
+        {
+          startDate: '2024-01-01T01:00:00',
+          endDate: '2024-01-01T02:00:00',
+          text: 'All-day',
+          allDay: true,
+        },
+      ],
+      // NOTE: Scheduler should have a height limit for enabling native scroll container
+      height: 300,
+      currentDate: '2024-01-01',
+      currentView,
+    });
+    await setMacOsScrollableOptions();
+  });
+});

packages/devextreme/js/__internal/scheduler/workspaces/m_work_space.ts

@@ -605,10 +605,30 @@ class SchedulerWorkSpace extends WidgetObserver {
       onScroll: () => {
         this._groupedStrategy.cache?.clear();
       },
+      // TODO (Scrollable:useKeyboard) -> remove this WA
+      //  after ScrollView private option "useKeyboard" will be extended to useNative: true
+      // NOTE: Scrollable container focusable by default
+      // To prevent scroll container focus in native mode we set tabindex -1 to container
+      // In simulated mode focusable behavior prevented by useKeyboard: false private option
+      onInitialized: ({ component }) => {
+        const useKeyboardDisabled = component.option('useKeyboard') === false;
+        const useNativeEnabled = component.option('useNative') === true;
+        if (useKeyboardDisabled && useNativeEnabled) {
+          $(component.container()).attr('tabindex', -1);
+        }
+      },
+      onOptionChanged: ({ fullName, value, component }) => {
+        const useKeyboardDisabled = component.option('useKeyboard') === false;
+        if (useKeyboardDisabled && fullName === 'useNative' && value === true) {
+          $(component.container()).attr('tabindex', -1);
+        }
+      },
     };
+
     if (this._needCreateCrossScrolling()) {
       config = extend(config, this._createCrossScrollingConfig(config));
     }
+
     if (this.isVirtualScrolling()
             && (this.virtualScrollingDispatcher.horizontalScrollingAllowed
                 || this.virtualScrollingDispatcher.height)) {