Scheduler - A11y: announce the disabled time range in the aria-label of the Cell Templates demo

apps/demos/Demos/Scheduler/CellTemplates/Angular/app/app.component.ts

@@ -47,7 +47,12 @@ export class AppComponent {
 
   currentView = this.views[0];
 
-  ariaDescription = () => {
+  formatHour = (hours: number) => new Date(2021, 0, 1, hours).toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+
+  disabledDatesDescription = () => {
     const disabledDates = this.holidays
       .filter((date) => !this.isWeekend(date))
       .map((date) => new Date(date).toLocaleDateString('en-US', {
@@ -66,6 +71,16 @@ export class AppComponent {
     return '';
   };
 
+  disabledTimeDescription = () => {
+    const from = this.formatHour(this.dinnerTime.from);
+    const to = this.formatHour(this.dinnerTime.to);
+    return `The time range from ${from} to ${to} is disabled on all days`;
+  };
+
+  ariaDescription = () => [this.disabledDatesDescription(), this.disabledTimeDescription()]
+    .filter(Boolean)
+    .join('. ');
+
   constructor(public dataService: DataService) {
     this.dinnerTime = this.dataService.getDinnerTime();
     this.holidays = this.dataService.getHolidays();

apps/demos/Demos/Scheduler/CellTemplates/React/App.tsx

@@ -4,7 +4,7 @@ import Scheduler from 'devextreme-react/scheduler';
 import type { SchedulerTypes } from 'devextreme-react/scheduler';
 import type { FormRef } from 'devextreme-react/form';
 import notify from 'devextreme/ui/notify';
-import { data, holidays } from './data.ts';
+import { data, dinnerTime, holidays } from './data.ts';
 import Utils from './utils.ts';
 import DataCell from './DataCell.tsx';
 import DataCellMonth from './DataCellMonth.tsx';
@@ -13,7 +13,12 @@ import TimeCell from './TimeCell.tsx';
 
 const currentDate = new Date(2021, 3, 27);
 const views: SchedulerTypes.ViewType[] = ['workWeek', 'month'];
-const ariaDescription = () => {
+const formatHour = (hours: number) => new Date(2021, 0, 1, hours).toLocaleTimeString('en-US', {
+  hour: 'numeric',
+  minute: '2-digit',
+});
+
+const disabledDatesDescription = () => {
   const disabledDates = holidays
     .filter((date) => !Utils.isWeekend(date))
     .map((date) => new Date(date).toLocaleDateString('en-US', {
@@ -32,6 +37,16 @@ const ariaDescription = () => {
   return '';
 };
 
+const disabledTimeDescription = () => {
+  const from = formatHour(dinnerTime.from);
+  const to = formatHour(dinnerTime.to);
+  return `The time range from ${from} to ${to} is disabled on all days`;
+};
+
+const ariaDescription = () => [disabledDatesDescription(), disabledTimeDescription()]
+  .filter(Boolean)
+  .join('. ');
+
 const notifyDisableDate = () => {
   notify('Cannot create or move an appointment/event to disabled time/date regions.', 'warning', 1000);
 };

apps/demos/Demos/Scheduler/CellTemplates/ReactJs/App.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import Scheduler from 'devextreme-react/scheduler';
 import notify from 'devextreme/ui/notify';
-import { data, holidays } from './data.js';
+import { data, dinnerTime, holidays } from './data.js';
 import Utils from './utils.js';
 import DataCell from './DataCell.js';
 import DataCellMonth from './DataCellMonth.js';
@@ -10,7 +10,12 @@ import TimeCell from './TimeCell.js';
 
 const currentDate = new Date(2021, 3, 27);
 const views = ['workWeek', 'month'];
-const ariaDescription = () => {
+const formatHour = (hours) =>
+  new Date(2021, 0, 1, hours).toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+const disabledDatesDescription = () => {
   const disabledDates = holidays
     .filter((date) => !Utils.isWeekend(date))
     .map((date) =>
@@ -29,6 +34,13 @@ const ariaDescription = () => {
   }
   return '';
 };
+const disabledTimeDescription = () => {
+  const from = formatHour(dinnerTime.from);
+  const to = formatHour(dinnerTime.to);
+  return `The time range from ${from} to ${to} is disabled on all days`;
+};
+const ariaDescription = () =>
+  [disabledDatesDescription(), disabledTimeDescription()].filter(Boolean).join('. ');
 const notifyDisableDate = () => {
   notify(
     'Cannot create or move an appointment/event to disabled time/date regions.',

apps/demos/Demos/Scheduler/CellTemplates/Vue/App.vue

@@ -47,7 +47,7 @@ import { computed, ref } from 'vue';
 import { DxForm } from 'devextreme-vue';
 import { DxScheduler, type DxSchedulerTypes } from 'devextreme-vue/scheduler';
 import notify from 'devextreme/ui/notify';
-import { data, holidays } from './data.ts';
+import { data, dinnerTime, holidays } from './data.ts';
 import Utils from './utils.ts';
 import DataCell from './DataCell.vue';
 import DataCellMonth from './DataCellMonth.vue';
@@ -61,7 +61,12 @@ const dataSource = data;
 
 const isMonthView = computed(() => currentView.value === 'month');
 
-const ariaDescription = computed(() => {
+const formatHour = (hours: number) => new Date(2021, 0, 1, hours).toLocaleTimeString('en-US', {
+  hour: 'numeric',
+  minute: '2-digit',
+});
+
+const disabledDatesDescription = () => {
   const disabledDates = holidays
     .filter((date) => !Utils.isWeekend(date))
     .map((date) => new Date(date).toLocaleDateString('en-US', {
@@ -78,7 +83,17 @@ const ariaDescription = computed(() => {
     return `${disabledDates.join(', ')} are disabled dates`;
   }
   return '';
-});
+};
+
+const disabledTimeDescription = () => {
+  const from = formatHour(dinnerTime.from);
+  const to = formatHour(dinnerTime.to);
+  return `The time range from ${from} to ${to} is disabled on all days`;
+};
+
+const ariaDescription = computed(() => [disabledDatesDescription(), disabledTimeDescription()]
+  .filter(Boolean)
+  .join('. '));
 
 function onContentReady(e: DxSchedulerTypes.ContentReadyEvent) {
   setComponentAria(e.component?.$element());

apps/demos/Demos/Scheduler/CellTemplates/jQuery/index.js

@@ -92,7 +92,12 @@ const holidays = [
   new Date(2021, 5, 6),
 ];
 
-const ariaDescription = () => {
+const formatHour = (hours) => new Date(2021, 0, 1, hours).toLocaleTimeString('en-US', {
+  hour: 'numeric',
+  minute: '2-digit',
+});
+
+const disabledDatesDescription = () => {
   const disabledDates = holidays
     .filter((date) => !isWeekend(date))
     .map((date) => new Date(date).toLocaleDateString('en-US', {
@@ -111,6 +116,16 @@ const ariaDescription = () => {
   return '';
 };
 
+const disabledTimeDescription = () => {
+  const from = formatHour(dinnerTime.from);
+  const to = formatHour(dinnerTime.to);
+  return `The time range from ${from} to ${to} is disabled on all days`;
+};
+
+const ariaDescription = () => [disabledDatesDescription(), disabledTimeDescription()]
+  .filter(Boolean)
+  .join('. ');
+
 function notifyDisableDate() {
   DevExpress.ui.notify('Cannot create or move an appointment/event to disabled time/date regions.', 'warning', 1000);
 }