Scheduler a11y: appointments does not have info about reccurence (#28165

)
DevExpress · Oct 14, 2024 · 462ad9e · 462ad9e
1 parent 98c9ff4
commit 462ad9e
Show file tree

Hide file tree

Showing 31 changed files with 67 additions and 9 deletions.
diff --git a/e2e/testcafe-devextreme/tests/scheduler/a11y/appointment.ts b/e2e/testcafe-devextreme/tests/scheduler/a11y/appointment.ts
@@ -32,7 +32,7 @@ fixture.disablePageReloads`a11y - appointment`
     const attrs = await scheduler.getAppointment('App 1').element.attributes;
 
     await t
-      .expect(attrs['aria-label'])
+      .expect(attrs['aria-roledescription'])
       .eql('February 1, 2021, Group: resource1, ');
   }).before(async () => {
     await createWidget('dxScheduler', {
@@ -63,7 +63,7 @@ fixture.disablePageReloads`a11y - appointment`
     const attrs = await scheduler.getAppointment('App 1').element.attributes;
 
     await t
-      .expect(attrs['aria-label'])
+      .expect(attrs['aria-roledescription'])
       .eql('February 1, 2021, Group: resource11, resource21, ');
   }).before(async () => {
     await createWidget('dxScheduler', {
@@ -128,7 +128,7 @@ fixture.disablePageReloads`a11y - appointment`
       async (i) => {
         const appt = scheduler.getAppointment('App 1', i);
         const attrs = await appt.element.attributes;
-        return attrs['aria-label'];
+        return attrs['aria-roledescription'];
       },
     ));
 
@@ -231,3 +231,28 @@ test('appointments & collector buttons can be navigated', async (t) => {
     currentDate: new Date(2021, 1, 1),
   });
 });
+
+test('Scheduler a11y: appointments does not have 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-26T16:30:00.000Z'),
+        endDate: new Date('2021-04-26T18:30:00.000Z'),
+        recurrenceRule: 'FREQ=WEEKLY;BYDAY=MO,TH;COUNT=10',
+      },
+    ],
+    views: ['day', 'week', 'workWeek', 'month'],
+    currentView: 'day',
+    currentDate: new Date(2021, 3, 29),
+    startDayHour: 9,
+  });
+});
diff --git a/packages/devextreme/js/__internal/scheduler/appointments/m_appointment.ts b/packages/devextreme/js/__internal/scheduler/appointments/m_appointment.ts
@@ -150,10 +150,9 @@ export class Appointment extends DOMComponent {
     this._renderDragSourceClass();
     this._renderDirection();
 
-    (this.$element() as any).data('dxAppointmentStartDate', this.option('startDate'));
-
     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._renderRecurrenceClass();
@@ -208,14 +207,13 @@ export class Appointment extends DOMComponent {
   _renderAriaLabel() {
     // @ts-expect-error
     const $element: dxElementWrapper = this.$element();
-
     const ariaLabel = [
       this._getDateText(),
       this._getGroupText(),
     ]
       .filter((label) => !!label)
       .join(', ');
-    $element.attr('aria-label', `${ariaLabel}, `);
+    $element.attr('aria-roledescription', `${ariaLabel}, `);
   }
 
   _renderAppointmentGeometry() {

diff --git a/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_layout.ts b/packages/devextreme/js/__internal/scheduler/appointments/m_appointment_layout.ts
@@ -5,6 +5,7 @@ import messageLocalization from '@js/localization/message';
 import { APPOINTMENT_CONTENT_CLASSES } from '../m_classes';
 
 const allDayText = ` ${messageLocalization.format('dxScheduler-allDay')}: `;
+const recurringText = messageLocalization.format('dxScheduler-appointmentAriaLabel-recurring');
 
 export const createAppointmentLayout = (formatText, config) => {
   const result = $((domAdapter as any).createDocumentFragment());
@@ -23,7 +24,8 @@ export const createAppointmentLayout = (formatText, config) => {
   $('<div>').addClass(APPOINTMENT_CONTENT_CLASSES.APPOINTMENT_DATE).text(formatText.formatDate).appendTo($contentDetails);
 
   config.isRecurrence
-        && $('<span>').addClass(`${APPOINTMENT_CONTENT_CLASSES.RECURRING_ICON} dx-icon-repeat`).appendTo(result);
+        && $('<span>').addClass(`${APPOINTMENT_CONTENT_CLASSES.RECURRING_ICON} dx-icon-repeat`).attr('aria-label', recurringText)
+          .appendTo(result);
 
   config.isAllDay
         && $('<div>')
@@ -51,7 +53,8 @@ export const createAgendaAppointmentLayout = (formatText, config) => {
     .appendTo(leftLayoutContainer);
 
   config.isRecurrence
-        && $('<span>').addClass(`${APPOINTMENT_CONTENT_CLASSES.RECURRING_ICON} dx-icon-repeat`).appendTo(marker);
+        && $('<span>').addClass(`${APPOINTMENT_CONTENT_CLASSES.RECURRING_ICON} dx-icon-repeat`).attr('aria-label', recurringText)
+          .appendTo(marker);
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const text = $('<div>')

diff --git a/packages/devextreme/js/localization/messages/ar.json b/packages/devextreme/js/localization/messages/ar.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "إفلات حقول التصفية هنا",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "الموضوع",
         "dxScheduler-editorLabelStartDate": "تاريخ البدء",

diff --git a/packages/devextreme/js/localization/messages/ca.json b/packages/devextreme/js/localization/messages/ca.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Els camps de filtre de baixada aquí",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Assignatura",
         "dxScheduler-editorLabelStartDate": "Data d'inici",

diff --git a/packages/devextreme/js/localization/messages/cs.json b/packages/devextreme/js/localization/messages/cs.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Zde vložte filtr pole",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Předmět",
         "dxScheduler-editorLabelStartDate": "Počáteční datum",

diff --git a/packages/devextreme/js/localization/messages/de.json b/packages/devextreme/js/localization/messages/de.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Filterfelder hierher ziehen",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Betreff",
         "dxScheduler-editorLabelStartDate": "Anfangszeit",

diff --git a/packages/devextreme/js/localization/messages/el.json b/packages/devextreme/js/localization/messages/el.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Τοποθετήστε τα πεδία φίλτρων εδώ",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Θέμα",
         "dxScheduler-editorLabelStartDate": "Ημερομηνία έναρξης",

diff --git a/packages/devextreme/js/localization/messages/en.json b/packages/devextreme/js/localization/messages/en.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Drop Filter Fields Here",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Subject",
         "dxScheduler-editorLabelStartDate": "Start Date",

diff --git a/packages/devextreme/js/localization/messages/es.json b/packages/devextreme/js/localization/messages/es.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Arrastra campos de filtro aquí",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Asunto",
         "dxScheduler-editorLabelStartDate": "Fecha inicial",

diff --git a/packages/devextreme/js/localization/messages/fa.json b/packages/devextreme/js/localization/messages/fa.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "فیلدهای مربوط به فیلتر را به اینجا انتقال دهید (درگ نمایید)",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "موضوع",
         "dxScheduler-editorLabelStartDate": "تاریخ شروع",

diff --git a/packages/devextreme/js/localization/messages/fi.json b/packages/devextreme/js/localization/messages/fi.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Pudota suodatinkentät tähän",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Aihe",
         "dxScheduler-editorLabelStartDate": "Alkamispäivä",

diff --git a/packages/devextreme/js/localization/messages/fr.json b/packages/devextreme/js/localization/messages/fr.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Déposer les champs de filtre ici",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Titre",
         "dxScheduler-editorLabelStartDate": "Date de début",

diff --git a/packages/devextreme/js/localization/messages/hu.json b/packages/devextreme/js/localization/messages/hu.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Húzza a szűrőmezőket ide",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Tárgy",
         "dxScheduler-editorLabelStartDate": "Kezdés dátuma",

diff --git a/packages/devextreme/js/localization/messages/it.json b/packages/devextreme/js/localization/messages/it.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Trascina qui i campi filtro",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Oggetto",
         "dxScheduler-editorLabelStartDate": "Data inizio",

diff --git a/packages/devextreme/js/localization/messages/ja.json b/packages/devextreme/js/localization/messages/ja.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "フィルター フィールドをこちらへドラッグ＆ドロップ",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "件名",
         "dxScheduler-editorLabelStartDate": "開始時刻",

diff --git a/packages/devextreme/js/localization/messages/lt.json b/packages/devextreme/js/localization/messages/lt.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Numeskite filtrų laukus čia",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Tema",
         "dxScheduler-editorLabelStartDate": "Pradžios data",

diff --git a/packages/devextreme/js/localization/messages/lv.json b/packages/devextreme/js/localization/messages/lv.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Nomest Filtra Laukus Šeit",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Nosaukums",
         "dxScheduler-editorLabelStartDate": "Sākuma Datums",

diff --git a/packages/devextreme/js/localization/messages/nb.json b/packages/devextreme/js/localization/messages/nb.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Slipp filterfelter her",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Emne",
         "dxScheduler-editorLabelStartDate": "Startdato",

diff --git a/packages/devextreme/js/localization/messages/nl.json b/packages/devextreme/js/localization/messages/nl.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Sleep Filtervelden Hier",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Onderwerp",
         "dxScheduler-editorLabelStartDate": "Startdatum",

diff --git a/packages/devextreme/js/localization/messages/pl.json b/packages/devextreme/js/localization/messages/pl.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Przeciągnij pola filtra tutaj",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Dotyczy",
         "dxScheduler-editorLabelStartDate": "Czas rozpoczęcia",

diff --git a/packages/devextreme/js/localization/messages/pt.json b/packages/devextreme/js/localization/messages/pt.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Arraste os campos de filtro até aqui",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Assunto",
         "dxScheduler-editorLabelStartDate": "Data de Início",

diff --git a/packages/devextreme/js/localization/messages/ro.json b/packages/devextreme/js/localization/messages/ro.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Plasați câmpurile de filtrare aici",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Subiect",
         "dxScheduler-editorLabelStartDate": "Data de început",

diff --git a/packages/devextreme/js/localization/messages/ru.json b/packages/devextreme/js/localization/messages/ru.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Перетащите поля фильтров cюда",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Название",
         "dxScheduler-editorLabelStartDate": "Дата начала",

diff --git a/packages/devextreme/js/localization/messages/sl.json b/packages/devextreme/js/localization/messages/sl.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Povleci filtre tukaj",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Predmet",
         "dxScheduler-editorLabelStartDate": "Datum začetka",

diff --git a/packages/devextreme/js/localization/messages/sv.json b/packages/devextreme/js/localization/messages/sv.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Släpp filterfält här",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Ämne",
         "dxScheduler-editorLabelStartDate": "Startdatum",

diff --git a/packages/devextreme/js/localization/messages/tr.json b/packages/devextreme/js/localization/messages/tr.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Filtre Alanlarını Buraya Bırak",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Konu",
         "dxScheduler-editorLabelStartDate": "Başlangıç Tarihi",

diff --git a/packages/devextreme/js/localization/messages/vi.json b/packages/devextreme/js/localization/messages/vi.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "Thả bộ lọc các trường vào đây",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "Chủ đề",
         "dxScheduler-editorLabelStartDate": "Ngày bắt đầu",

diff --git a/packages/devextreme/js/localization/messages/zh-tw.json b/packages/devextreme/js/localization/messages/zh-tw.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "拖動篩選欄位到此處",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "標題",
         "dxScheduler-editorLabelStartDate": "開始日期",

diff --git a/packages/devextreme/js/localization/messages/zh.json b/packages/devextreme/js/localization/messages/zh.json
@@ -237,6 +237,7 @@
         "dxPivotGrid-filterFieldArea": "拖动筛选字段到此处",
 
         "dxScheduler-appointmentAriaLabel-group": "Group: {0}",
+        "dxScheduler-appointmentAriaLabel-recurring": "Recurring appointment",
 
         "dxScheduler-editorLabelTitle": "标题",
         "dxScheduler-editorLabelStartDate": "开始日期",

diff --git a/packages/testcafe-models/scheduler/appointment/index.ts b/packages/testcafe-models/scheduler/appointment/index.ts
@@ -4,6 +4,7 @@ const CLASS = {
   appointment: 'dx-scheduler-appointment',
   appointmentContentDate: 'dx-scheduler-appointment-content-date',
   dateTableCell: 'dx-scheduler-date-table-cell',
+  appoinmentRecurrenceIcon: 'dx-scheduler-appointment-recurrence-icon',
   resizableHandleBottom: 'dx-resizable-handle-bottom',
   resizableHandleLeft: 'dx-resizable-handle-left',
   resizableHandleRight: 'dx-resizable-handle-right',
@@ -109,4 +110,8 @@ export default class Appointment {
       .parent(0).find(`.${CLASS.resources.value}`)
       .innerText;
   }
+
+  getRecurrenceElement(): Selector {
+    return this.element.find(`.${CLASS.appoinmentRecurrenceIcon}`);
+  }
 }