feat(ui5-date-picker): add screen reader support (#2224)

Fixes: #1279

Author: Todor-ads

packages/main/src/Calendar.js

@@ -458,7 +458,7 @@ class Calendar extends UI5Element {
 
 		if (lastDayOfMonthIndex !== -1) {
 			// find the DOM for the last day index
-			const lastDay = dayPicker.shadowRoot.querySelector(".ui5-dp-items-container").children[parseInt(lastDayOfMonthIndex / weekDaysCount)].children[(lastDayOfMonthIndex % weekDaysCount)];
+			const lastDay = dayPicker.shadowRoot.querySelector(".ui5-dp-content").children[parseInt(lastDayOfMonthIndex / weekDaysCount) + 1].children[(lastDayOfMonthIndex % weekDaysCount)];
 
 			// update current item in ItemNavigation
 			dayPicker._itemNav.current = lastDayOfMonthIndex;

packages/main/src/CalendarHeader.hbs

@@ -8,6 +8,7 @@
 		class="{{_btnPrev.classes}}"
 		@click={{_handlePrevPress}}
 		data-sap-cal-head-button="Prev"
+		title="{{_prevButtonText}}"
 	>
 		<ui5-icon
 			class="ui5-calheader-arrowicon"
@@ -45,6 +46,7 @@
 		@click={{_handleNextPress}}
 		id="{{_id}}-btnNext"
 		data-sap-cal-head-button="Next"
+		title={{_nextButtonText}}
 	>
 		<ui5-icon
 			class="ui5-calheader-arrowicon"

packages/main/src/CalendarHeader.js

@@ -1,12 +1,17 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/icons/slim-arrow-left.js";
 import "@ui5/webcomponents-icons/dist/icons/slim-arrow-right.js";
 import Button from "./Button.js";
 import Icon from "./Icon.js";
 import ButtonDesign from "./types/ButtonDesign.js";
 import CalendarHeaderTemplate from "./generated/templates/CalendarHeaderTemplate.lit.js";
+import {
+	CALENDAR_HEADER_NEXT_BUTTON,
+	CALENDAR_HEADER_PREVIOUS_BUTTON,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/CalendarHeader.css.js";
@@ -81,6 +86,8 @@ class CalendarHeader extends UI5Element {
 
 		this._btn2 = {};
 		this._btn2.type = ButtonDesign.Transparent;
+
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -123,6 +130,18 @@ class CalendarHeader extends UI5Element {
 			}
 		}
 	}
+
+	static async onDefine() {
+		await fetchI18nBundle("@ui5/webcomponents");
+	}
+
+	get _prevButtonText() {
+		return this.i18nBundle.getText(CALENDAR_HEADER_PREVIOUS_BUTTON);
+	}
+
+	get _nextButtonText() {
+		return this.i18nBundle.getText(CALENDAR_HEADER_NEXT_BUTTON);
+	}
 }
 
 CalendarHeader.define();

packages/main/src/DayPicker.hbs

@@ -5,18 +5,8 @@
 	@mousedown={{_onmousedown}}
 	@mouseup={{_onmouseup}}
 >
-
-	{{#unless _hideWeekNumbers}}
-		<div class="ui5-dp-weeknumber-container">
-			{{#each _weekNumbers}}
-				<div class="ui5-dp-weekname-container">
-					<span class="ui5-dp-weekname">{{this}}</span>
-				</div>
-			{{/each}}
-		</div>
-	{{/unless}}
-
-	<div id="{{_id}}-content" class="ui5-dp-content">
+	
+	<div id="{{_id}}-content" class="ui5-dp-content" role="grid" aria-roledescription="Calendar">
 		<div role="row" class="ui5-dp-days-names-container">
 			{{#each _dayNames}}
 				<div
@@ -28,18 +18,20 @@
 				</div>
 			{{/each}}
 		</div>
-		<div id="{{_id}}-days" class="ui5-dp-items-container" tabindex="-1">
-			{{#each _weeks}}
-				{{#if this.length}}
-					<div style="display: flex;" @mouseover="{{../_onitemmouseover}}" @keydown="{{../_onitemkeydown}}">
-						{{#each this}}
+		{{#each _weeks}}
+			{{#if this.length}}
+				<div style="display: flex;" role="row"  @mouseover="{{../_onitemmouseover}}" @keydown="{{../_onitemkeydown}}">
+					{{#each this}}
+						{{#if this.timestamp}}
 							<div
 								id="{{this.id}}"
 								tabindex="{{this._tabIndex}}"
 								data-sap-timestamp="{{this.timestamp}}"
 								data-sap-index="{{this._index}}"
 								role="gridcell"
 								aria-selected="{{this.selected}}"
+								aria-label="{{this.ariaLabel}}"
+								aria-disabled="{{this.ariaDisabled}}"
 								class="{{this.classes}}">
 									<span
 										class="ui5-dp-daytext"
@@ -48,12 +40,20 @@
 											{{this.iDay}}
 									</span>
 							</div>
-						{{/each}}
-					</div>
-				{{else}}
-					<div class="sapWCEmptyWeek"></div>
-				{{/if}}
-			{{/each}}
-		</div>
+						{{else}}
+							{{#unless this.isHidden}}
+									<div class="ui5-dp-weekname-container"
+										role="rowheader"
+										aria-label="Calendar Week {{this.weekNum}}">
+											<span class="ui5-dp-weekname">{{this.weekNum}}</span>
+									</div>
+							{{/unless}}
+						{{/if}}
+					{{/each}}
+				</div>
+			{{else}}
+				<div class="sapWCEmptyWeek"></div>
+			{{/if}}
+		{{/each}}
 	</div>
 </div>

packages/main/src/DayPicker.js

@@ -13,8 +13,14 @@ import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDat
 import calculateWeekNumber from "@ui5/webcomponents-localization/dist/dates/calculateWeekNumber.js";
 import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
 import ItemNavigationBehavior from "@ui5/webcomponents-base/dist/types/ItemNavigationBehavior.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import DayPickerTemplate from "./generated/templates/DayPickerTemplate.lit.js";
 
+import {
+	DAY_PICKER_WEEK_NUMBER_TEXT,
+	DAY_PICKER_NON_WORKING_DAY,
+} from "./generated/i18n/i18n-defaults.js";
+
 // Styles
 import dayPickerCSS from "./generated/themes/DayPicker.css.js";
 
@@ -134,15 +140,6 @@ const metadata = {
 			multiple: true,
 		},
 
-		/**
-		 * @type {Object}
-		 * @private
-		 */
-		_weekNumbers: {
-			type: Object,
-			multiple: true,
-		},
-
 		/**
 		 * @type {boolean}
 		 * @private
@@ -229,6 +226,8 @@ class DayPicker extends UI5Element {
 			"PageTop",
 			this._handleMonthTopOverflow.bind(this)
 		);
+
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -243,6 +242,8 @@ class DayPicker extends UI5Element {
 		let week = [];
 		this._weekNumbers = [];
 		let weekday;
+		const _monthsNameWide = this._oLocaleData.getMonths("wide", this._calendarDate._oUDate.sCalendarType);
+
 		if (this.minDate) {
 			this._minDateObject = new Date(this._minDate);
 		}
@@ -260,6 +261,9 @@ class DayPicker extends UI5Element {
 			if (weekday < 0) {
 				weekday += 7;
 			}
+
+			const nonWorkingAriaLabel = this._isWeekend(oCalDate) ? `${this._dayPickerNonWorkingDay} ` : "";
+
 			day = {
 				timestamp: timestamp.toString(),
 				selected: this._selectedDates.some(d => {
@@ -271,16 +275,9 @@ class DayPicker extends UI5Element {
 				iDay: oCalDate.getDate(),
 				_index: i.toString(),
 				classes: `ui5-dp-item ui5-dp-wday${weekday}`,
+				ariaLabel: `${nonWorkingAriaLabel}${_monthsNameWide[oCalDate.getMonth()]} ${oCalDate.getDate()}, ${oCalDate.getYear()}`,
 			};
 
-			const weekNumber = calculateWeekNumber(getFirstDayOfWeek(), oCalDate.toUTCJSDate(), oCalDate.getYear(), this._oLocale, this._oLocaleData);
-
-			if (lastWeekNumber !== weekNumber) {
-				this._weekNumbers.push(weekNumber);
-
-				lastWeekNumber = weekNumber;
-			}
-
 			const isToday = oCalDate.isSame(CalendarDate.fromLocalJSDate(new Date(), this._primaryCalendarType));
 
 			week.push(day);
@@ -301,10 +298,12 @@ class DayPicker extends UI5Element {
 			if (isToday) {
 				day.classes += " ui5-dp-item--now";
 				todayIndex = i;
+				day.ariaLabel = `today ${day.ariaLabel}`;
 			}
 
 			if (oCalDate.getMonth() !== this._month) {
 				day.classes += " ui5-dp-item--othermonth";
+				day.ariaDisabled = "true";
 			}
 
 			day.id = `${this._id}-${timestamp}`;
@@ -317,8 +316,20 @@ class DayPicker extends UI5Element {
 				day.disabled = true;
 			}
 
+			this._hideWeekNumbers = this.shouldHideWeekNumbers;
+
 			if (day.classes.indexOf("ui5-dp-wday6") !== -1
 				|| _aVisibleDays.length - 1 === i) {
+				const weekNumber = calculateWeekNumber(getFirstDayOfWeek(), oCalDate.toUTCJSDate(), oCalDate.getYear(), this._oLocale, this._oLocaleData);
+				if (lastWeekNumber !== weekNumber) {
+					const weekNum = {
+						weekNum: weekNumber,
+						isHidden: this._hideWeekNumbers,
+					};
+					week.unshift(weekNum);
+					lastWeekNumber = weekNumber;
+				}
+
 				this._weeks.push(week);
 				week = [];
 			}
@@ -338,6 +349,10 @@ class DayPicker extends UI5Element {
 		let dayName;
 
 		this._dayNames = [];
+		this._dayNames.push({
+			classes: "ui5-dp-dayname",
+			name: this._dayPickerWeekNumberText,
+		});
 		for (let i = 0; i < 7; i++) {
 			weekday = i + this._getFirstDayOfWeek();
 			if (weekday > 6) {
@@ -353,8 +368,7 @@ class DayPicker extends UI5Element {
 			this._dayNames.push(dayName);
 		}
 
-		this._dayNames[0].classes += " ui5-dp-firstday";
-		this._hideWeekNumbers = this.shouldHideWeekNumbers;
+		this._dayNames[1].classes += " ui5-dp-firstday";
 	}
 
 	onAfterRendering() {
@@ -489,13 +503,21 @@ class DayPicker extends UI5Element {
 		const focusableDays = [];
 
 		for (let i = 0; i < this._weeks.length; i++) {
-			const week = this._weeks[i].filter(x => !x.disabled);
+			const week = this._weeks[i].slice(1).filter(x => !x.disabled);
 			focusableDays.push(week);
 		}
 
 		return [].concat(...focusableDays);
 	}
 
+	get _dayPickerWeekNumberText() {
+		return this.i18nBundle.getText(DAY_PICKER_WEEK_NUMBER_TEXT);
+	}
+
+	get _dayPickerNonWorkingDay() {
+		return this.i18nBundle.getText(DAY_PICKER_NON_WORKING_DAY);
+	}
+
 	_modifySelectionAndNotifySubscribers(sNewDate, bAdd) {
 		if (bAdd) {
 			this.selectedDates = [...this._selectedDates, sNewDate];
@@ -737,6 +759,7 @@ class DayPicker extends UI5Element {
 	static async onDefine() {
 		await Promise.all([
 			fetchCldr(getLocale().getLanguage(), getLocale().getRegion(), getLocale().getScript()),
+			fetchI18nBundle("@ui5/webcomponents"),
 		]);
 	}
 }

packages/main/src/i18n/messagebundle.properties

@@ -360,3 +360,15 @@ VALUE_STATE_INFORMATION=Informative entry
 
 #XTOL: text that is appended to the tooltips of input fields etc. which are marked to be in success state
 VALUE_STATE_SUCCESS=Entry successfully validated
+
+#XBUT: Tooltip text for 'Next' button in the Calendar Header
+CALENDAR_HEADER_NEXT_BUTTON = Next
+
+#XBUT: Tooltip text for 'Previous' button in the Calendar Header
+CALENDAR_HEADER_PREVIOUS_BUTTON = Previous
+
+#XBUT: Text for 'Week number' in the DayPicker
+DAY_PICKER_WEEK_NUMBER_TEXT = Week number
+
+#XBUT: Text for 'Non-Working Day' in the DayPicker
+DAY_PICKER_NON_WORKING_DAY = Non-Working Day

packages/main/test/pageobjects/DatePickerTestPage.js

@@ -99,8 +99,26 @@ class DatePickerTestPage {
 
 	getDisplayedDay(index) {
 		return browser
-			.$(`.${this.staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`).shadow$(`.ui5-dp-root`).$(".ui5-dp-content").$(".ui5-dp-items-container")
-			.$$(".ui5-dp-item")[index];
+			.$(`.${this.staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`).shadow$(`.ui5-dp-root`).$(".ui5-dp-content").$$(".ui5-dp-item")[index];
+	}
+
+	getDayPickerContent() {
+	return browser
+		.$(`.${this.staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`).shadow$(`.ui5-dp-root`).$$(".ui5-dp-content > div");
+	}
+
+	getDayPickerDayNames() {
+		const dayNames = Array.from(this.getDayPickerContent());
+		return dayNames[0].$$("div");
+	}
+	
+	getDayPickerDatesRow(index) {
+		const data = Array.from(this.getDayPickerContent());
+		return data[index].$$("div");
+	}
+
+	getDayPickerNumbers() {
+		return Array.from(this.getDayPickerContent());
 	}
 
 	isValid(value) {