fix(ui5-multi-combobox): enhance accessibility on mobile (#8096)

Co-authored-by: Nia Peeva <niya.peeva@sap.com>
SAP · Jan 14, 2024 · 14b5421 · 14b5421
1 parent fc22417
commit 14b5421
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 1 deletion.
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
@@ -83,6 +83,7 @@ import {
 	VALUE_STATE_TYPE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
 	SELECT_OPTIONS,
+	SHOW_SELECTED_BUTTON,
 	MULTICOMBOBOX_DIALOG_OK_BUTTON,
 	VALUE_STATE_ERROR_ALREADY_SELECTED,
 } from "./generated/i18n/i18n-defaults.js";
@@ -1712,6 +1713,10 @@ class MultiComboBox extends UI5Element {
 		return MultiComboBox.i18nBundle.getText(SELECT_OPTIONS);
 	}
 
+	get _showSelectedButtonAccessibleNameText() {
+		return MultiComboBox.i18nBundle.getText(SHOW_SELECTED_BUTTON);
+	}
+
 	get _dialogOkButton() {
 		return MultiComboBox.i18nBundle.getText(MULTICOMBOBOX_DIALOG_OK_BUTTON);
 	}

diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
@@ -45,7 +45,8 @@
 						icon="multiselect-all"
 						design="Transparent"
 						?pressed={{_showAllItemsButtonPressed}}
-						@click="{{filterSelectedItems}}">
+						@click="{{filterSelectedItems}}"
+						accessible-name="{{_showSelectedButtonAccessibleNameText}}">
 				</ui5-toggle-button>
 			</div>
 		</div>

diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties
@@ -157,6 +157,9 @@ SELECT_ROLE_DESCRIPTION=Listbox
 #XTXT: MultiComboBox and ComboBox icon accessible name
 SELECT_OPTIONS=Select Options
 
+#XTXT: MultiComboBox show selected items button accessible name
+SHOW_SELECTED_BUTTON=Show Selected Items Only
+
 #XBUT: A link that can be clicked to display more/all items
 INPUT_SUGGESTIONS=Suggestions available
 

diff --git a/packages/main/test/specs/MultiComboBox.mobile.spec.js b/packages/main/test/specs/MultiComboBox.mobile.spec.js
@@ -393,4 +393,32 @@ describe("Validation", () => {
 		assert.strictEqual(await dialogInput.getValue(), "com", "Additional input was not allowed");
 	});
 
+});
+
+describe("Accessibility", () => {
+	before(async () => {
+		await browser.url("test/pages/MultiComboBox.html");
+		await browser.emulateDevice('iPhone X');
+	});
+
+	it("Show selected toggle button should has accessibleName attribute", async () => {
+		const multiCombo = await browser.$("#multi1");
+		const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multi1");
+		let resourceBundleText = null;
+
+		await multiCombo.scrollIntoView();
+		await multiCombo.shadow$('input').click();
+
+		const toggleSelectedButton =  await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-toggle-button");
+
+		resourceBundleText = await browser.executeAsync(done => {
+			const mcb = document.getElementById("multi1");
+			done(mcb.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.SHOW_SELECTED_BUTTON));
+		});
+
+		assert.ok(await toggleSelectedButton.isDisplayed(), "Toggle selected items button is displayed");
+		assert.strictEqual(await toggleSelectedButton.getAttribute("accessible-name"), "Show Selected Items Only", "Correct value is applied")
+
+	});
+
 });