fix(ui5-select): improve accessibility

packages/main/src/Select.hbs

@@ -5,11 +5,14 @@
 	id="{{_id}}-select"
 	role="button"
 	aria-haspopup="listbox"
-	aria-label="{{ariaLabelText}}"
-	aria-labelledby="{{_id}}-label"
+	aria-labelledby="{{_id}}-labelText"
 	aria-describedby="{{valueStateTextId}}"
 	aria-disabled="{{isDisabled}}"
 	aria-required="{{required}}"
+	aria-expanded="{{_isPickerOpen}}"
+	aria-roledescription="{{selectRoleDescription}}"
+	aria-controls="{{_id}}-select-list"
+	aria-activedescendant="{{selectedListItem}}-li"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
 	@focusin="{{_onfocusin}}"
@@ -27,6 +30,7 @@
 		dir="{{effectiveDir}}"
 	></ui5-icon>
 
+	<span id="{{_id}}-labelText" class="ui5-hidden-text">{{ariaLabelText}} {{_text}}</span>
 	{{#if hasValueState}}
 		<span id="{{_id}}-valueStateDesc" class="ui5-hidden-text">{{valueStateText}}</span>
 	{{/if}}

packages/main/src/Select.js

@@ -24,6 +24,7 @@ import {
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
+	SELECT_ROLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 import Option from "./Option.js";
 import Label from "./Label.js";
@@ -361,6 +362,7 @@ class Select extends UI5Element {
 				value: opt.value,
 				textContent: opt.textContent,
 				id: opt._id,
+				index: index + 1,
 			};
 		});
 
@@ -533,6 +535,11 @@ class Select extends UI5Element {
 		this.fireEvent("selected-item-changed");
 	}
 
+	get selectedListItem() {
+		const selectedItem = this._syncedOptions.find(item => item.selected);
+		return selectedItem && selectedItem.id;
+	}
+
 	get valueStateTextMappings() {
 		const i18nBundle = this.i18nBundle;
 
@@ -560,6 +567,10 @@ class Select extends UI5Element {
 		return this.disabled || undefined;
 	}
 
+	get selectRoleDescription() {
+		return this.i18nBundle.getText(SELECT_ROLE_DESCRIPTION);
+	}
+
 	get _headerTitleText() {
 		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}

packages/main/src/SelectPopover.hbs

@@ -38,9 +38,23 @@
 			{{/if}}
 		{{/unless}}
 
-		<ui5-list mode="SingleSelectAuto" separators="None" @keydown="{{_handlePickerKeydown}}" @ui5-selection-change="{{_handleSelectionChange}}" @ui5-item-press="{{_handleItemPress}}">
+		<ui5-list
+			id="{{_id}}-select-list"
+			mode="SingleSelectAuto"
+			separators="None"
+			@keydown="{{_handlePickerKeydown}}"
+			@ui5-selection-change="{{_handleSelectionChange}}"
+			@ui5-item-press="{{_handleItemPress}}"
+		>
 			{{#each _syncedOptions}}
-				<ui5-li ?selected="{{this.selected}}" icon="{{this.icon}}" id="{{this.id}}-li">
+				<ui5-li
+					id="{{this.id}}-li"
+					icon="{{this.icon}}"
+					?selected="{{this.selected}}"
+					?aria-selected="{{this.selected}}"
+					aria-setsize="{{../_syncedOptions.length}}"
+					aria-posinset="{{this.index}}"
+				>
 					{{this.textContent}}
 				</ui5-li>
 			{{/each}}

packages/main/src/i18n/messagebundle.properties

@@ -283,6 +283,9 @@ RATING_INDICATOR_TEXT=Rating Indicator
 #XACT: ARIA description for the segmented button
 SEGMENTEDBUTTON_ARIA_DESCRIPTION=Segmented button
 
+#XACT: ARIA announcement for the Select`s roledescription attribute
+SELECT_ROLE_DESCRIPTION=Select
+
 #XACT: ARIA announcement for the switch on
 SWITCH_ON=On