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
SAP · Jul 15, 2021 · 99a25be · 99a25be
1 parent 97a8713
commit 99a25be
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 25 deletions.
diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/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>
 

diff --git a/packages/fiori/src/NotificationListItem.hbs b/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}}"

diff --git a/packages/fiori/test/pages/NotificationListGroupItem.html b/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

diff --git a/packages/fiori/test/pages/NotificationListItem.html b/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."

diff --git a/packages/fiori/test/specs/NotificationList.spec.js b/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.");
+	});
 });
diff --git a/packages/main/src/List.hbs b/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}}"

diff --git a/packages/main/src/List.js b/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",
 		},

diff --git a/packages/main/src/Tree.hbs b/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}}"