Skip to content

Commit 9f40233

Browse files
Todor-adsTodor-ads
authored
fix(ui5-calendar): ACC improvements (#3789)
1 parent ccca671 commit 9f40233

File tree

6 files changed

+85
-51
lines changed

6 files changed

+85
-51
lines changed

‎packages/main/src/Calendar.hbs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
id="{{_id}}-head"
5555
.primaryCalendarType="{{_primaryCalendarType}}"
5656
.secondaryCalendarType="{{secondaryCalendarType}}"
57+
.buttonTextForSecondaryCalendarType="{{secondaryCalendarTypeButtonText}}"
5758
timestamp="{{_timestamp}}"
5859
.isPrevButtonDisabled="{{_previousButtonDisabled}}"
5960
.isNextButtonDisabled="{{_nextButtonDisabled}}"

‎packages/main/src/Calendar.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import {
44
isF4,
55
isF4Shift,
66
} from "@ui5/webcomponents-base/dist/Keys.js";
7+
import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
8+
import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
9+
import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
710
import * as CalendarDateComponent from "./CalendarDate.js";
811
import CalendarPart from "./CalendarPart.js";
912
import CalendarHeader from "./CalendarHeader.js";
@@ -307,6 +310,65 @@ class Calendar extends CalendarPart {
307310
this._currentPickerDOM._showNextPage();
308311
}
309312

313+
get secondaryCalendarTypeButtonText() {
314+
if (!this.secondaryCalendarType) {
315+
return;
316+
}
317+
318+
const localDate = new Date(this._timestamp * 1000);
319+
const secondYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
320+
const secondMonthInfo = this._getDisplayedSecondaryMonthText();
321+
const secondYearText = secondYearFormat.format(localDate, true);
322+
return {
323+
yearButtonText: secondYearText,
324+
monthButtonText: secondMonthInfo.text,
325+
monthButtonInfo: secondMonthInfo.info,
326+
};
327+
}
328+
329+
_getDisplayedSecondaryMonthText() {
330+
const month = this._getDisplayedSecondaryMonths();
331+
const localeData = getCachedLocaleDataInstance(getLocale());
332+
const pattern = localeData.getIntervalPattern();
333+
const secondaryMonthsNames = getCachedLocaleDataInstance(getLocale()).getMonthsStandAlone("abbreviated", this.secondaryCalendarType);
334+
const secondaryMonthsNamesWide = getCachedLocaleDataInstance(getLocale()).getMonthsStandAlone("wide", this.secondaryCalendarType);
335+
336+
if (month.startMonth === month.endMonth) {
337+
return {
338+
text: localeData.getMonths("abbreviated", this.secondaryCalendarType)[month.startMonth],
339+
textInfo: localeData.getMonths("wide", this.secondaryCalendarType)[month.startMonth],
340+
};
341+
}
342+
343+
return {
344+
text: pattern.replace(/\{0\}/, secondaryMonthsNames[month.startMonth]).replace(/\{1\}/, secondaryMonthsNames[month.endMonth]),
345+
textInfo: pattern.replace(/\{0\}/, secondaryMonthsNamesWide[month.startMonth]).replace(/\{1\}/, secondaryMonthsNamesWide[month.endMonth]),
346+
};
347+
}
348+
349+
_getDisplayedSecondaryMonths() {
350+
const localDate = new Date(this._timestamp * 1000);
351+
let firstDate = CalendarDate.fromLocalJSDate(localDate, this._primaryCalendarType);
352+
firstDate.setDate(1);
353+
firstDate = new CalendarDate(firstDate, this.secondaryCalendarType);
354+
const startMonth = firstDate.getMonth();
355+
356+
let lastDate = CalendarDate.fromLocalJSDate(localDate, this._primaryCalendarType);
357+
lastDate.setDate(this._getDaysInMonth(lastDate));
358+
lastDate = new CalendarDate(lastDate, this.secondaryCalendarType);
359+
const endMonth = lastDate.getMonth();
360+
361+
return { startMonth, endMonth };
362+
}
363+
364+
_getDaysInMonth(date) {
365+
const tempCalendarDate = new CalendarDate(date);
366+
tempCalendarDate.setDate(1);
367+
tempCalendarDate.setMonth(tempCalendarDate.getMonth() + 1);
368+
tempCalendarDate.setDate(0);
369+
return tempCalendarDate.getDate();
370+
}
371+
310372
/**
311373
* The month button is only hidden when the month picker is shown
312374
* @returns {boolean}

‎packages/main/src/CalendarHeader.js

Lines changed: 13 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,15 @@ const metadata = {
5353
type: CalendarType,
5454
},
5555

56+
/**
57+
* Stores information for month button for secondary calendar type
58+
* @type {Object}
59+
* @private
60+
*/
61+
buttonTextForSecondaryCalendarType: {
62+
type: Object,
63+
},
64+
5665
isNextButtonDisabled: {
5766
type: Boolean,
5867
},
@@ -118,12 +127,8 @@ class CalendarHeader extends UI5Element {
118127
this._nextButtonText = this.i18nBundle.getText(CALENDAR_HEADER_NEXT_BUTTON);
119128

120129
if (this.hasSecondaryCalendarType) {
121-
const secondYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
122-
const secoundaryMonths = this._getDisplayedSecondaryMonths(localDate);
123-
124-
this._secondaryMonthInfo = this._getDisplayedSecondaryMonthText(secoundaryMonths);
125-
this._secondMonthButtonText = this._secondaryMonthInfo.text;
126-
this._secondYearButtonText = secondYearFormat.format(localDate, true);
130+
this._secondMonthButtonText = this.buttonTextForSecondaryCalendarType.monthButtonText;
131+
this._secondYearButtonText = this.buttonTextForSecondaryCalendarType.yearButtonText;
127132
}
128133
}
129134

@@ -177,47 +182,6 @@ class CalendarHeader extends UI5Element {
177182
}
178183
}
179184

180-
_getDisplayedSecondaryMonthText(month) {
181-
const localeData = getCachedLocaleDataInstance(getLocale());
182-
const pattern = localeData.getIntervalPattern();
183-
const secondaryMonthsNames = getCachedLocaleDataInstance(getLocale()).getMonthsStandAlone("abbreviated", this.secondaryCalendarType);
184-
const secondaryMonthsNamesWide = getCachedLocaleDataInstance(getLocale()).getMonthsStandAlone("wide", this.secondaryCalendarType);
185-
186-
if (month.startMonth === month.endMonth) {
187-
return {
188-
text: localeData.getMonths("abbreviated", this.secondaryCalendarType)[month.startMonth],
189-
textInfo: localeData.getMonths("wide", this.secondaryCalendarType)[month.startMonth],
190-
};
191-
}
192-
193-
return {
194-
text: pattern.replace(/\{0\}/, secondaryMonthsNames[month.startMonth]).replace(/\{1\}/, secondaryMonthsNames[month.endMonth]),
195-
textInfo: pattern.replace(/\{0\}/, secondaryMonthsNamesWide[month.startMonth]).replace(/\{1\}/, secondaryMonthsNamesWide[month.endMonth]),
196-
};
197-
}
198-
199-
_getDisplayedSecondaryMonths(localDate) {
200-
let firstDate = CalendarDate.fromLocalJSDate(localDate, this.primaryCalendarType);
201-
firstDate.setDate(1);
202-
firstDate = new CalendarDate(firstDate, this.secondaryCalendarType);
203-
204-
const startMonth = firstDate.getMonth();
205-
let lastDate = CalendarDate.fromLocalJSDate(localDate, this.primaryCalendarType);
206-
207-
lastDate.setDate(this._daysInMonth(lastDate));
208-
lastDate = new CalendarDate(lastDate, this.secondaryCalendarType);
209-
const endMonth = lastDate.getMonth();
210-
return { startMonth, endMonth };
211-
}
212-
213-
_daysInMonth(calendarDate) {
214-
calendarDate = new CalendarDate(calendarDate);
215-
calendarDate.setDate(1);
216-
calendarDate.setMonth(calendarDate.getMonth() + 1);
217-
calendarDate.setDate(0);
218-
return calendarDate.getDate();
219-
}
220-
221185
get hasSecondaryCalendarType() {
222186
return !!this.secondaryCalendarType;
223187
}
@@ -237,7 +201,8 @@ class CalendarHeader extends UI5Element {
237201

238202
get accInfo() {
239203
return {
240-
ariaLabelMonthButton: this.hasSecondaryCalendarType ? `${this._monthButtonText},${this._secondaryMonthInfo.textInfo}` : `${this._monthButtonText}`,
204+
ariaLabelMonthButton: this.hasSecondaryCalendarType
205+
? `${this._monthButtonText}, ${this.buttonTextForSecondaryCalendarType.info}` : `${this._monthButtonText}`,
241206
};
242207
}
243208
}

‎packages/main/src/DayPicker.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
@focusout={{_onfocusout}}
1010
>
1111

12-
<div id="{{_id}}-content" class="ui5-dp-content" role="grid" aria-roledescription="Calendar">
12+
<div id="{{_id}}-content" class="ui5-dp-content" role="grid" aria-roledescription="{{ariaRoledescription}}">
1313
<div role="row" class="ui5-dp-days-names-container">
1414
{{#each _dayNames}}
1515
<div

‎packages/main/src/DayPicker.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ class DayPicker extends CalendarPart {
218218
const nonWorkingAriaLabel = isWeekend ? `${nonWorkingDayLabel} ` : "";
219219
const todayAriaLabel = isToday ? `${todayLabel} ` : "";
220220
const ariaLabel = this.hasSecondaryCalendarType
221-
? `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()} ${secondaryMonthsNames[tempSecondDate.getMonth()]} ${tempSecondDate.getDate()}, ${tempSecondDate.getYear()}`
221+
? `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}; ${secondaryMonthsNames[tempSecondDate.getMonth()]} ${tempSecondDate.getDate()}, ${tempSecondDate.getYear()}`
222222
: `${todayAriaLabel}${nonWorkingAriaLabel}${monthsNames[tempDate.getMonth()]} ${tempDate.getDate()}, ${tempDate.getYear()}`;
223223

224224
const day = {
@@ -736,6 +736,12 @@ class DayPicker extends CalendarPart {
736736
},
737737
};
738738
}
739+
740+
get ariaRoledescription() {
741+
return this.hasSecondaryCalendarType
742+
? `${this._primaryCalendarType} calendar with secondary ${this.secondaryCalendarType} calendar`
743+
: `${this._primaryCalendarType} calendar`;
744+
}
739745
}
740746

741747
DayPicker.define();

‎packages/main/test/specs/DatePicker.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -767,7 +767,7 @@ describe("Date Picker Tests", () => {
767767
const monthpickerContent = datepicker.dayPicker.shadow$(".ui5-dp-content");
768768

769769
assert.strictEqual(monthpickerContent.getAttribute("role"), "grid", "Calendar root have correct role attribute");
770-
assert.strictEqual(monthpickerContent.getAttribute("aria-roledescription"), "Calendar", "Calendar root have correct roledescription")
770+
assert.strictEqual(monthpickerContent.getAttribute("aria-roledescription"), "Gregorian calendar", "Calendar root have correct roledescription")
771771

772772
});
773773

0 commit comments

Comments
 (0)