Skip to content

Commit

Permalink
Calendar: Improve aria-label in Multiple mode
Browse files Browse the repository at this point in the history
  • Loading branch information
marker-dao authored Sep 30, 2024
1 parent b4d9a51 commit 13f8d0e
Show file tree
Hide file tree
Showing 31 changed files with 275 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -138,11 +138,49 @@ const BaseView = (Widget as any).inherit({
},

_getMultipleModeAriaLabel() {
const ariaLabel = this._getLocalizedWidgetName();
const localizedWidgetName = this._getLocalizedWidgetName();
const selectedRangesText = this._getMultipleRangesText();

const ariaLabel = `${localizedWidgetName}. ${selectedRangesText}`;

return ariaLabel;
},

_getMultipleRangesText() {
const { value } = this.option();
const ranges = coreDateUtils.getRangesByDates(value.map((date) => new Date(date)));

if (ranges.length > 2) {
// @ts-expect-error
const dateRangeCountText = messageLocalization.format('dxCalendar-selectedDateRangeCount', ranges.length);

return dateRangeCountText;
}

const selectedDatesText = messageLocalization.format('dxCalendar-selectedDates');
const rangesText = ranges
.map((range) => this._getRangeText(range))
.join(', ');

const result = `${selectedDatesText}: ${rangesText}`;

return result;
},

_getRangeText(range) {
const [startDate, endDate] = range;

const formattedStartDate = dateLocalization.format(startDate, ARIA_LABEL_DATE_FORMAT);
const formattedEndDate = dateLocalization.format(endDate, ARIA_LABEL_DATE_FORMAT);

const selectedDatesText = startDate && endDate
// @ts-expect-error
? messageLocalization.format('dxCalendar-selectedMultipleDateRange', formattedStartDate, formattedEndDate)
: formattedStartDate;

return selectedDatesText;
},

_getTableAriaLabel() {
const { value, selectionMode } = this.option();

Expand Down
34 changes: 34 additions & 0 deletions packages/devextreme/js/core/utils/date.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { adjust } from './math';
import { each } from './iterator';
import { camelize } from './inflector';
import { toMilliseconds } from '../../renovation/ui/common/utils/date/index';
import dateSerialization from './date_serialization';

const DAYS_IN_WEEK = 7;
const THURSDAY_WEEK_NUMBER = 4;
Expand Down Expand Up @@ -689,6 +690,37 @@ const getMachineTimezoneName = () => {
: null;
};

const getRangesByDates = (dates) => {
const datesInMilliseconds = dates.map((value) => correctDateWithUnitBeginning(value, 'day').getTime());
const sortedDates = datesInMilliseconds.sort((a, b) => a - b);

const msInDay = toMilliseconds('day');
const ranges = [];

let startDate = sortedDates[0];

for(let i = 1; i <= sortedDates.length; ++i) {
const nextDate = sortedDates[i];
const currentDate = sortedDates[i - 1];

const isNewRange = nextDate - currentDate > msInDay;

if(isNewRange || i === sortedDates.length) {
const range = startDate === sortedDates[i - 1]
? [startDate]
: [startDate, sortedDates[i - 1]];

const serializedRange = range.map((value) => dateSerialization.deserializeDate(value));

ranges.push(serializedRange);

startDate = nextDate;
}
}

return ranges;
};

const dateUtils = {
dateUnitIntervals: dateUnitIntervals,

Expand Down Expand Up @@ -752,6 +784,8 @@ const dateUtils = {
createDateWithFullYear: createDateWithFullYear,

getMachineTimezoneName: getMachineTimezoneName,

getRangesByDates: getRangesByDates,
};

dateUtils.sameView = function(view, date1, date2) {
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/ar.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/ca.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/cs.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/el.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/fa.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/fi.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/hu.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/it.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/ja.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/lt.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/lv.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/nb.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/nl.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/pl.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/pt.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/ro.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/ru.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/sl.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/sv.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/tr.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/vi.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
3 changes: 3 additions & 0 deletions packages/devextreme/js/localization/messages/zh-tw.json
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,10 @@
"dxCalendar-captionDecadeLabel": "Decade selection",
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDates": "The selected dates",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-selectedMultipleDateRange": "from {0} to {1}",
"dxCalendar-selectedDateRangeCount": "There are {0} selected date ranges",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxChat-emptyListMessage": "There are no messages in this chat",
Expand Down
Loading

0 comments on commit 13f8d0e

Please sign in to comment.