Calendar: Add selected date range into aria-label

jdvictoria · Apr 4, 2024 · 72ae1e9 · 72ae1e9
1 parent 84e3102
commit 72ae1e9
Show file tree

Hide file tree

Showing 31 changed files with 309 additions and 22 deletions.
diff --git a/packages/devextreme/js/localization/intl/date.js b/packages/devextreme/js/localization/intl/date.js
@@ -92,6 +92,7 @@ const normalizeMonth = text => {
 
 const intlFormats = {
     'day': { day: 'numeric' },
+    'date': { year: 'numeric', month: 'long', day: 'numeric' },
     'dayofweek': { weekday: 'long' },
     'longdate': { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' },
     'longdatelongtime': { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' },

diff --git a/packages/devextreme/js/localization/messages/ar.json b/packages/devextreme/js/localization/messages/ar.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "أحمر",
         "dxColorView-ariaGreen": "أخضر",

diff --git a/packages/devextreme/js/localization/messages/ca.json b/packages/devextreme/js/localization/messages/ca.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Vermell",
         "dxColorView-ariaGreen": "Verd",

diff --git a/packages/devextreme/js/localization/messages/cs.json b/packages/devextreme/js/localization/messages/cs.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Červená",
         "dxColorView-ariaGreen": "Zelená",

diff --git a/packages/devextreme/js/localization/messages/de.json b/packages/devextreme/js/localization/messages/de.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Rot",
         "dxColorView-ariaGreen": "Grün",

diff --git a/packages/devextreme/js/localization/messages/el.json b/packages/devextreme/js/localization/messages/el.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Κόκκινο",
         "dxColorView-ariaGreen": "Πράσινο",

diff --git a/packages/devextreme/js/localization/messages/en.json b/packages/devextreme/js/localization/messages/en.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Red",
         "dxColorView-ariaGreen": "Green",

diff --git a/packages/devextreme/js/localization/messages/es.json b/packages/devextreme/js/localization/messages/es.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Rojo",
         "dxColorView-ariaGreen": "Verde",

diff --git a/packages/devextreme/js/localization/messages/fa.json b/packages/devextreme/js/localization/messages/fa.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "قرمز",
         "dxColorView-ariaGreen": "سبز",

diff --git a/packages/devextreme/js/localization/messages/fi.json b/packages/devextreme/js/localization/messages/fi.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Punainen",
         "dxColorView-ariaGreen": "Vihreä",

diff --git a/packages/devextreme/js/localization/messages/fr.json b/packages/devextreme/js/localization/messages/fr.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Rouge",
         "dxColorView-ariaGreen": "Vert",

diff --git a/packages/devextreme/js/localization/messages/hu.json b/packages/devextreme/js/localization/messages/hu.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Piros",
         "dxColorView-ariaGreen": "Zöld",

diff --git a/packages/devextreme/js/localization/messages/it.json b/packages/devextreme/js/localization/messages/it.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Rosso",
         "dxColorView-ariaGreen": "Verde",

diff --git a/packages/devextreme/js/localization/messages/ja.json b/packages/devextreme/js/localization/messages/ja.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "赤",
         "dxColorView-ariaGreen": "緑",

diff --git a/packages/devextreme/js/localization/messages/lt.json b/packages/devextreme/js/localization/messages/lt.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Raudona",
         "dxColorView-ariaGreen": "Žalia",

diff --git a/packages/devextreme/js/localization/messages/lv.json b/packages/devextreme/js/localization/messages/lv.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Sarkans",
         "dxColorView-ariaGreen": "Zaļš",

diff --git a/packages/devextreme/js/localization/messages/nb.json b/packages/devextreme/js/localization/messages/nb.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Rød",
         "dxColorView-ariaGreen": "Grønn",

diff --git a/packages/devextreme/js/localization/messages/nl.json b/packages/devextreme/js/localization/messages/nl.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Rood",
         "dxColorView-ariaGreen": "Groen",

diff --git a/packages/devextreme/js/localization/messages/pl.json b/packages/devextreme/js/localization/messages/pl.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "czerwony",
         "dxColorView-ariaGreen": "zielony",

diff --git a/packages/devextreme/js/localization/messages/pt.json b/packages/devextreme/js/localization/messages/pt.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Vermelho",
         "dxColorView-ariaGreen": "Verde",

diff --git a/packages/devextreme/js/localization/messages/ro.json b/packages/devextreme/js/localization/messages/ro.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Roșu",
         "dxColorView-ariaGreen": "Verde",

diff --git a/packages/devextreme/js/localization/messages/ru.json b/packages/devextreme/js/localization/messages/ru.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Красный",
         "dxColorView-ariaGreen": "Зеленый",

diff --git a/packages/devextreme/js/localization/messages/sl.json b/packages/devextreme/js/localization/messages/sl.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Rdeča",
         "dxColorView-ariaGreen": "Zelena",

diff --git a/packages/devextreme/js/localization/messages/sv.json b/packages/devextreme/js/localization/messages/sv.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Röd",
         "dxColorView-ariaGreen": "Grön",

diff --git a/packages/devextreme/js/localization/messages/tr.json b/packages/devextreme/js/localization/messages/tr.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Kırmızı",
         "dxColorView-ariaGreen": "Yeşil",

diff --git a/packages/devextreme/js/localization/messages/vi.json b/packages/devextreme/js/localization/messages/vi.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "Đỏ",
         "dxColorView-ariaGreen": "Xanh lá",

diff --git a/packages/devextreme/js/localization/messages/zh-tw.json b/packages/devextreme/js/localization/messages/zh-tw.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "紅色",
         "dxColorView-ariaGreen": "綠色",

diff --git a/packages/devextreme/js/localization/messages/zh.json b/packages/devextreme/js/localization/messages/zh.json
@@ -306,6 +306,8 @@
         "dxCalendar-captionYearLabel": "Year selection",
         "dxCalendar-captionDecadeLabel": "Decade selection",
         "dxCalendar-captionCenturyLabel": "Century selection",
+        "dxCalendar-selectedDate": "The selected date is {0}",
+        "dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
 
         "dxColorView-ariaRed": "红色",
         "dxColorView-ariaGreen": "绿色",

diff --git a/packages/devextreme/js/ui/calendar/ui.calendar.base_view.js b/packages/devextreme/js/ui/calendar/ui.calendar.base_view.js
@@ -48,6 +48,12 @@ const CURRENT_DATE_TEXT = {
     decade: messageLocalization.format('dxCalendar-currentYear'),
     century: messageLocalization.format('dxCalendar-currentYearRange'),
 };
+const ARIA_LABEL_DATE_FORMAT = 'date';
+const SELECTION_MODE = {
+    single: 'single',
+    multiple: 'multiple',
+    range: 'range',
+};
 
 const BaseView = Widget.inherit({
 
@@ -86,17 +92,82 @@ const BaseView = Widget.inherit({
         this._renderValue();
         this._renderRange();
         this._renderEvents();
+        this._updateTableAriaLabel();
+    },
+
+    _getLocalizedWidgetName() {
+        const localizedWidgetName = messageLocalization.format('dxCalendar-ariaWidgetName');
+
+        return localizedWidgetName;
+    },
+
+    _getSingleModeAriaLabel() {
+        const { value } = this.option();
+
+        const localizedWidgetName = this._getLocalizedWidgetName();
+
+        const formattedDate = dateLocalization.format(value, ARIA_LABEL_DATE_FORMAT);
+        const selectedDatesText = messageLocalization.format('dxCalendar-selectedDate', formattedDate);
+
+        const ariaLabel = `${localizedWidgetName}. ${selectedDatesText}`;
+
+        return ariaLabel;
+    },
+
+    _getRangeModeAriaLabel() {
+        const { value } = this.option();
+
+        const localizedWidgetName = this._getLocalizedWidgetName();
+
+        const [startDate, endDate] = value;
+
+        const formattedStartDate = dateLocalization.format(startDate, ARIA_LABEL_DATE_FORMAT);
+        const formattedEndDate = dateLocalization.format(endDate, ARIA_LABEL_DATE_FORMAT);
+
+        const selectedDatesText = startDate && endDate
+            ? messageLocalization.format('dxCalendar-selectedDateRange', formattedStartDate, formattedEndDate)
+            : messageLocalization.format('dxCalendar-selectedDate', formattedStartDate ?? formattedEndDate);
+
+        const ariaLabel = `${localizedWidgetName}. ${selectedDatesText}`;
+
+        return ariaLabel;
+    },
+
+    _getMultipleModeAriaLabel() {
+        const ariaLabel = this._getLocalizedWidgetName();
+
+        return ariaLabel;
+    },
+
+    _getTableAriaLabel() {
+        const { value, selectionMode } = this.option();
+
+        const isValueEmpty = !value || Array.isArray(value) && !value.filter(Boolean).length;
+
+        if(isValueEmpty) {
+            return this._getLocalizedWidgetName();
+        }
+
+        switch(selectionMode) {
+            case SELECTION_MODE.single:
+                return this._getSingleModeAriaLabel();
+            case SELECTION_MODE.range:
+                return this._getRangeModeAriaLabel();
+            case SELECTION_MODE.multiple:
+                return this._getMultipleModeAriaLabel();
+        }
+    },
+
+    _updateTableAriaLabel() {
+        const label = this._getTableAriaLabel();
+
+        this.setAria({ label }, this._$table);
     },
 
     _createTable: function() {
         this._$table = $('<table>');
 
-        const localizedWidgetName = messageLocalization.format('dxCalendar-ariaWidgetName');
-
-        this.setAria({
-            label: localizedWidgetName,
-            role: 'grid'
-        }, this._$table);
+        this.setAria({ role: 'grid' }, this._$table);
 
         return this._$table;
     },
@@ -186,7 +257,7 @@ const BaseView = Widget.inherit({
             className += ` ${CALENDAR_OTHER_VIEW_CLASS}`;
         }
 
-        if(this.option('selectionMode') === 'range') {
+        if(this.option('selectionMode') === SELECTION_MODE.range) {
             if(cellIndex === 0) {
                 className += ` ${CALENDAR_CELL_START_IN_ROW_CLASS}`;
             }
@@ -238,7 +309,7 @@ const BaseView = Widget.inherit({
         const { selectionMode } = this.option();
 
         eventsEngine.off(this._$table, CALENDAR_DXHOVERSTART_EVENT_NAME);
-        if(selectionMode === 'range') {
+        if(selectionMode === SELECTION_MODE.range) {
             this._createCellHoverAction();
 
             eventsEngine.on(this._$table, CALENDAR_DXHOVERSTART_EVENT_NAME, NOT_WEEK_CELL_SELECTOR, ((e) => {
@@ -251,7 +322,7 @@ const BaseView = Widget.inherit({
             }));
         }
 
-        if(selectionMode !== 'single') {
+        if(selectionMode !== SELECTION_MODE.single) {
             this._createWeekNumberCellClickAction();
 
             eventsEngine.on(this._$table, CALENDAR_DXCLICK_EVENT_NAME, `.${CALENDAR_WEEK_NUMBER_CELL_CLASS}`, ((e) => {
@@ -415,7 +486,7 @@ const BaseView = Widget.inherit({
     },
 
     _isRangeMode: function() {
-        return this.option('selectionMode') === 'range';
+        return this.option('selectionMode') === SELECTION_MODE.range;
     },
 
     _getCurrentDateFormat() {
@@ -455,6 +526,7 @@ const BaseView = Widget.inherit({
         switch(name) {
             case 'value':
                 this._renderValue();
+                this._updateTableAriaLabel();
                 break;
             case 'range':
                 this._renderRange();