feat(ui5-select): add aria-roledescription attribute (#4921)

Closes: #2910
SAP · Mar 22, 2022 · e4fa811 · e4fa811
1 parent 2f40bd7
commit e4fa811
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs
@@ -22,6 +22,7 @@
 		aria-disabled="{{isDisabled}}"
 		aria-required="{{required}}"
 		aria-expanded="{{_isPickerOpen}}"
+		aria-roledescription="{{_ariaRoleDescription}}"
 		@keydown="{{_onkeydown}}"
 		@keypress="{{_handleKeyboardNavigation}}"
 		@keyup="{{_onkeyup}}"

diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js
@@ -32,6 +32,7 @@ import {
 	VALUE_STATE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
 	LIST_ITEM_POSITION,
+	SELECT_ROLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 import Option from "./Option.js";
 import Label from "./Label.js";
@@ -768,6 +769,10 @@ class Select extends UI5Element {
 			&& !this._isPickerOpen && !this._isPhone;
 	}
 
+	get _ariaRoleDescription() {
+		return Select.i18nBundle.getText(SELECT_ROLE_DESCRIPTION);
+	}
+
 	get _isPhone() {
 		return isPhone();
 	}

diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
@@ -109,6 +109,9 @@ FILEUPLOADER_TITLE=Upload File
 
 GROUP_HEADER_TEXT=Group Header
 
+#XACT: ARIA announcement for the Select`s roledescription attribute
+SELECT_ROLE_DESCRIPTION=Select ComboBox
+
 #XTXT: MultiComboBox and ComboBox icon accessible name
 SELECT_OPTIONS=Select Options
 

diff --git a/packages/main/test/specs/Select.spec.js b/packages/main/test/specs/Select.spec.js
@@ -400,11 +400,12 @@ describe("Select general interaction", () => {
 		assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT2, "Select label is correct.");
 	});
 
-	it("Tests aria-label, aria-labelledby and aria-expanded", async () => {
+	it("Tests accessibility", async () => {
 		const select1 = await browser.$("#textAreaAriaLabel").shadow$(".ui5-select-label-root");
 		const select2 = await browser.$("#textAreaAriaLabelledBy").shadow$(".ui5-select-label-root");
 		const EXPECTED_ARIA_LABEL1 = "Hello World";
 		const EXPECTED_ARIA_LABEL2 = "info text";
+		const EXPECTER_ARIA_ROLEDESCRIPTION = "Select ComboBox";
 
 		assert.strictEqual(await select1.getAttribute("aria-label"), EXPECTED_ARIA_LABEL1,
 			"The aria-label is correctly set internally.");
@@ -415,5 +416,8 @@ describe("Select general interaction", () => {
 			"The aria-label is correctly set internally.");
 		assert.strictEqual(await select2.getAttribute("aria-expanded"), "false",
 			"The aria-expanded is false by default.");
+
+		assert.strictEqual(await select2.getAttribute("aria-roledescription"), EXPECTER_ARIA_ROLEDESCRIPTION,
+			"The aria-roledescription is correct.");
 	});
 });