refactor(ui5-list): introduce accessibleRole prop (#3477)

Instead of creating a NotificationList web component with only role attribute changed (compared to the List), we decided to rename the List's private "accRole" property to "accessibleRole" and make it public, with default value as previous "listbox", and recommend setting it to "accessible-role=list" for the notifications use case.

List: new property "accessibleRole"
NotificationList(Group)Item: role="option" changed to role="listitem" to full-fill the a11y spec.
Tree now setting the new prop "accessibleRole"

Part of: #3107

Author: ilhan007

packages/fiori/src/NotificationListGroupItem.hbs

@@ -3,7 +3,7 @@
 	@focusin="{{_onfocusin}}"
 	@focusout="{{_onfocusout}}"
 	@keydown="{{_onkeydown}}"
-	role="option"
+	role="listitem"
 	tabindex="{{_tabIndex}}"
 	dir="{{effectiveDir}}"
 	aria-expanded="{{ariaExpanded}}"
@@ -77,7 +77,7 @@
 		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInvisibleText}}</span>
 	</div>
 
-	<ui5-list class="ui5-nli-group-items">
+	<ui5-list class="ui5-nli-group-items" accessible-role="list">
 		<slot></slot>
 	</ui5-list>
 

packages/fiori/src/NotificationListItem.hbs

@@ -5,7 +5,7 @@
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
 	@click="{{_onclick}}"
-	role="option"
+	role="listitem"
 	tabindex="{{_tabIndex}}"
 	dir="{{effectiveDir}}"
 	aria-labelledby="{{ariaLabelledBy}}"

packages/fiori/test/pages/NotificationListGroupItem.html

@@ -48,7 +48,7 @@ <h3>Events on ui5-list level</h3>
 		<li>itemToggle</li>
 	</ul>
 
-	<ui5-list id="notificationList" header-text="Notifications grouped">
+	<ui5-list id="notificationList" header-text="Notifications grouped" accessible-role="list">
 		<ui5-li-notification-group
 			show-close
 			show-counter
@@ -209,7 +209,7 @@ <h3>Events on ui5-list level</h3>
 	<ui5-toast id="wcToastBS" duration="2000"></ui5-toast>
 
 	<ui5-popover id="notificationsPopover" style="max-width: 400px" placement-type="Bottom" horizontal-align="Right">
-		<ui5-list id="notificationListTop" header-text="Notifications heading and content 'truncates'">
+		<ui5-list id="notificationListTop" header-text="Notifications heading and content 'truncates'" accessible-role="list">
 			<ui5-li-notification-group
 				show-close
 				show-counter

packages/fiori/test/pages/NotificationListItem.html

@@ -49,7 +49,7 @@ <h3>Events on ui5-list level</h3>
 		<li>itemClose</li>
 	</ul>
 
-	<ui5-list id="notificationList" header-text="Notifications heading and content 'truncates'">
+	<ui5-list id="notificationList" header-text="Notifications heading and content 'truncates'" accessible-role="list">
 
 		<ui5-li-notification
 			busy
@@ -119,7 +119,7 @@ <h3>Events on ui5-list level</h3>
 
 	<br><br>
 
-	<ui5-list id="notificationList2" header-text="Notifications heading and content 'wraps'">
+	<ui5-list id="notificationList2" header-text="Notifications heading and content 'wraps'" accessible-role="list">
 
 		<ui5-li-notification
 			show-close
@@ -172,7 +172,7 @@ <h3>Events on ui5-list level</h3>
 	<ui5-toast id="wcToastBS" duration="2000"></ui5-toast>
 
 	<ui5-popover id="notificationsPopover" style="max-width: 400px" placement-type="Bottom" horizontal-align="Right">
-		<ui5-list id="notificationListTop" header-text="Notifications heading and content 'truncates'">
+		<ui5-list id="notificationListTop" header-text="Notifications heading and content 'truncates'" accessible-role="list">
 			<ui5-li-notification
 				show-close
 				heading="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."

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

@@ -158,17 +158,7 @@ describe("Notification List Item Tests", () => {
 			"The ariaLabelledBy text is correct.");
 	});
 
-	it("tests List Item ACC invisible text", () => {
-		const EXPECTED_RESULT = "Notification unread High Priority";
-		const firstItem = $("#nli1");
-		const invisibleText = firstItem.shadow$(".ui5-hidden-text");
-
-		// assert
-		assert.strictEqual(invisibleText.getText().toLowerCase(), EXPECTED_RESULT.toLowerCase(),
-			"The invisible text is correct.");
-	});
-
-	it("tests List Group Item ACC ariaLabelledBy", () => {
+	it("tests List Item ACC ariaLabelledBy", () => {
 		const firstItem = $("#nli1");
 		const firstItemRoot = firstItem.shadow$(".ui5-nli-root");
 
@@ -182,4 +172,23 @@ describe("Notification List Item Tests", () => {
 		assert.strictEqual(firstItemRoot.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLED_BY,
 			"The ariaLabelledBy text is correct.");
 	});
+
+	it("tests List Item ACC invisible text", () => {
+		const EXPECTED_RESULT = "Notification unread High Priority";
+		const firstItem = $("#nli1");
+		const invisibleText = firstItem.shadow$(".ui5-hidden-text");
+
+		// assert
+		assert.strictEqual(invisibleText.getText().toLowerCase(), EXPECTED_RESULT.toLowerCase(),
+			"The invisible text is correct.");
+	});
+
+	it("tests List (Group) Item ACC role", () => {
+		const firstItemRoot = $("#nli1").shadow$(".ui5-nli-root");
+		const firstGroupItemRoot = $("#nlgi1").shadow$(".ui5-nli-group-root");
+		const EXPECTED_ROLE = "listitem";
+
+		assert.strictEqual(firstGroupItemRoot.getAttribute("role"), EXPECTED_ROLE, "The role text is correct.");
+		assert.strictEqual(firstItemRoot.getAttribute("role"), EXPECTED_ROLE, "The role text is correct.");
+	});
 });

packages/main/src/List.hbs

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

packages/main/src/List.js

@@ -222,14 +222,17 @@ const metadata = {
 		},
 
 		/**
-		 * Used to externally manipulate the role of the list
+		 * Defines the accessible role of the component.
+		 * <br><br>
+		 * <b>Note:</b> If you use notification list items,
+		 * it's recommended to set <code>accessible-role="list"</code> for better accessibility.
 		 *
-		 * @private
+		 * @public
 		 * @type {String}
 		 * @defaultvalue "listbox"
-		 * @since 1.0.0-rc.9
+		 * @since 1.0.0-rc.15
 		 */
-		accRole: {
+		 accessibleRole: {
 			type: String,
 			defaultValue: "listbox",
 		},

packages/main/src/Tree.hbs

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