Scheduler a11y: Disabled time ranges are not supported (#28202)

DevExpress · Oct 23, 2024 · 19bd42e · 19bd42e
1 parent 57520af
commit 19bd42e
Show file tree

Hide file tree

Showing 6 changed files with 134 additions and 0 deletions.
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.html
@@ -11,6 +11,7 @@
   dataCellTemplate="dataCellTemplate"
   dateCellTemplate="dateCellTemplate"
   timeCellTemplate="timeCellTemplate"
+  (onContentReady)="onContentReady($event)"
   (onAppointmentFormOpening)="onAppointmentFormOpening($event)"
   (onAppointmentAdding)="onAppointmentAdding($event)"
   (onAppointmentUpdating)="onAppointmentUpdating($event)"

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts b/apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts
@@ -44,12 +44,34 @@ export class AppComponent {
 
   currentView = this.views[0];
 
+  ariaDescription = () => {
+    const disabledDates = this.holidays
+      .filter(date => !this.isWeekend(date))
+      .map(date => new Date(date).toLocaleDateString('en-US', {
+          weekday: 'long',
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        })
+      );
+    if (disabledDates?.length === 1) {
+      return `${disabledDates} is a disabled date`;
+    }
+    if (disabledDates?.length > 1) {
+      return `${disabledDates.join(', ')} are disabled dates`;
+    }
+  };
+
   constructor(public dataService: DataService) {
     this.dataSource = new DataSource({
       store: dataService.getData(),
     });
   }
 
+  onContentReady = (e: DxSchedulerTypes.ContentReadyEvent) => {
+    this.setComponentAria(e.component?.$element());
+  };
+
   onOptionChanged = (e: DxSchedulerTypes.OptionChangedEvent) => {
     if (e.name === 'currentView') {
       this.currentView = e.value;
@@ -148,6 +170,11 @@ export class AppComponent {
     const endDateEditor = form.getEditor('endDate');
     endDateEditor.option('disabledDates', holidays);
   };
+
+  setComponentAria(element): void {
+    const prevAria = element?.attr('aria-label') || '';
+    element?.attr('aria-label', `${prevAria} ${this.ariaDescription()}`);
+  }
 }
 
 @NgModule({

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx b/apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx
@@ -13,11 +13,32 @@ import TimeCell from './TimeCell.tsx';
 
 const currentDate = new Date(2021, 3, 27);
 const views: SchedulerTypes.ViewType[] = ['workWeek', 'month'];
+const ariaDescription = () => {
+  const disabledDates = holidays
+    .filter((date) => !Utils.isWeekend(date))
+    .map((date) => new Date(date).toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })
+    );
+  if (disabledDates?.length === 1) {
+    return `${disabledDates} is a disabled date`;
+  }
+  if (disabledDates?.length > 1) {
+    return `${disabledDates.join(', ')} are disabled dates`;
+  }
+};
 
 const notifyDisableDate = () => {
   notify('Cannot create or move an appointment/event to disabled time/date regions.', 'warning', 1000);
 };
 
+const onContentReady = (e: SchedulerTypes.ContentReadyEvent) => {
+  setComponentAria(e.component?.$element());
+}
+
 const applyDisableDatesToDateEditors = (form: ReturnType<FormRef['instance']>) => {
   const startDateEditor = form.getEditor('startDate');
   startDateEditor?.option('disabledDates', holidays);
@@ -53,6 +74,11 @@ const onAppointmentUpdating = (e: SchedulerTypes.AppointmentUpdatingEvent) => {
   }
 };
 
+const setComponentAria = (element) => {
+  const prevAria = element?.attr('aria-label') || '';
+  element?.attr('aria-label', `${prevAria} ${ariaDescription()}`);
+}
+
 const App = () => {
   const [currentView, setCurrentView] = useState<SchedulerTypes.ViewType>(views[0]);
 
@@ -81,6 +107,7 @@ const App = () => {
       dataCellComponent={DataCellComponent}
       dateCellRender={renderDateCell}
       timeCellComponent={TimeCell}
+      onContentReady={onContentReady}
       onAppointmentFormOpening={onAppointmentFormOpening}
       onAppointmentAdding={onAppointmentAdding}
       onAppointmentUpdating={onAppointmentUpdating}

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js b/apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js
@@ -11,13 +11,33 @@ import TimeCell from './TimeCell.js';
 
 const currentDate = new Date(2021, 3, 27);
 const views = ['workWeek', 'month'];
+const ariaDescription = () => {
+  const disabledDates = holidays
+    .filter((date) => !Utils.isWeekend(date))
+    .map((date) =>
+      new Date(date).toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      }));
+  if (disabledDates?.length === 1) {
+    return `${disabledDates} is a disabled date`;
+  }
+  if (disabledDates?.length > 1) {
+    return `${disabledDates.join(', ')} are disabled dates`;
+  }
+};
 const notifyDisableDate = () => {
   notify(
     'Cannot create or move an appointment/event to disabled time/date regions.',
     'warning',
     1000,
   );
 };
+const onContentReady = (e) => {
+  setComponentAria(e.component?.$element());
+};
 const applyDisableDatesToDateEditors = (form) => {
   const startDateEditor = form.getEditor('startDate');
   startDateEditor?.option('disabledDates', holidays);
@@ -48,6 +68,10 @@ const onAppointmentUpdating = (e) => {
     notifyDisableDate();
   }
 };
+const setComponentAria = (element) => {
+  const prevAria = element?.attr('aria-label') || '';
+  element?.attr('aria-label', `${prevAria} ${ariaDescription()}`);
+};
 const App = () => {
   const [currentView, setCurrentView] = useState(views[0]);
   const DataCellComponent = useMemo(
@@ -79,6 +103,7 @@ const App = () => {
       dataCellComponent={DataCellComponent}
       dateCellRender={renderDateCell}
       timeCellComponent={TimeCell}
+      onContentReady={onContentReady}
       onAppointmentFormOpening={onAppointmentFormOpening}
       onAppointmentAdding={onAppointmentAdding}
       onAppointmentUpdating={onAppointmentUpdating}

diff --git a/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue b/apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue
@@ -12,6 +12,7 @@
     data-cell-template="dataCellTemplate"
     date-cell-template="dateCellTemplate"
     time-cell-template="timeCellTemplate"
+    :on-content-ready="onContentReady"
     :on-appointment-form-opening="onAppointmentFormOpening"
     :on-appointment-adding="onAppointmentAdding"
     :on-appointment-updating="onAppointmentUpdating"
@@ -59,6 +60,28 @@ const dataSource = data;
 
 const isMonthView = computed(() => currentView.value === 'month');
 
+const ariaDescription = computed(() => {
+  const disabledDates = holidays
+    .filter((date) => !Utils.isWeekend(date))
+    .map((date) => new Date(date).toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })
+    );
+  if (disabledDates?.length === 1) {
+    return `${disabledDates} is a disabled date`;
+  }
+  if (disabledDates?.length > 1) {
+    return `${disabledDates.join(', ')} are disabled dates`;
+  }
+});
+
+function onContentReady(e: DxSchedulerTypes.ContentReadyEvent) {
+  setComponentAria(e.component?.$element());
+}
+
 function onAppointmentFormOpening(e: DxSchedulerTypes.AppointmentFormOpeningEvent) {
   const startDate = new Date(e.appointmentData.startDate);
   if (!Utils.isValidAppointmentDate(startDate)) {
@@ -91,4 +114,9 @@ function applyDisableDatesToDateEditors(form) {
   const endDateEditor = form.getEditor('endDate');
   endDateEditor.option('disabledDates', holidays);
 }
+
+function setComponentAria(element) {
+  const prevAria = element?.attr('aria-label') || '';
+  element?.attr('aria-label', `${prevAria} ${ariaDescription.value}`);
+}
 </script>
diff --git a/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js b/apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js
@@ -57,6 +57,10 @@ $(() => {
       return itemElement.append(element);
     },
 
+    onContentReady(e) {
+      setComponentAria(e.component.$element());
+    },
+
     onAppointmentFormOpening(e) {
       const startDate = new Date(e.appointmentData.startDate);
       if (!isValidAppointmentDate(startDate)) {
@@ -87,6 +91,23 @@ const holidays = [
   new Date(2021, 3, 29),
   new Date(2021, 5, 6),
 ];
+const ariaDescription = () => {
+  const disabledDates = holidays
+    .filter(date => !isWeekend(date))
+    .map(date => new Date(date).toLocaleDateString('en-US', {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      })
+    );
+  if (disabledDates?.length === 1) {
+    return `${disabledDates} is a disabled date`;
+  }
+  if (disabledDates?.length > 1) {
+    return `${disabledDates.join(', ')} are disabled dates`;
+  }
+};
 
 function notifyDisableDate() {
   DevExpress.ui.notify('Cannot create or move an appointment/event to disabled time/date regions.', 'warning', 1000);
@@ -156,3 +177,8 @@ function applyDisableDatesToDateEditors(form) {
   const endDateEditor = form.getEditor('endDate');
   endDateEditor.option('disabledDates', holidays);
 }
+
+function setComponentAria(element) {
+  const prevAria = element?.attr('aria-label') || '';
+  element?.attr('aria-label', `${prevAria} ${ariaDescription()}`);
+}