Scheduler: fix aria-label for radio buttons in recurrence editor (NtPNOSbH) (DevExpress#29947)

Co-authored-by: Vladimir Bushmanov <[email protected]>

Author: Ambrozy

e2e/testcafe-devextreme/tests/scheduler/common/a11y/editing.ts

@@ -0,0 +1,94 @@
+import Scheduler from 'devextreme-testcafe-models/scheduler';
+import { createWidget } from '../../../../helpers/createWidget';
+import url from '../../../../helpers/getPageUrl';
+import { a11yCheck } from '../../../../helpers/accessibility/utils';
+
+fixture.disablePageReloads`a11y - popup`
+  .page(url(__dirname, '../../../container.html'));
+
+const checkOptions = {
+  rules: {
+    'color-contrast': { enabled: false },
+  },
+};
+
+test('Scheduler edit appointment is accessible', async (t) => {
+  const scheduler = new Scheduler('#container');
+
+  await t.doubleClick(scheduler.getAppointmentByIndex(0).element());
+  await t.expect(scheduler.appointmentPopup.isVisible()).ok();
+
+  await a11yCheck(t, checkOptions, '#container');
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    timeZone: 'America/Los_Angeles',
+    dataSource: [{
+      text: 'Install New Router in Dev Room',
+      startDate: new Date('2021-03-29T21:30:00.000Z'),
+      endDate: new Date('2021-03-29T22:30:00.000Z'),
+      recurrenceRule: 'FREQ=DAILY',
+    }],
+    recurrenceEditMode: 'series',
+    currentView: 'week',
+    currentDate: new Date(2021, 2, 28),
+  });
+});
+
+test('Scheduler recurrence editor repeat end accessible', async (t) => {
+  const scheduler = new Scheduler('#container');
+  const getItem = (index: number) => scheduler
+    .appointmentPopup
+    .getEndRepeatRadioButton(index);
+  const getAriaLabel = (index: number) => getItem(index)
+    .getAttribute('aria-label');
+
+  await t.doubleClick(scheduler.getAppointmentByIndex(0).element());
+  await t.expect(scheduler.appointmentPopup.isVisible()).ok();
+
+  await t
+    .expect(getAriaLabel(1))
+    .eql('On 22 May 2025')
+    .expect(getAriaLabel(2))
+    .eql('After');
+  await t
+    .click(getItem(0))
+    .expect(getAriaLabel(1))
+    .eql('On')
+    .expect(getAriaLabel(2))
+    .eql('After');
+  await t
+    .click(getItem(2))
+    .expect(getAriaLabel(1))
+    .eql('On')
+    .expect(getAriaLabel(2))
+    .eql('After 1 occurrence(s)');
+  await t
+    .click(getItem(1))
+    .typeText(scheduler.appointmentPopup.repeatUntilElement, '2026')
+    .click(getItem(1)) // unfocus input
+    .expect(getAriaLabel(1))
+    .eql('On 22 May 2026')
+    .expect(getAriaLabel(2))
+    .eql('After');
+  await t
+    .click(getItem(2))
+    .typeText(scheduler.appointmentPopup.repeatCountElement, '3')
+    .click(getItem(2)) // unfocus input
+    .expect(getAriaLabel(1))
+    .eql('On')
+    .expect(getAriaLabel(2))
+    .eql('After 13 occurrence(s)');
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    timeZone: 'America/Los_Angeles',
+    dataSource: [{
+      text: 'Install New Router in Dev Room',
+      startDate: new Date('2021-03-29T21:30:00.000Z'),
+      endDate: new Date('2021-03-29T22:30:00.000Z'),
+      recurrenceRule: 'FREQ=DAILY;UNTIL=20250522T215959Z',
+    }],
+    recurrenceEditMode: 'series',
+    currentView: 'week',
+    currentDate: new Date('2021-03-29T21:30:00.000Z'),
+  });
+});

e2e/testcafe-devextreme/tests/scheduler/common/a11y/popup.ts

@@ -191,6 +191,7 @@ class RecurrenceEditor extends Editor {
 
     this._prepareEditors();
     this._renderEditors(this._$container);
+    this._updateRepeatInputAriaLabel();
   }
 
   getEditorByField(fieldName) {
@@ -540,6 +541,7 @@ class RecurrenceEditor extends Editor {
     }
 
     this._changeEditorValue();
+    this._updateRepeatInputAriaLabel();
   }
 
   _changeRepeatEndInputsVisibility(value = this._recurrenceRule.getRepeatEndRule()) {
@@ -580,22 +582,31 @@ class RecurrenceEditor extends Editor {
     };
   }
 
+  _updateRepeatInputAriaLabel(): void {
+    const radioButtons = this.getEditorByField('repeatEnd').itemElements();
+    const untilLabel = messageLocalization.format('dxScheduler-recurrenceOn');
+    const untilValue = this._recurrenceForm.getEditor('until').option('value');
+    const untilValueFormat = `${dateLocalization.format(untilValue, 'd')} ${dateLocalization.format(untilValue, 'monthAndYear')}`;
+    const isUntilVisible = this._recurrenceForm.itemOption('until').visible;
+
+    const countLabel = messageLocalization.format('dxScheduler-recurrenceAfter');
+    const countPostfix = messageLocalization.format('dxScheduler-recurrenceRepeatCount');
+    const countValue = this._recurrenceForm.getEditor('count').option('value');
+    const isCountVisible = this._recurrenceForm.itemOption('count').visible;
+
+    radioButtons[1].setAttribute('aria-label', isUntilVisible ? `${untilLabel} ${untilValueFormat}` : untilLabel);
+    radioButtons[2].setAttribute('aria-label', isCountVisible ? `${countLabel} ${countValue} ${countPostfix}` : countLabel);
+  }
+
   _repeatCountValueChangeHandler(args) {
     if (this._recurrenceRule.getRepeatEndRule() === 'count') {
       const { value } = args;
       this._recurrenceRule.makeRule('count', value);
       this._changeEditorValue();
+      this._updateRepeatInputAriaLabel();
     }
   }
 
-  _formatUntilDate(date) {
-    if (this._recurrenceRule.getRules().until && dateUtils.sameDate(this._recurrenceRule.getRules().until, date)) {
-      return date;
-    }
-
-    return dateUtils.setToDayEnd(date);
-  }
-
   _getRepeatUntilEditorOptions() {
     const until = this._getUntilValue();
 
@@ -620,6 +631,15 @@ class RecurrenceEditor extends Editor {
     };
   }
 
+  _formatUntilDate(date: Date): Date {
+    const untilDate = this._recurrenceRule.getRules().until;
+    const isSameDate = dateUtils.sameDate(untilDate, date);
+
+    return untilDate && isSameDate
+      ? date
+      : dateUtils.setToDayEnd(date);
+  }
+
   _repeatUntilValueChangeHandler(args) {
     if (this._recurrenceRule.getRepeatEndRule() === 'until') {
       const dateInTimeZone = this._formatUntilDate(new Date(args.value));
@@ -634,6 +654,7 @@ class RecurrenceEditor extends Editor {
 
       this._recurrenceRule.makeRule('until', dateInLocaleTimeZone);
       this._changeEditorValue();
+      this._updateRepeatInputAriaLabel();
     }
   }
 

packages/devextreme/js/__internal/scheduler/m_recurrence_editor.ts

@@ -34,6 +34,8 @@ export const SELECTORS = {
   endDateTimeZoneInput: `.${CLASS.endDateTimeZoneEditor} .${CLASS.textEditorInput}`,
   allDaySwitch: `.${CLASS.allDaySwitch} .${CLASS.switch}`,
   recurrenceSwitch: `.${CLASS.recurrenceSwitch} .${CLASS.switch}`,
+  repeatUntilInput: '.dx-recurrence-datebox-until-date input[type="text"]',
+  repeatCountInput: '.dx-recurrence-numberbox-repeat-count input[type="text"]',
 };
 
 export default class AppointmentPopup {
@@ -75,6 +77,10 @@ export default class AppointmentPopup {
 
   fullScreen = this.wrapper.find(`.${CLASS.overlayWrapper} .${CLASS.fullScreen}`).exists;
 
+  repeatUntilElement = this.wrapper.find(SELECTORS.repeatUntilInput);
+
+  repeatCountElement = this.wrapper.find(SELECTORS.repeatCountInput);
+
   constructor(private readonly scheduler: Selector) {
   }