Scheduler - Appointments Refactoring - Focus state (#33269)

Author: Tucchhaa

packages/devextreme-scss/scss/widgets/base/scheduler/appointment/regular/_index.scss

@@ -94,6 +94,7 @@ $reduced-icon-offset: null !default;
   background-clip: padding-box;
   position: absolute;
   cursor: default;
+  outline: none;
 
   @include user-select(none);
 

packages/devextreme/js/__internal/scheduler/__tests__/appointments_new.test.ts

@@ -27,6 +27,44 @@ describe('New Appointments', () => {
     document.body.innerHTML = '';
   });
 
+  describe('Options', () => {
+    describe('tabIndex', () => {
+      it('should have correct tabIndex on init', async () => {
+        const { POM } = await createScheduler({
+          dataSource: [
+            { text: 'Appointment 1', startDate: new Date(2015, 1, 9, 8), endDate: new Date(2015, 1, 9, 9) },
+            { text: 'Appointment 2', startDate: new Date(2015, 1, 9, 8), endDate: new Date(2015, 1, 9, 9) },
+          ],
+          currentView: 'day',
+          currentDate: new Date(2015, 1, 9, 8),
+          tabIndex: 2,
+        });
+
+        const firstAppointment = POM.getAppointments()[0];
+
+        expect(firstAppointment.element.getAttribute('tabindex')).toBe('2');
+      });
+
+      it('should have correct tabIndex on option change', async () => {
+        const { POM, scheduler } = await createScheduler({
+          dataSource: [
+            { text: 'Appointment 1', startDate: new Date(2015, 1, 9, 8), endDate: new Date(2015, 1, 9, 9) },
+            { text: 'Appointment 2', startDate: new Date(2015, 1, 9, 8), endDate: new Date(2015, 1, 9, 9) },
+          ],
+          currentView: 'day',
+          currentDate: new Date(2015, 1, 9, 8),
+          tabIndex: 1,
+        });
+
+        scheduler.option('tabIndex', 2);
+
+        const firstAppointment = POM.getAppointments()[0];
+
+        expect(firstAppointment.element.getAttribute('tabindex')).toBe('2');
+      });
+    });
+  });
+
   describe('Templates', () => {
     describe.each([
       'appointmentTemplate',

packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/appointment_collector.ts

@@ -15,6 +15,8 @@ export const getAppointmentCollectorProperties = (
   };
 
   const config: AppointmentCollectorProperties = {
+    tabIndex: 0,
+    sortedIndex: 0,
     appointmentsData,
     isCompact: false,
     geometry: {
@@ -25,6 +27,10 @@ export const getAppointmentCollectorProperties = (
     },
     targetedAppointmentData,
     appointmentCollectorTemplate: new EmptyTemplate(),
+    onFocusIn: () => {},
+    onFocusOut: () => {},
+    onKeyDown: () => {},
+    onClick: () => {},
   };
 
   return config;

packages/devextreme/js/__internal/scheduler/appointments_new/__mock__/base_appointment_view.ts

@@ -18,10 +18,16 @@ export const getBaseAppointmentViewProperties = (
 
   const config: BaseAppointmentViewProperties = {
     index: 0,
+    tabIndex: 0,
+    sortedIndex: 0,
     appointmentData,
     targetedAppointmentData: normalizedTargetedAppointmentData,
     appointmentTemplate: new EmptyTemplate(),
     onRendered: () => {},
+    onFocusIn: () => {},
+    onFocusOut: () => {},
+    onClick: () => {},
+    onKeyDown: () => {},
     getDataAccessor: (): AppointmentDataAccessor => mockAppointmentDataAccessor,
     getResourceColor: (): Promise<string | undefined> => Promise.resolve(undefined),
   };

packages/devextreme/js/__internal/scheduler/appointments_new/appointment/base_appointment.ts

@@ -3,21 +3,21 @@ import registerComponent from '@js/core/component_registrator';
 import type { DxElement } from '@js/core/element';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import type { DxEvent } from '@js/events';
 import { getPublicElement } from '@ts/core/m_element';
 import { EmptyTemplate } from '@ts/core/templates/m_empty_template';
 import { FunctionTemplate } from '@ts/core/templates/m_function_template';
 import type { TemplateBase } from '@ts/core/templates/m_template_base';
-import type { DOMComponentProperties } from '@ts/core/widget/dom_component';
-import DOMComponent from '@ts/core/widget/dom_component';
+import { click } from '@ts/events/m_short';
 import type { SafeAppointment, TargetedAppointment } from '@ts/scheduler/types';
 import type { AppointmentDataAccessor } from '@ts/scheduler/utils/data_accessor/appointment_data_accessor';
 
-import { APPOINTMENT_CLASSES, APPOINTMENT_TYPE_CLASSES } from '../const';
+import { APPOINTMENT_CLASSES, APPOINTMENT_TYPE_CLASSES, FOCUSED_STATE_CLASS } from '../const';
 import { DateFormatType, getDateTextFromTargetAppointment } from '../utils/get_date_text';
+import { EVENTS_NAMESPACE, ViewItem, type ViewItemProperties } from '../view_item';
 
 export interface BaseAppointmentViewProperties
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  extends DOMComponentProperties<BaseAppointmentView<any>> {
+  extends ViewItemProperties {
   index: number;
   appointmentData: SafeAppointment;
   targetedAppointmentData: TargetedAppointment;
@@ -35,7 +35,7 @@ export interface BaseAppointmentViewProperties
 
 export class BaseAppointmentView<
   TProperties extends BaseAppointmentViewProperties = BaseAppointmentViewProperties,
-> extends DOMComponent<BaseAppointmentView<TProperties>, TProperties> {
+> extends ViewItem<TProperties> {
   protected get targetedAppointmentData(): TargetedAppointment {
     return this.option().targetedAppointmentData;
   }
@@ -60,13 +60,17 @@ export class BaseAppointmentView<
     this.resize();
     this.applyElementClasses();
     this.applyAria();
+    this.attachFocusEvents();
+    this.attachClickEvent();
+    this.attachKeydownEvents();
     this.renderContentTemplate();
   }
 
-  public resize(
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    geometry?: { height: number; width: number | string; top: number; left: number },
-  ): void { }
+  override _dispose(): void {
+    super._dispose();
+
+    click.off(this.$element(), EVENTS_NAMESPACE);
+  }
 
   protected applyElementClasses(): void {
     this.$element()
@@ -77,7 +81,35 @@ export class BaseAppointmentView<
 
   protected applyAria(): void {
     this.$element()
-      .attr('role', 'button');
+      .attr('role', 'button')
+      .attr('tabindex', this.option().tabIndex);
+  }
+
+  private attachClickEvent(): void {
+    click.off(this.$element(), EVENTS_NAMESPACE);
+    click.on(
+      this.$element(),
+      this.onClick.bind(this),
+      EVENTS_NAMESPACE,
+    );
+  }
+
+  protected override onFocusIn(): void {
+    this.$element().addClass(FOCUSED_STATE_CLASS);
+
+    super.onFocusIn();
+  }
+
+  protected override onFocusOut(e: DxEvent): void {
+    this.$element().removeClass(FOCUSED_STATE_CLASS);
+
+    super.onFocusOut(e);
+  }
+
+  public override setTabIndex(tabIndex: number | undefined): void {
+    super.setTabIndex(tabIndex);
+
+    this.$element().attr('tabindex', tabIndex ?? null);
   }
 
   protected getTitleText(): string {

packages/devextreme/js/__internal/scheduler/appointments_new/appointment_collector.ts

@@ -7,14 +7,14 @@ import { EmptyTemplate } from '@js/core/templates/empty_template';
 import Button from '@js/ui/button';
 import { FunctionTemplate } from '@ts/core/templates/m_function_template';
 import type { TemplateBase } from '@ts/core/templates/m_template_base';
-import type { DOMComponentProperties } from '@ts/core/widget/dom_component';
-import DOMComponent from '@ts/core/widget/dom_component';
 import type { SafeAppointment, TargetedAppointment } from '@ts/scheduler/types';
 
 import { APPOINTMENT_COLLECTOR_CLASSES } from './const';
+import type { ViewItemProperties } from './view_item';
+import { ViewItem } from './view_item';
 
 export interface AppointmentCollectorProperties
-  extends DOMComponentProperties<AppointmentCollector> {
+  extends ViewItemProperties {
   appointmentsData: SafeAppointment[];
   isCompact: boolean;
   geometry: {
@@ -28,7 +28,7 @@ export interface AppointmentCollectorProperties
 }
 
 export class AppointmentCollector
-  extends DOMComponent<AppointmentCollector, AppointmentCollectorProperties> {
+  extends ViewItem<AppointmentCollectorProperties> {
   private defaultAppointmentCollectorTemplate!: FunctionTemplate;
 
   private buttonInstance?: Button;
@@ -51,10 +51,12 @@ export class AppointmentCollector
     this.resize();
     this.applyElementClasses();
     this.applyElementAria();
+    this.attachFocusEvents();
+    this.attachKeydownEvents();
     this.renderContentTemplate();
   }
 
-  public resize(
+  public override resize(
     geometry?: { height: number; width: number; top: number; left: number },
   ): void {
     const newGeometry = geometry ?? this.option().geometry;
@@ -67,6 +69,12 @@ export class AppointmentCollector
     this.buttonInstance?.option({ width, height });
   }
 
+  public override setTabIndex(tabIndex: number | undefined): void {
+    super.setTabIndex(tabIndex);
+
+    this.buttonInstance?.option('tabIndex', tabIndex);
+  }
+
   private applyElementClasses(): void {
     this.$element()
       .addClass(APPOINTMENT_COLLECTOR_CLASSES.CONTAINER)
@@ -98,6 +106,7 @@ export class AppointmentCollector
 
     this.buttonInstance = this._createComponent(this.$element(), Button, {
       type: 'default',
+      tabIndex: this.option().tabIndex,
       width: this.option().geometry.width,
       height: this.option().geometry.height,
       // eslint-disable-next-line @typescript-eslint/no-unsafe-return
@@ -109,6 +118,7 @@ export class AppointmentCollector
           items: this.option().appointmentsData,
         },
       })),
+      onClick: this.onClick.bind(this),
     });
   }
 

packages/devextreme/js/__internal/scheduler/appointments_new/appointments.focus_controller.ts

@@ -0,0 +1,129 @@
+import $ from '@js/core/renderer';
+import type { DxEvent } from '@js/events';
+import type { KeyboardKeyDownEvent } from '@ts/events/core/m_keyboard_processor';
+import { focus } from '@ts/events/m_short';
+
+import { getRawAppointmentGroupValues } from '../utils/resource_manager/appointment_groups_utils';
+import type { SortedEntity } from '../view_model/types';
+import type { Appointments } from './appointments';
+import type { ViewItem } from './view_item';
+
+export class AppointmentsFocusController {
+  private focusableSortedIndex = 0;
+
+  private needRestoreFocusIndex = -1;
+
+  private get sortedAppointments(): SortedEntity[] {
+    return this.appointments.option().getSortedAppointments();
+  }
+
+  private get isVirtualScrolling(): boolean {
+    return this.appointments.option().isVirtualScrolling();
+  }
+
+  private get tabIndex(): number | undefined {
+    return this.appointments.option().tabIndex;
+  }
+
+  constructor(private readonly appointments: Appointments) { }
+
+  public onViewItemClick(viewItem: ViewItem): void {
+    this.focusViewItem(viewItem);
+  }
+
+  public onViewItemFocusIn(): void { }
+
+  public onViewItemFocusOut(e: DxEvent): void {
+    const focusEvent = e.originalEvent as FocusEvent;
+
+    const $relatedTarget = $(focusEvent.relatedTarget as Element);
+    const { $commonContainer, $allDayContainer } = this.appointments;
+
+    const isFocusOutside = $relatedTarget.length === 0 || (
+      $relatedTarget.closest($commonContainer).length === 0
+      && $relatedTarget?.closest($allDayContainer ?? $()).length === 0
+    );
+
+    if (isFocusOutside) {
+      this.resetTabIndex(0);
+    }
+  }
+
+  public onViewItemKeyDown(viewItem: ViewItem, e: KeyboardKeyDownEvent): void {
+    if (e.key === 'Tab') {
+      this.handleTabKeyDown(e, viewItem.option().sortedIndex);
+    }
+  }
+
+  public resetTabIndex(newFocusableIndex?: number): void {
+    if (this.needRestoreFocusIndex >= 0) {
+      const viewItem = this.appointments.getViewItemBySortedIndex(
+        this.needRestoreFocusIndex,
+      );
+
+      viewItem?.setTabIndex(this.tabIndex);
+      focus.trigger(viewItem?.$element());
+
+      this.focusableSortedIndex = this.needRestoreFocusIndex;
+      this.needRestoreFocusIndex = -1;
+      return;
+    }
+
+    if (newFocusableIndex !== undefined) {
+      this.appointments.getViewItemBySortedIndex(this.focusableSortedIndex)?.setTabIndex(-1);
+      this.focusableSortedIndex = newFocusableIndex;
+    }
+
+    // TODO: in virtual scrolling no appointment may be rendered in the initial viewport
+    this.appointments
+      .getViewItemBySortedIndex(this.focusableSortedIndex)
+      ?.setTabIndex(this.tabIndex);
+  }
+
+  private handleTabKeyDown(e: KeyboardKeyDownEvent, sortedIndex: number): void {
+    const nextIndex = sortedIndex + (e.shift ? -1 : 1);
+    const nextItemData = this.sortedAppointments[nextIndex];
+
+    if (!nextItemData) {
+      return;
+    }
+
+    e.originalEvent.preventDefault();
+    this.focusByItemData(nextItemData);
+  }
+
+  private focusByItemData(itemData: SortedEntity): void {
+    if (this.isVirtualScrolling) {
+      this.scrollToItem(itemData);
+    }
+
+    const viewItem = this.appointments.getViewItemBySortedIndex(itemData.sortedIndex);
+
+    if (viewItem) {
+      this.focusViewItem(viewItem);
+    } else if (this.isVirtualScrolling) {
+      this.needRestoreFocusIndex = itemData.sortedIndex;
+    }
+  }
+
+  private focusViewItem(viewItem: ViewItem): void {
+    this.resetTabIndex(viewItem.option().sortedIndex);
+    focus.trigger(viewItem?.$element());
+  }
+
+  private scrollToItem(itemData: SortedEntity): void {
+    const { getStartViewDate, getResourceManager, scrollTo } = this.appointments.option();
+
+    const date = new Date(Math.max(
+      getStartViewDate().getTime(),
+      itemData.source.startDate,
+    ));
+
+    const group = getRawAppointmentGroupValues(
+      itemData.itemData,
+      getResourceManager().resources,
+    );
+
+    scrollTo(date, { group, allDay: itemData.allDay });
+  }
+}