fix(ui5-li): add "Selected" text to item's accessible name (#3853)

packages/fiori/test/specs/ViewSettingsDialog.spec.js

@@ -11,7 +11,7 @@ describe("ViewSettingsDialog general interaction", () => {
 		const viewSettingsDialog = browser.$("#vsd");
 		btnOpenDialog.click();
 
-		assert.strictEqual(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText(), "Ascending", "initially sortOrder has correct value");
+		assert.ok(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText().includes("Ascending"), "initially sortOrder has correct value");
 		assert.notOk(viewSettingsDialog.$("ui5-li[selected]").isExisting(), "initially sortBy should not have an option selected");
 
 		browser.keys("Escape");
@@ -28,7 +28,7 @@ describe("ViewSettingsDialog general interaction", () => {
 
 		btnOpenDialog.click();
 
-		assert.strictEqual(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText(), "Descending", "SortOrder should properly change value");
+		assert.ok(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText().includes("Descending"), "SortOrder should properly change value");
 
 		browser.keys("Escape");
 	});
@@ -45,7 +45,7 @@ describe("ViewSettingsDialog general interaction", () => {
 
 		btnOpenDialog.click();
 
-		assert.strictEqual(viewSettingsDialog.$("ui5-li[selected]").getText(), "Name", "sortBy should  have an option selected");
+		assert.ok(viewSettingsDialog.$("ui5-li[selected]").getText().includes("Name"), "sortBy should  have an option selected");
 
 		browser.keys("Escape");
 	});
@@ -55,13 +55,13 @@ describe("ViewSettingsDialog general interaction", () => {
 		const viewSettingsDialog = browser.$("#vsd");
 		btnOpenDialog.click();
 
-		assert.strictEqual(viewSettingsDialog.$("ui5-li[selected]").getText(), "Name", "sortBy should have an option selected");
+		assert.ok(viewSettingsDialog.$("ui5-li[selected]").getText().includes("Name"), "sortBy should have an option selected");
 
 		viewSettingsDialog.$$("ui5-li")[1].click();
 		viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-footer").$("ui5-button").click();
 		btnOpenDialog.click();
 
-		assert.strictEqual(viewSettingsDialog.$("ui5-li[selected]").getText(), "Position", "sortBy should change selected option");
+		assert.ok(viewSettingsDialog.$("ui5-li[selected]").getText().includes("Position"), "sortBy should change selected option");
 
 		browser.keys("Escape");
 	})
@@ -71,17 +71,17 @@ describe("ViewSettingsDialog general interaction", () => {
 		const viewSettingsDialog = browser.$("#vsd");
 		btnOpenDialog.click();
 
-		assert.strictEqual(viewSettingsDialog.$("ui5-li[selected]").getText(),"Position", "sortBy should have an option selected");
-		assert.strictEqual(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText(), "Descending", "sortOrder should have correct option selected");
+		assert.ok(viewSettingsDialog.$("ui5-li[selected]").getText().includes("Position"),  "sortBy should have an option selected");
+		assert.ok(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText().includes("Descending"), "sortOrder should have correct option selected");
 
 		viewSettingsDialog.shadow$("ui5-list").$$("ui5-li")[0].click();
 		viewSettingsDialog.$$("ui5-li")[0].click();
 
 		viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-footer").$$("ui5-button")[1].click();
 		btnOpenDialog.click();
 
-		assert.strictEqual(viewSettingsDialog.$("ui5-li[selected]").getText(),"Position", "sortBy should not have a change in the selected option");
-		assert.strictEqual(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText(), "Descending", "sortOrder should not have a change in the selected option");
+		assert.ok(viewSettingsDialog.$("ui5-li[selected]").getText().includes("Position"), "sortBy should not have a change in the selected option");
+		assert.ok(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText().includes("Descending"), "sortOrder should not have a change in the selected option");
 
 		browser.keys("Escape");
 	})
@@ -93,7 +93,7 @@ describe("ViewSettingsDialog general interaction", () => {
 
 		viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-header").$("ui5-button").click();
 
-		assert.strictEqual(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText(), "Ascending", "sortOrder has returned to the initial state");
+		assert.ok(viewSettingsDialog.shadow$("ui5-list").$("ui5-li[selected]").getText().includes("Ascending"), "sortOrder has returned to the initial state");
 		assert.notOk(viewSettingsDialog.$("ui5-li[selected]").isExisting(), "sortBy has returned to the initial state");
 
 		viewSettingsDialog.shadow$("ui5-dialog").$(".ui5-vsd-footer").$$("ui5-button")[1].click();

packages/main/src/ListItem.js

@@ -8,7 +8,12 @@ import ListItemBase from "./ListItemBase.js";
 import RadioButton from "./RadioButton.js";
 import CheckBox from "./CheckBox.js";
 import Button from "./Button.js";
-import { DELETE, ARIA_LABEL_LIST_ITEM_CHECKBOX, ARIA_LABEL_LIST_ITEM_RADIO_BUTTON } from "./generated/i18n/i18n-defaults.js";
+import {
+	DELETE,
+	ARIA_LABEL_LIST_ITEM_CHECKBOX,
+	ARIA_LABEL_LIST_ITEM_RADIO_BUTTON,
+	LIST_ITEM_SELECTED,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/ListItem.css.js";
@@ -323,7 +328,7 @@ class ListItem extends ListItemBase {
 			ariaLevel: undefined,
 			ariaLabel: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
 			ariaLabelRadioButton: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_RADIO_BUTTON),
-			listItemAriaLabel: undefined,
+			listItemAriaLabel: this.ariaSelected ? this.i18nBundle.getText(LIST_ITEM_SELECTED) : undefined,
 		};
 	}
 

packages/main/test/pages/List_test_page.html

@@ -38,6 +38,12 @@
 	<ui5-input id="selectionChangeResultField" placeholder="selectionChange result"></ui5-input>
 	<ui5-input id="selectionChangeResultPreviousItemsParameter" placeholder="selectionChange previousSelection result"></ui5-input>
 
+	<br><br><br>
+	<ui5-list id="listSelectedItem" mode="MultiSelect">
+		<ui5-li id="not-selected-country">Argentina</ui5-li>
+		<ui5-li id="selected-country" selected >Bulgaria</ui5-li>
+	</ui5-list>
+	<br><br><br>
 	<ui5-list id="listEvents2" mode="MultiSelect">
 		<ui5-li id="country11">Argentina</ui5-li>
 		<ui5-li id="country22" selected >Bulgaria</ui5-li>

packages/main/test/specs/List.spec.js

@@ -348,4 +348,25 @@ describe("List Tests", () => {
 
 		assert.strictEqual(item3.getProperty("focused"), true, "disabled item is skipped");
 	});
+
+	it('should focus next interactive element if TAB is pressed when focus is on "More" growing button', () => {
+		const growingListButton = $('#growingListButton').shadow$("div[growing-button-inner]");
+		const nextInteractiveElement = $('#nextInteractiveElement');
+
+		growingListButton.click() // focus growing button
+		growingListButton.keys("Tab") // focus next list
+
+		assert.strictEqual(nextInteractiveElement.isFocused(), true, "Focus is moved to next interactive element.");
+	});
+
+	it('should include selected state text in accInfo', () => {
+		const notSelectedItem = $("#listSelectedItem #not-selected-country");
+		const selectedItem = $("#listSelectedItem #selected-country");
+
+		let accInfo = notSelectedItem.getProperty("_accInfo")
+		assert.strictEqual(accInfo.listItemAriaLabel, null, "Item label is empty");
+
+		accInfo = selectedItem.getProperty("_accInfo");
+		assert.strictEqual(accInfo.listItemAriaLabel, "Selected", "Selected text is part of the label");
+	});
 });