Scheduler a11y: fix appointment aria attrs (#28201)

Author: pomahtri

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

@@ -95,6 +95,57 @@ fixture.disablePageReloads`a11y - appointment`
       ],
     });
   });
+
+  test('appointments should have accessible info about reccurence', async (t) => {
+    const scheduler = new Scheduler('#container');
+    const recurrenceIcon = scheduler.getAppointment('Website Re-Design Plan').getRecurrenceElement();
+
+    await t
+      .expect(recurrenceIcon.getAttribute('aria-label'))
+      .eql('Recurring appointment');
+  }).before(async () => {
+    await createWidget('dxScheduler', {
+      timeZone: 'America/Los_Angeles',
+      dataSource: [
+        {
+          text: 'Website Re-Design Plan',
+          startDate: new Date('2021-04-29T16:30:00.000Z'),
+          endDate: new Date('2021-04-29T18:30:00.000Z'),
+          recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10',
+        },
+      ],
+      currentView,
+      currentDate: new Date(2021, 3, 29),
+      startDayHour: 9,
+    });
+  });
+
+  test('appointments should have right role', async (t) => {
+    const scheduler = new Scheduler('#container');
+    const appt = scheduler.getAppointment('Website Re-Design Plan');
+
+    await t
+      .expect(appt.element.getAttribute('role'))
+      .eql('application');
+
+    await t
+      .expect(appt.element.getAttribute('aria-activedescendant'))
+      .eql(null);
+  }).before(async () => {
+    await createWidget('dxScheduler', {
+      timeZone: 'America/Los_Angeles',
+      dataSource: [
+        {
+          text: 'Website Re-Design Plan',
+          startDate: new Date('2021-04-29T16:30:00.000Z'),
+          endDate: new Date('2021-04-29T18:30:00.000Z'),
+        },
+      ],
+      currentView,
+      currentDate: new Date(2021, 3, 29),
+      startDayHour: 9,
+    });
+  });
 });
 
 [

e2e/testcafe-devextreme/tests/scheduler/dragAndDrop/T1080232.ts

@@ -19,7 +19,7 @@ test('it should correctly drag external item to the appointment after drag appoi
     .expect((await appt01.element.boundingClientRect).top)
     .eql(208)
     .dragToElement(dragItem, appt02.element, { speed: 0.5 })
-    .expect(appt02.element.innerText)
+    .expect(appt02.element.find('.dx-item-content').getAttribute('data-status'))
     .eql('Added');
 }).before(async () => {
   await appendElementTo('#container', 'div', 'list');
@@ -72,7 +72,7 @@ test('it should correctly drag external item to the appointment after drag appoi
           group: 'resourceGroup',
           data: [newData],
           onAdd: () => {
-            element.text('Added');
+            element.attr('data-status', 'Added');
           },
         });
     },

packages/devextreme/js/__internal/scheduler/appointments/m_appointment.ts

@@ -150,10 +150,8 @@ export class Appointment extends DOMComponent {
     this._renderDragSourceClass();
     this._renderDirection();
 
-    const text = ExpressionUtils.getField(this.option('dataAccessors'), 'text', this.rawAppointment);
-    (this.$element() as any).attr('title', text);
     (this.$element() as any).data('dxAppointmentStartDate', this.option('startDate'));
-    (this.$element() as any).attr('role', 'button');
+    (this.$element() as any).attr('role', 'application');
 
     this._renderRecurrenceClass();
     this._renderResizable();

packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts

@@ -328,6 +328,10 @@ class SchedulerAppointments extends CollectionWidget {
     }
   }
 
+  _refreshActiveDescendant() {
+    // override to do nothing
+  }
+
   _attachAppointmentsEvents() {
     (this as any)._attachClickEvent();
     (this as any)._attachHoldEvent();

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/appointments.tests.js

@@ -549,7 +549,7 @@ QUnit.module('Appointments', moduleOptions, () => {
         assert.strictEqual(deltaTime, -1800000, 'Delta time is OK');
     });
 
-    QUnit.test('Scheduler appointment should have aria-role \'button\'', function(assert) {
+    QUnit.test('Scheduler appointment should have aria-role \'application\'', function(assert) {
         const item = {
             itemData: {
                 text: 'Appointment 1',
@@ -565,7 +565,7 @@ QUnit.module('Appointments', moduleOptions, () => {
 
         const $appointment = instance.$element().find('.dx-scheduler-appointment');
 
-        assert.equal($appointment.attr('role'), 'button', 'role is right');
+        assert.equal($appointment.attr('role'), 'application', 'role is right');
     });
 
     QUnit.test('Split appointment by day', function(assert) {

packages/testcafe-models/scheduler/appointment/index.ts

@@ -57,7 +57,7 @@ export default class Appointment {
 
   constructor(scheduler: Selector, index = 0, title?: string) {
     const element = scheduler.find(`.${CLASS.appointment}`);
-    this.element = (title ? element.withAttribute('title', title) : element).nth(index);
+    this.element = (title ? element.withText(title) : element).nth(index);
 
     const appointmentContentDate = this.element.find(`.${CLASS.appointmentContentDate}`);