fix(ui5-combobox): support aria-label/arial-labelledby and fix aria-expanded (#1916)

Author: vladitasev

packages/main/src/ComboBox.hbs

@@ -22,6 +22,7 @@
 		aria-haspopup="listbox"
 		aria-autocomplete="both"
 		aria-describedby="{{valueStateTextId}}"
+		aria-label="{{ariaLabelText}}"
 	/>
 
 	{{#unless readonly}}

packages/main/src/ComboBox.js

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import getEffectiveAriaLabelText from "@ui5/webcomponents-base/dist/util/getEffectiveAriaLabelText.js";
 import "@ui5/webcomponents-icons/dist/icons/slim-arrow-down.js";
 import "@ui5/webcomponents-icons/dist/icons/decline.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -173,6 +174,30 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the aria-label attribute for the combo box
+		 * @type {String}
+		 * @defaultvalue: ""
+		 * @private
+		 * @since 1.0.0-rc.8
+		 */
+		ariaLabel: {
+			type: String,
+			defaultValue: undefined,
+		},
+
+		/**
+		 * Receives id(or many ids) of the elements that label the combo box
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.8
+		 */
+		ariaLabelledby: {
+			type: String,
+			defaultValue: "",
+		},
+
 		_iconPressed: {
 			type: Boolean,
 			noAttribute: true,
@@ -519,6 +544,14 @@ class ComboBox extends UI5Element {
 		};
 	}
 
+	get open() {
+		return this.responsivePopover ? this.responsivePopover.opened : false;
+	}
+
+	get ariaLabelText() {
+		return getEffectiveAriaLabelText(this);
+	}
+
 	static async onDefine() {
 		await Promise.all([
 			ComboBoxItem.define(),

packages/main/test/pages/ComboBox.html

@@ -40,7 +40,8 @@
 	</style>
 
 	<div class="demo-section">
-		<ui5-combobox id="combo" style="width: 360px;" value="Bulgaria">
+		<ui5-label id="countryLabel">Select country: </ui5-label>
+		<ui5-combobox id="combo" style="width: 360px;" value="Bulgaria" aria-labelledby="countryLabel">
 			<ui5-cb-item text="Algeria"></ui5-cb-item>
 			<ui5-cb-item text="Argentina"></ui5-cb-item>
 			<ui5-cb-item text="Australia"></ui5-cb-item>
@@ -54,7 +55,7 @@
 			<ui5-cb-item text="Chile"></ui5-cb-item>
 		</ui5-combobox>
 
-		<ui5-combobox id="combo2" style="width: 360px;">
+		<ui5-combobox id="combo2" style="width: 360px;" aria-label="Select destination:">
 			<ui5-cb-item text="Algeria"></ui5-cb-item>
 			<ui5-cb-item text="Argentina"></ui5-cb-item>
 			<ui5-cb-item text="Australia"></ui5-cb-item>