fix(ui5-tree): accessibility improvements (#2671)

Added new aria-posinset and aria-setsize attributes to each element. Now, screen reader will know the count of the items on the same level and the position of the current active item.

Fixes: #2553

Author: nnaydenow

packages/main/src/ListItem.hbs

@@ -15,6 +15,8 @@
 	role="{{_accInfo.role}}"
 	aria-expanded="{{_accInfo.ariaExpanded}}"
 	aria-level="{{_accInfo.ariaLevel}}"
+	aria-posinset="{{_accInfo.posinset}}"
+	aria-setsize="{{_accInfo.setsize}}"
 	aria-labelledby="{{_id}}-invisibleText {{_id}}-content"
 	style="list-style-type: none;"
 >

packages/main/src/Tree.hbs

@@ -21,6 +21,8 @@
             .expanded="{{this.treeItem.expanded}}"
             .selected="{{this.treeItem.selected}}"
             .showToggleButton="{{this.treeItem.requiresToggleButton}}"
+            ._posinset="{{this.posinset}}"
+            ._setsize="{{this.size}}"
             @ui5-toggle="{{../_onListItemToggle}}"
             @ui5-step-in="{{../_onListItemStepIn}}"
             @ui5-step-out="{{../_onListItemStepOut}}"

packages/main/src/Tree.js

@@ -349,9 +349,11 @@ const walkTree = (el, level, callback) => {
 };
 
 const buildTree = (el, level, result) => {
-	el.items.forEach(item => {
+	el.items.forEach((item, index) => {
 		const listItem = {
 			treeItem: item,
+			size: el.items.length,
+			posinset: index + 1,
 			level,
 		};
 

packages/main/src/TreeListItem.js

@@ -91,6 +91,26 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * @private
+		 * @since 1.0.0-rc.11
+		 */
+		_setsize: {
+			type: Integer,
+			defaultValue: 1,
+			noAttribute: true,
+		},
+
+		/**
+		 * @private
+		 * @since 1.0.0-rc.11
+		 */
+		_posinset: {
+			type: Integer,
+			defaultValue: 1,
+			noAttribute: true,
+		},
+
 	},
 	slots: /** @lends sap.ui.webcomponents.main.TreeListItem.prototype */ {
 		/**
@@ -228,6 +248,8 @@ class TreeListItem extends ListItem {
 			role: "treeitem",
 			ariaExpanded: this.showToggleButton ? this.expanded : undefined,
 			ariaLevel: this.level,
+			posinset: this._posinset,
+			setsize: this._setsize,
 			listItemAriaLabel: this.ariaLabelText,
 		};
 	}