feat(ui5-list): implement accessibility spec (#1461)

Author: fifoosid

packages/main/src/GroupHeaderListItem.hbs

@@ -3,7 +3,10 @@
 	class="ui5-ghli-root {{classes.main}}"
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
+	role="option"
 >
+	<span class="ui5-hidden-text">{{groupHeaderText}}</span>
+
 	<div id="{{_id}}-content" class="ui5-li-content">
 		<span class="ui5-ghli-title"><slot></slot></span>
 	</div>

packages/main/src/GroupHeaderListItem.js

@@ -1,6 +1,9 @@
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ListItemBase from "./ListItemBase.js";
 
+import { GROUP_HEADER_TEXT } from "./generated/i18n/i18n-defaults.js";
+
 // Template
 import GroupHeaderListItemTemplate from "./generated/templates/GroupHeaderListItemTemplate.lit.js";
 
@@ -60,9 +63,25 @@ class GroupHeaderListItem extends ListItemBase {
 		return [ListItemBase.styles, groupheaderListItemCss];
 	}
 
+	constructor() {
+		super();
+
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	}
+
 	get group() {
 		return true;
 	}
+
+	get groupHeaderText() {
+		return this.i18nBundle.getText(GROUP_HEADER_TEXT);
+	}
+
+	static async onDefine() {
+		await Promise.all([
+			fetchI18nBundle("@ui5/webcomponents"),
+		]);
+	}
 }
 
 GroupHeaderListItem.define();

packages/main/src/List.hbs

@@ -9,14 +9,14 @@
 		<slot name="header" />
 	{{/if}}
 	{{#if shouldRenderH1}}
-		<header id="{{_id}}-header" class="ui5-list-header">
+		<header id="{{headerID}}" class="ui5-list-header">
 			{{headerText}}
 		</header>
 	{{/if}}
 
 	<div id="{{_id}}-before" tabindex="0" class="ui5-list-focusarea"></div>
 
-	<ul id="{{_id}}-listUl" class="ui5-list-ul">
+	<ul id="{{_id}}-listUl" class="ui5-list-ul" aria-multiselectable="{{isMultiSelect}}" aria-labelledby="{{ariaLabelledBy}}" role="listbox">
 		<slot></slot>
 
 		{{#if showNoDataText}}

packages/main/src/List.js

@@ -303,6 +303,10 @@ class List extends UI5Element {
 		return !this.header.length && this.headerText;
 	}
 
+	get headerID() {
+		return `${this._id}-header`;
+	}
+
 	get showNoDataText() {
 		return this.items.length === 0 && this.noDataText;
 	}
@@ -311,6 +315,14 @@ class List extends UI5Element {
 		return this.busy || this.infiniteScroll;
 	}
 
+	get isMultiSelect() {
+		return this.mode === ListMode.MultiSelect;
+	}
+
+	get ariaLabelledBy() {
+		return this.shouldRenderH1 ? this.headerID : undefined;
+	}
+
 	onBeforeRendering() {
 		this.prepareListItems();
 	}

packages/main/src/ListItem.hbs

@@ -11,6 +11,8 @@
 	@touchstart="{{_ontouchstart}}"
 	@touchend="{{_ontouchend}}"
 	@click="{{_onclick}}"
+	aria-selected="{{ariaSelected}}"
+	role="option"
 >
 		{{#if placeSelectionElementBefore}}
 			{{> selectionElement}}
@@ -74,6 +76,7 @@
 				design="Transparent"
 				icon="decline"
 				@click="{{onDelete}}"
+				title="{{deleteText}}"
 			></ui5-button>
 		</div>
 	{{/if}}

packages/main/src/ListItem.js

@@ -1,12 +1,14 @@
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import "@ui5/webcomponents-icons/dist/icons/decline.js";
 import "@ui5/webcomponents-icons/dist/icons/edit.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ListItemType from "./types/ListItemType.js";
 import ListMode from "./types/ListMode.js";
 import ListItemBase from "./ListItemBase.js";
 import "./RadioButton.js";
 import "./CheckBox.js";
 import "./Button.js";
+import { DELETE } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import styles from "./generated/themes/ListItem.css.js";
@@ -107,6 +109,8 @@ class ListItem extends ListItemBase {
 				this.active = false;
 			}
 		};
+
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering(...params) {
@@ -262,6 +266,24 @@ class ListItem extends ListItemBase {
 	get typeDetail() {
 		return this.type === ListItemType.Detail;
 	}
+
+	get ariaSelected() {
+		if (this.modeMultiSelect) {
+			return this.selected;
+		}
+
+		return undefined;
+	}
+
+	get deleteText() {
+		return this.i18nBundle.getText(DELETE);
+	}
+
+	static async onDefine() {
+		await Promise.all([
+			fetchI18nBundle("@ui5/webcomponents"),
+		]);
+	}
 }
 
 export default ListItem;

packages/main/src/StandardListItem.hbs

@@ -8,6 +8,7 @@
 		{{#if description}}
 			<span part="description" class="ui5-li-desc">{{description}}</span>
 		{{/if}}
+		<span class="ui5-hidden-text">{{type}}</span>
 	</div>
 	{{#if info}}
 		<span part="info" class="ui5-li-info">{{info}}</span>

packages/main/src/i18n/messagebundle.properties

@@ -40,8 +40,12 @@ CAROUSEL_OF_TEXT=of
 #XACT: DatePicker 'Open Picker' icon title
 DATEPICKER_OPEN_ICON_TITLE=Open Picker
 
+DELETE=Delete
+
 FILEUPLOAD_BROWSE=Browse...
 
+GROUP_HEADER_TEXT=Group Header
+
 #XTXT
 ICON_ACTION_SETTINGS=Settings
 

packages/main/src/themes/GroupHeaderListItem.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host {
 	background: var(--ui5-group-header-listitem-background-color);
 	border-bottom: 1px solid var(--sapList_TableGroupHeaderBorderColor);

packages/main/src/themes/ListItem.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 /* actionable (type="Active" + desktop) */
 :host([actionable]) {
 	cursor: pointer;

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

@@ -140,8 +140,10 @@ describe("General interaction", () => {
 
 		input.keys("d");
 		listItems = popover.$("ui5-list").$$("ui5-li");
+		const firstListItemText = listItems[0].shadow$(".ui5-li-title").getText();
+
 		assert.strictEqual(listItems.length, 1, "Items should be 1");
-		assert.strictEqual(listItems[0].getText(), "Canada");
+		assert.strictEqual(firstListItemText, "Canada");
 	});
 
 	it ("Tests Combo with startswith filter", () => {
@@ -158,8 +160,10 @@ describe("General interaction", () => {
 
 		input.keys("a");
 		listItems = popover.$("ui5-list").$$("ui5-li");
+		const firstListItemText = listItems[0].shadow$(".ui5-li-title").getText();
+
 		assert.strictEqual(listItems.length, 1, "Items should be 1");
-		assert.strictEqual(listItems[0].getText(), "Argentina");
+		assert.strictEqual(firstListItemText, "Argentina");
 
 		input.keys("a");
 		listItems = popover.$("ui5-list").$$("ui5-li");