Scheduler - A11y - Add Home and End hotkeys, change scheduler's role, extend appointment's aria-describedby (#32575)

Author: Tucchhaa

e2e/testcafe-devextreme/tests/accessibility/scheduler/appointment.ts

@@ -16,15 +16,15 @@ const currentDate = Date.UTC(2021, 1, 1);
 const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.text}</div>`;
 
 ['month', 'week', 'day', 'agenda'].forEach((currentView) => {
-  test(`appointment should have correct aria-label without description (${currentView})`, async (t) => {
+  test(`appointment should have correct aria-label and have description (${currentView})`, async (t) => {
     const scheduler = new Scheduler('#container');
     const appointment = scheduler.getAppointment('App 1');
 
     await t
       .expect(appointment.getAriaLabel())
       .eql('App 1: February 1, 2021, 12:00 PM - 1:00 PM')
       .expect(await appointment.hasAriaDescription())
-      .notOk();
+      .ok();
 
     await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {
@@ -36,15 +36,15 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
     });
   });
 
-  test(`appointment with template should have correct aria-label without description (${currentView})`, async (t) => {
+  test(`appointment with template should have correct aria-label and have description (${currentView})`, async (t) => {
     const scheduler = new Scheduler('#container');
     const appointment = scheduler.getAppointment('App 1');
 
     await t
       .expect(appointment.getAriaLabel())
       .eql('App 1: February 1, 2021, 12:00 PM - 1:00 PM')
       .expect(await appointment.hasAriaDescription())
-      .notOk();
+      .ok();
 
     await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {
@@ -65,7 +65,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(appointment.getAriaLabel())
       .eql('App 1: February 1, 2021, 12:00 PM - 1:00 PM')
       .expect(await appointment.getAriaDescription())
-      .eql('Group: resource1; Group 1: resource1');
+      .contains('Group: resource1; Group 1: resource1');
 
     await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {
@@ -99,7 +99,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(appointment.getAriaLabel())
       .eql('App 1: February 1, 2021, 12:00 PM - 1:00 PM')
       .expect(await appointment.getAriaDescription())
-      .eql('Group: resource1; Group 1: resource1');
+      .contains('Group: resource1; Group 1: resource1');
 
     await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {
@@ -134,7 +134,7 @@ const appointmentTemplate = ({ appointmentData }) => `<div>${appointmentData.tex
       .expect(appointment.getAriaLabel())
       .eql('App 1: February 1, 2021, 12:00 PM - 1:00 PM')
       .expect(await appointment.getAriaDescription())
-      .eql('Group: resource11, resource21; Group 1: resource11; Group 2: resource21, resource22');
+      .contains('Group: resource11, resource21; Group 1: resource11; Group 2: resource21, resource22');
 
     await a11yCheck(t, a11yCheckConfig, '#container');
   }).before(async () => {

e2e/testcafe-devextreme/tests/accessibility/scheduler/scheduler.ts

@@ -13,7 +13,7 @@ test('Scheduler should have right aria attributes after view changed', async (t)
   await t.expect(scheduler.element.getAttribute('aria-label')).contains('Scheduler. Month view');
   await t.expect(scheduler.getGeneralStatusContainer().textContent).contains('Scheduler. Month view');
 
-  await t.expect(scheduler.element.getAttribute('role')).eql('group');
+  await t.expect(scheduler.element.getAttribute('role')).eql('application');
 
   await scheduler.option('currentView', 'week');
 

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

@@ -0,0 +1,98 @@
+import Scheduler from 'devextreme-testcafe-models/scheduler';
+import { ClientFunction } from 'testcafe';
+import url from '../../../../helpers/getPageUrl';
+import { createWidget } from '../../../../helpers/createWidget';
+import { getDocumentScrollTop } from '../../../../helpers/domUtils';
+
+fixture.disablePageReloads`KeyboardNavigation.Appointments`
+  .page(url(__dirname, '../../../container.html'));
+
+const SCHEDULER_SELECTOR = '#container';
+
+test('Document should not scroll on \'End\' press when appointment is focused', async (t) => {
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+
+  await t.click(scheduler.getAppointment('Appointment 1').element);
+
+  const expectedScrollTop = await getDocumentScrollTop();
+
+  await t
+    .pressKey('End')
+    .expect(getDocumentScrollTop()).eql(expectedScrollTop);
+}).before(async () => {
+  await ClientFunction(() => {
+    document.body.style.height = '2000px';
+  })();
+
+  await createWidget('dxScheduler', {
+    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, 10),
+        endDate: new Date(2015, 1, 9, 11),
+      },
+      {
+        text: 'Appointment 3',
+        startDate: new Date(2015, 1, 9, 12),
+        endDate: new Date(2015, 1, 9, 13),
+      },
+    ],
+    height: 300,
+    currentView: 'day',
+    currentDate: new Date(2015, 1, 9),
+  });
+}).after(async () => {
+  await ClientFunction(() => {
+    document.body.style.height = '';
+  })();
+});
+
+test('Document should not scroll on \'Home\' press when appointment is focused', async (t) => {
+  const scheduler = new Scheduler(SCHEDULER_SELECTOR);
+
+  await t
+    .scroll(0, 100)
+    .click(scheduler.getAppointment('Appointment 1').element);
+
+  const expectedScrollTop = await getDocumentScrollTop();
+
+  await t
+    .pressKey('Home')
+    .expect(getDocumentScrollTop()).eql(expectedScrollTop);
+}).before(async () => {
+  await ClientFunction(() => {
+    document.body.style.height = '2000px';
+  })();
+
+  await createWidget('dxScheduler', {
+    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, 10),
+        endDate: new Date(2015, 1, 9, 11),
+      },
+      {
+        text: 'Appointment 3',
+        startDate: new Date(2015, 1, 9, 12),
+        endDate: new Date(2015, 1, 9, 13),
+      },
+    ],
+    height: 300,
+    currentView: 'day',
+    currentDate: new Date(2015, 1, 9),
+  });
+}).after(async () => {
+  await ClientFunction(() => {
+    document.body.style.height = '';
+  })();
+});

packages/devextreme/js/__internal/scheduler/__tests__/__mock__/model/appointment.ts

@@ -8,9 +8,11 @@ export interface AppointmentModel<T = HTMLDivElement> {
   getText: () => string;
   getDisplayDate: () => string;
   getAriaLabel: () => string;
+  getAriaDescription: () => string;
   getGeometry: () => Position;
   getColor: (view: string) => string | undefined;
   getSnapshot: () => object;
+  isFocused: () => boolean;
 }
 
 const getColor = (appointment: HTMLDivElement): string => appointment.style.backgroundColor;
@@ -45,6 +47,11 @@ export const createAppointmentModel = <T extends HTMLDivElement | null>(
   getText: () => getText(element),
   getDisplayDate: () => getDisplayDate(element),
   getAriaLabel: () => element?.getAttribute('aria-label') ?? '',
+  getAriaDescription: (): string => {
+    const id = element?.getAttribute('aria-describedby') ?? '';
+    const descriptionElement = id ? document.getElementById(id) : null;
+    return descriptionElement?.textContent ?? '';
+  },
   getGeometry: () => getGeometry(element),
   getColor(view: string): string | undefined {
     if (!element) {
@@ -60,4 +67,5 @@ export const createAppointmentModel = <T extends HTMLDivElement | null>(
     date: getDisplayDate(element),
     ...getGeometry(element),
   }),
+  isFocused: () => element?.classList.contains('dx-state-focused') ?? false,
 });