fix(ui5-time-picker): accessibility improved (#3162)

The ui5-time-picker and ui5-duration picker inner input
elements and wheel sliders now have aria properties set
according to the screen reader specification.

Fixes #3010

Author: unazko

packages/main/src/DurationPicker.js

@@ -2,6 +2,10 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import "@ui5/webcomponents-icons/dist/fob-watch.js";
 import TimePickerBase from "./TimePickerBase.js";
 
+import {
+	DURATION_INPUT_DESCRIPTION,
+} from "./generated/i18n/i18n-defaults.js";
+
 /**
  * @public
  */
@@ -286,6 +290,21 @@ class DurationPicker extends TimePickerBase {
 	get maxSeconds() {
 		return parseInt(this.maxValue.split(":")[2]);
 	}
+
+	get dateAriaDescription() {
+		return this.i18nBundle.getText(DURATION_INPUT_DESCRIPTION);
+	}
+
+	get accInfo() {
+		return {
+			"ariaRoledescription": this.dateAriaDescription,
+			"ariaHasPopup": "dialog",
+			"ariaAutoComplete": "none",
+			"role": "combobox",
+			"ariaControls": `${this._id}-responsive-popover`,
+			"ariaExpanded": this.isOpen(),
+		};
+	}
 }
 
 DurationPicker.define();

packages/main/src/TimePicker.hbs

@@ -6,6 +6,7 @@
 			?disabled="{{disabled}}"
 			?readonly="{{readonly}}"
 			value-state="{{valueState}}"
+			._inputAccInfo="{{accInfo}}"
 			@click="{{_handleInputClick}}"
 			@ui5-change="{{_handleInputChange}}"
 			@ui5-input="{{_handleInputLiveChange}}"

packages/main/src/TimePicker.js

@@ -2,6 +2,10 @@ import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import TimePickerBase from "./TimePickerBase.js";
 
+import {
+	TIMEPICKER_INPUT_DESCRIPTION,
+} from "./generated/i18n/i18n-defaults.js";
+
 /**
  * @public
  */
@@ -140,6 +144,21 @@ class TimePicker extends TimePickerBase {
 	get dateValue() {
 		return this.getFormat().parse(this._effectiveValue);
 	}
+
+	get accInfo() {
+		return {
+			"ariaRoledescription": this.dateAriaDescription,
+			"ariaHasPopup": "dialog",
+			"ariaAutoComplete": "none",
+			"role": "combobox",
+			"ariaControls": `${this._id}-responsive-popover`,
+			"ariaExpanded": this.isOpen(),
+		};
+	}
+
+	get dateAriaDescription() {
+		return this.i18nBundle.getText(TIMEPICKER_INPUT_DESCRIPTION);
+	}
 }
 
 TimePicker.define();

packages/main/src/WheelSlider.hbs

@@ -19,14 +19,25 @@
 	<div id="{{this._id}}--selection-frame" class="ui5-wheelslider-selection-frame"></div>
 		<div id="{{this._id}}--wrapper" class="ui5-wheelslider-wrapper">
 			{{#if expanded}}
-				<ul id="{{this._id}}--items-list">
+				<ul id="{{this._id}}--items-list" role="listbox" aria-label="{{label}}">
 					{{#each _itemsToShow}}
-						<li class="ui5-wheelslider-item" data-item-index="{{@index}}" style="list-style-type: none;">{{this}}</li>
+						<li class="ui5-wheelslider-item"
+							data-item-index="{{@index}}"
+							role="option"
+							aria-selected="{{this.selected}}"
+							style="list-style-type: none;">
+							{{this.value}}
+						</li>
 					{{/each}}
 				</ul>
 			{{else}}
-				<ul id="{{this._id}}--items-list">
-					<li class="ui5-wheelslider-item" style="list-style-type: none;">{{value}}</li>
+				<ul id="{{this._id}}--items-list" role="listbox" aria-label="{{label}}">
+					<li class="ui5-wheelslider-item"
+						role="option"
+						aria-selected="true"
+						style="list-style-type: none;">
+						{{value}}
+					</li>
 				</ul>
 			{{/if}}
 		</div>

packages/main/src/WheelSlider.js

@@ -76,7 +76,7 @@ const metadata = {
 		},
 
 		_itemsToShow: {
-			type: String,
+			type: Object,
 			multiple: true,
 		},
 
@@ -248,7 +248,7 @@ class WheelSlider extends UI5Element {
 
 		offsetIndex = Math.round(scrollWhere / cellSizeInPx);
 
-		if (this.value === this._itemsToShow[offsetIndex]) {
+		if (this.value === this._itemsToShow[offsetIndex].value) {
 			return;
 		}
 
@@ -259,7 +259,7 @@ class WheelSlider extends UI5Element {
 			}
 		}
 
-		this.value = this._itemsToShow[offsetIndex];
+		this.value = this._itemsToShow[offsetIndex].value;
 		this._currentElementIndex = offsetIndex;
 	}
 
@@ -311,14 +311,21 @@ class WheelSlider extends UI5Element {
 	}
 
 	_buildItemsToShow() {
-		this._itemsToShow = this._items;
+		let itemsToShow = this._items;
 		if (this.cyclic) {
-			if (this._itemsToShow.length < this._items.length * this._timesMultipliedOnCyclic()) {
+			if (itemsToShow.length < this._items.length * this._timesMultipliedOnCyclic()) {
 				for (let i = 0; i < this._timesMultipliedOnCyclic(); i++) {
-					this._itemsToShow = this._itemsToShow.concat(this._items);
+					itemsToShow = itemsToShow.concat(this._items);
 				}
 			}
 		}
+
+		this._itemsToShow = itemsToShow.map(value => {
+			return {
+				value,
+				"selected": (value === this.value),
+			};
+		});
 	}
 
 	_handleArrayBorderReached(currentIndex) {

packages/main/src/i18n/messagebundle.properties

@@ -205,6 +205,12 @@ TIMEPICKER_SUBMIT_BUTTON=OK
 #XFLD: Timepicker popover button
 TIMEPICKER_CANCEL_BUTTON=Cancel
 
+#XACT: Aria information for the Time Picker
+TIMEPICKER_INPUT_DESCRIPTION=Time Input
+
+#XACT: Aria information for the Duration Picker
+DURATION_INPUT_DESCRIPTION=Duration Input
+
 #XFLD: DateTimePicker popover button
 DATETIME_PICKER_DATE_BUTTON=Date