feat(ui5-tree): implement acc spec (#2636)

Changes:
- Tooltip for the expand/collapse icon is added
- Tree item is now announced
- Selected state is now announced
- Announced level is fixed
- Translation for LIST_ITEM_SELECTED is fixed
- Tree view is now read out once.

Fixes #2465

Author: dobrinyonkov

packages/main/src/List.hbs

@@ -20,7 +20,7 @@
 
 	<ul id="{{_id}}-listUl"
 		class="ui5-list-ul"
-		role="{{role}}"
+		role="{{accRole}}"
 		aria-label="{{ariaLabelТxt}}"
 		aria-labelledby="{{ariaLabelledBy}}"
 		aria-multiselectable="{{isMultiSelect}}"

packages/main/src/List.js

@@ -195,7 +195,7 @@ const metadata = {
 		 * @defaultvalue "listbox"
 		 * @since 1.0.0-rc.9
 		 */
-		role: {
+		accRole: {
 			type: String,
 			defaultValue: "listbox",
 		},

packages/main/src/ListItem.hbs

@@ -15,6 +15,7 @@
 	role="{{_accInfo.role}}"
 	aria-expanded="{{_accInfo.ariaExpanded}}"
 	aria-level="{{_accInfo.ariaLevel}}"
+	aria-labelledby="{{_id}}-invisibleText {{_id}}-content"
 	style="list-style-type: none;"
 >
 		{{> listItemPreContent}}
@@ -43,6 +44,8 @@
 		{{#if placeSelectionElementAfter}}
 			{{> selectionElement}}
 		{{/if}}
+
+		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{_accInfo.listItemAriaLabel}}</span>
 </li>
 
 {{#*inline "listItemPreContent"}}{{/inline}}

packages/main/src/ListItem.js

@@ -311,6 +311,7 @@ class ListItem extends ListItemBase {
 			ariaExpanded: undefined,
 			ariaLevel: undefined,
 			ariaLabel: this.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX),
+			listItemAriaLabel: undefined,
 		};
 	}
 

packages/main/src/Tree.hbs

@@ -3,7 +3,7 @@
     .headerText="{{headerText}}"
     .footerText="{{footerText}}"
     .noDataText="{{noDataText}}"
-    .role="{{_role}}"
+    .accRole="{{_role}}"
     @ui5-item-click="{{_onListItemClick}}"
     @ui5-item-delete="{{_onListItemDelete}}"
     @ui5-selection-change="{{_onListSelectionChange}}"

packages/main/src/TreeListItem.hbs

@@ -1,11 +1,16 @@
 {{>include "./ListItem.hbs"}}
 
 {{#*inline "listItemPreContent"}}
-	<div class="ui5-li-tree-toggle-box" style="padding-left: {{effectiveLevel}}rem; padding-left: calc(var(--_ui5-tree-indent-step) * {{effectiveLevel}});">
+	<div
+		class="ui5-li-tree-toggle-box"
+		style="padding-left: {{effectiveLevel}}rem; padding-left: calc(var(--_ui5-tree-indent-step) * {{effectiveLevel}});"
+	>
 		{{#if _showToggleButtonBeginning}}
 			<ui5-icon
 				class="ui5-li-tree-toggle-icon"
 				name="{{_toggleIconName}}"
+				show-tooltip
+				accessible-name="{{iconAccessibleName}}"
 				@click="{{_toggleClick}}"
 			></ui5-icon>
 		{{/if}}

packages/main/src/TreeListItem.js

@@ -1,9 +1,16 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
+import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import {
+	TREE_ITEM_ARIA_LABEL,
+	TREE_ITEM_EXPAND_NODE,
+	TREE_ITEM_COLLAPSE_NODE,
+	LIST_ITEM_SELECTED,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Template
 import TreeListItemTemplate from "./generated/templates/TreeListItemTemplate.lit.js";
@@ -16,6 +23,7 @@ import treeListItemCss from "./generated/themes/TreeListItem.css.js";
  */
 const metadata = {
 	tag: "ui5-li-tree",
+	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.TreeListItem.prototype */ {
 
 		/**
@@ -175,6 +183,12 @@ class TreeListItem extends ListItem {
 		];
 	}
 
+	constructor() {
+		super();
+
+		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	}
+
 	onBeforeRendering() {
 		this.actionable = false;
 	}
@@ -214,6 +228,7 @@ class TreeListItem extends ListItem {
 			role: "treeitem",
 			ariaExpanded: this.showToggleButton ? this.expanded : undefined,
 			ariaLevel: this.level,
+			listItemAriaLabel: this.ariaLabelText,
 		};
 	}
 
@@ -241,6 +256,24 @@ class TreeListItem extends ListItem {
 			}
 		}
 	}
+
+	get ariaLabelText() {
+		let text = this.i18nBundle.getText(TREE_ITEM_ARIA_LABEL);
+
+		if (this.selected) {
+			text += ` ${this.i18nBundle.getText(LIST_ITEM_SELECTED)}`;
+		}
+
+		return text;
+	}
+
+	get iconAccessibleName() {
+		return this.expanded ? this.i18nBundle.getText(TREE_ITEM_COLLAPSE_NODE) : this.i18nBundle.getText(TREE_ITEM_EXPAND_NODE);
+	}
+
+	static async onDefine() {
+		await fetchI18nBundle("@ui5/webcomponents");
+	}
 }
 
 TreeListItem.define();

packages/main/src/i18n/messagebundle.properties

@@ -266,7 +266,7 @@ LINK_EMPHASIZED=Emphasized
 LIST_ITEM_POSITION=List item {0} of {1}
 
 #XACT: ARIA announcement for the list item selection.
-LIST_ITEM_SELECTED=Is Selected
+LIST_ITEM_SELECTED=Selected
 
 #XBUT: List Multi Selection Mode Checkbox aria-label text
 ARIA_LABEL_LIST_ITEM_CHECKBOX = Multiple Selection mode.
@@ -358,6 +358,15 @@ TOKENIZER_ARIA_LABEL=Tokenizer
 #XFLD: Remove label for Tokenizer's Dialog on phone
 TOKENIZER_POPOVER_REMOVE=Remove
 
+#XACT: Label text for TreeListItem
+TREE_ITEM_ARIA_LABEL=Tree Item
+
+#XTOL: tooltip for expand icon in a tree item
+TREE_ITEM_EXPAND_NODE=Expand Node
+
+#XTOL: tooltip for collapse icon in a tree item
+TREE_ITEM_COLLAPSE_NODE=Collapse Node
+
 #XTOL: text that is appended to the tooltips of input fields etc. which are marked to have an error
 VALUE_STATE_ERROR=Invalid entry
 

packages/main/src/themes/TreeListItem.css

@@ -1,3 +1,5 @@
+@import "./InvisibleTextStyles.css";
+
 :host(:not([hidden])) {
 	display: block;
     cursor: pointer;