feat(ui5-li-notification*): full-fill accessibility spec (#2578)

We identified gaps in the accessibility implementation, that this change aims to address as follows:
**NotificationListItem**
- More Button: added aria-label="More"
- Close Button: added aria-label="Close"
**NotificationListGroupItem**
- Invisible text reading: added "read" or "unread", based on the "read" property.
- Root: added aria-expanded="true"/"false", based on the "collapsed" property
- More Button: added aria-label="More"
- Close Button: added aria-label="Close All"
- Toggle Button added title="Collapse Group" ("Expand Group") and aria-label="Collapse Group" ("Expand Group") - based on the "collapsed" property
**NotificationListGroupItem**
- new property "read" (previously available in the NotificationListItem only)

Author: ilhan007

packages/fiori/src/NotificationListGroupItem.hbs

@@ -6,6 +6,7 @@
 	role="option"
 	tabindex="{{_tabIndex}}"
 	dir="{{effectiveDir}}"
+	aria-expanded="{{ariaExpanded}}"
 	aria-labelledby="{{ariaLabelledBy}}"
 	style="list-style-type: none;"
 >
@@ -15,6 +16,8 @@
 			design="Transparent"
 			@click="{{_onBtnToggleClick}}"
 			class="ui5-nli-group-toggle-btn"
+			title="{{toggleBtnAccessibleName}}"
+			aria-label="{{toggleBtnAccessibleName}}"
 		></ui5-button>
 
 		{{#if hasPriority}}
@@ -41,7 +44,8 @@
 					design="Transparent"
 					@click="{{_onBtnOverflowClick}}"
 					class="ui5-nli-overflow-btn"
-					title="{{overflowBtnTitle}}"
+					title="{{overflowBtnAccessibleName}}"
+					aria-label="{{overflowBtnAccessibleName}}"
 				></ui5-button>
 			{{else}}
 				{{#each standardActions}}
@@ -64,7 +68,8 @@
 				icon="decline"
 				design="Transparent"
 				@click="{{_onBtnCloseClick}}"
-				title="{{closeBtnTitle}}"
+				title="{{closeBtnAccessibleName}}"
+				aria-label="{{closeBtnAccessibleName}}"
 				close-btn
 			></ui5-button>
 		{{/if}}

packages/fiori/src/NotificationListGroupItem.js

@@ -11,11 +11,15 @@ import NotificationListItemBase from "./NotificationListItemBase.js";
 import {
 	NOTIFICATION_LIST_GROUP_ITEM_TXT,
 	NOTIFICATION_LIST_GROUP_ITEM_COUNTER_TXT,
+	NOTIFICATION_LIST_ITEM_READ,
+	NOTIFICATION_LIST_ITEM_UNREAD,
 	NOTIFICATION_LIST_ITEM_HIGH_PRIORITY_TXT,
 	NOTIFICATION_LIST_ITEM_MEDIUM_PRIORITY_TXT,
 	NOTIFICATION_LIST_ITEM_LOW_PRIORITY_TXT,
 	NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE,
-	NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE,
+	NOTIFICATION_LIST_GROUP_ITEM_CLOSE_BTN_TITLE,
+	NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_COLLAPSE_TITLE,
+	NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_EXPAND_TITLE,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
@@ -161,12 +165,20 @@ class NotificationListGroupItem extends NotificationListItemBase {
 		return this.items.length;
 	}
 
-	get overflowBtnTitle() {
+	get overflowBtnAccessibleName() {
 		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);
 	}
 
-	get closeBtnTitle() {
-		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);
+	get closeBtnAccessibleName() {
+		return this.i18nBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_CLOSE_BTN_TITLE);
+	}
+
+	get toggleBtnAccessibleName() {
+		if (this.collapsed) {
+			return this.i18nBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_EXPAND_TITLE);
+		}
+
+		return this.i18nBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_COLLAPSE_TITLE);
 	}
 
 	get priorityText() {
@@ -186,12 +198,24 @@ class NotificationListGroupItem extends NotificationListItemBase {
 	}
 
 	get accInvisibleText() {
-		const groupTxt = this.i18nBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TXT);
-		const counterTxt = this.i18nBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_COUNTER_TXT);
-		const counter = this.showCounter ? `${counterTxt} ${this.itemsCount}` : "";
-		const priorityText = this.priorityText;
+		return `${this.groupText} ${this.readText} ${this.priorityText} ${this.counterText}`;
+	}
+
+	get readText() {
+		if (this.read) {
+			return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_READ);
+		}
 
-		return `${groupTxt} ${priorityText} ${counter}`;
+		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);
+	}
+
+	get groupText() {
+		return this.i18nBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TXT);
+	}
+
+	get counterText() {
+		const text = this.i18nBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_COUNTER_TXT);
+		return this.showCounter ? `${text} ${this.itemsCount}` : "";
 	}
 
 	get ariaLabelledBy() {
@@ -207,6 +231,10 @@ class NotificationListGroupItem extends NotificationListItemBase {
 		return ids.join(" ");
 	}
 
+	get ariaExpanded() {
+		return !this.collapsed;
+	}
+
 	/**
 	 * Event handlers
 	 *

packages/fiori/src/NotificationListItem.hbs

@@ -18,7 +18,8 @@
 				design="Transparent"
 				@click="{{_onBtnOverflowClick}}"
 				class="ui5-nli-overflow-btn"
-				title="{{overflowBtnTitle}}"
+				title="{{overflowBtnAccessibleName}}"
+				aria-label="{{overflowBtnAccessibleName}}"
 			></ui5-button>
 		{{else}}
 			{{#each standardActions}}
@@ -40,7 +41,8 @@
 				icon="decline"
 				design="Transparent"
 				@click="{{_onBtnCloseClick}}"
-				title="{{closeBtnTitle}}"
+				title="{{closeBtnAccessibleName}}"
+				aria-label="{{closeBtnAccessibleName}}"
 				close-btn
 			></ui5-button>
 		{{/if}}
@@ -55,7 +57,7 @@
 				</ui5-icon>
 			{{/if}}
 
-			<div id="{{_id}}-heading" class="ui5-nli-title" part="heading">
+			<div id="{{_id}}-heading" class="ui5-nli-heading" part="heading">
 				{{heading}}
 			</div>
 		</div>

packages/fiori/src/NotificationListItem.js

@@ -57,19 +57,6 @@ const metadata = {
 			type: Boolean,
 		},
 
-		/**
-		 * Defines if the <code>notification</code> is new or has been already read.
-		 * <br><br>
-		 * <b>Note:</b> if set to <code>false</code> the <code>heading</code> has bold font,
-		 * if set to true - it has a normal font.
-		 * @type {boolean}
-		 * @defaultvalue false
-		 * @public
-		 */
-		read: {
-			type: Boolean,
-		},
-
 		/**
 		 * Defines the state of the <code>heading</code> and <code>description</code>,
 		 * if less or more information is displayed.
@@ -236,11 +223,11 @@ class NotificationListItem extends NotificationListItemBase {
 		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_SHOW_MORE);
 	}
 
-	get overflowBtnTitle() {
+	get overflowBtnAccessibleName() {
 		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_OVERLOW_BTN_TITLE);
 	}
 
-	get closeBtnTitle() {
+	get closeBtnAccessibleName() {
 		return this.i18nBundle.getText(NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);
 	}
 
@@ -257,7 +244,7 @@ class NotificationListItem extends NotificationListItemBase {
 	}
 
 	get headingDOM() {
-		return this.shadowRoot.querySelector(".ui5-nli-title");
+		return this.shadowRoot.querySelector(".ui5-nli-heading");
 	}
 
 	get headingHeight() {

packages/fiori/src/NotificationListItemBase.js

@@ -55,6 +55,19 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines if the <code>notification</code> is new or has been already read.
+		 * <br><br>
+		 * <b>Note:</b> if set to <code>false</code> the <code>heading</code> has bold font,
+		 * if set to true - it has a normal font.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		read: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines if a busy indicator would be displayed over the item.
 		 * @type {boolean}

packages/fiori/src/i18n/messagebundle.properties

@@ -54,6 +54,15 @@ NOTIFICATION_LIST_GROUP_ITEM_TXT=Notification group
 #XTXT: Text for the NotificationListGroupItem counter
 NOTIFICATION_LIST_GROUP_ITEM_COUNTER_TXT=Counter
 
+#XBUT: accessible name for 'Close All' button in the NotificationListGroupItem
+NOTIFICATION_LIST_GROUP_ITEM_CLOSE_BTN_TITLE=Close All
+
+#XBUT: accessible name for 'Toggle' button in the NotificationListGroupItem
+NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_COLLAPSE_TITLE=Collapse Group
+
+#XBUT: accessible name for 'Toggle' button in the NotificationListGroupItem
+NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_BTN_EXPAND_TITLE=Expand Group
+
 #XACT: ARIA announcement for timeline label
 TIMELINE_ARIA_LABEL=Timeline
 

packages/fiori/src/themes/NotificationListGroupItem.css

@@ -9,6 +9,10 @@
 	display: none;
 }
 
+:host([read]) .ui5-nli-group-heading {
+	font-weight: normal;
+}
+
 .ui5-nli-group-root {
 	display: flex;
 	flex-direction: column;
@@ -36,6 +40,7 @@
 	color: var(--sapGroup_TitleTextColor);
 	font-family: "72override", var(--sapFontFamily);
 	font-size: var(--sapFontHeader6Size);
+	font-weight: bold;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;

packages/fiori/src/themes/NotificationListItem.css

@@ -1,7 +1,7 @@
 @import "./NotificationListItemBase.css";
 @import "./NotificationPrioIcon.css";
 
-:host(:not([wrap])) .ui5-nli-title {
+:host(:not([wrap])) .ui5-nli-heading {
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
@@ -15,15 +15,15 @@
 	overflow: hidden;
 }
 
-:host([_show-more-pressed]) .ui5-nli-title {
+:host([_show-more-pressed]) .ui5-nli-heading {
 	-webkit-line-clamp: unset;
 }
 
 :host([_show-more-pressed]) .ui5-nli-description  {
 	-webkit-line-clamp: unset;
 }
 
-:host([read]) .ui5-nli-title {
+:host([read]) .ui5-nli-heading {
 	font-weight: normal;
 }
 
@@ -32,11 +32,11 @@
 	max-height: 32px;
 }
 
-:host(:not([wrap])) .ui5-nli-content--ie .ui5-nli-title {
+:host(:not([wrap])) .ui5-nli-content--ie .ui5-nli-heading {
 	max-height: 32px;
 }
 
-:host([_show-more-pressed]) .ui5-nli-content--ie .ui5-nli-title {
+:host([_show-more-pressed]) .ui5-nli-content--ie .ui5-nli-heading {
 	max-height: inherit;
 }
 
@@ -71,7 +71,7 @@
 	box-sizing: border-box;
 }
 
-.ui5-nli-title {
+.ui5-nli-heading {
 	color: var(--sapGroup_TitleTextColor);
 	font-weight: bold;
 	font-size: var(--sapFontHeader6Size);

packages/fiori/test/pages/NotificationListGroupItem.html

@@ -27,6 +27,7 @@ <h3>Properties</h3>
 		<li>collapsed (default: "false")</li>
 		<li>show-close (default: "false")</li>
 		<li>show-counter (default: "false")</li>
+		<li>read (default: "false")</li>
 	</ul>
 
 	<h3>Slots</h3>
@@ -155,6 +156,7 @@ <h3>Events on ui5-list level</h3>
 			id="busyGroup"
 			show-close
 			show-counter
+			read
 			priority="High"
 			heading="Meetings 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

@@ -113,7 +113,7 @@ describe("Notification List Item Tests", () => {
 	});
 
 	it("tests List Group Item ACC invisible text", () => {
-		const EXPECTED_RESULT = "Notification group High Priority Counter 2";
+		const EXPECTED_RESULT = "Notification group unread High Priority Counter 2";
 		const firstGroupItem = $("#nlgi1");
 		const invisibleText = firstGroupItem.shadow$(".ui5-hidden-text");
 
@@ -122,6 +122,29 @@ describe("Notification List Item Tests", () => {
 			"The invisible text is correct.");
 	});
 
+	it("tests List Group Item aria-expanded aria-label when collapsed and expanded", () => {
+		const groupItem = browser.$("#nlgi3");
+		const goupItemRoot = groupItem.shadow$(".ui5-nli-group-root");
+		const goupItemToggleBtn = groupItem.shadow$(".ui5-nli-group-toggle-btn");
+		const TOGGLE_BUTTON_EXPAND_GROUP = "Expand Group";
+		const TOGGLE_BUTTON_COLLAPSE_GROUP = "Collapse Group";
+
+		// assert
+		assert.strictEqual(goupItemRoot.getAttribute("aria-expanded"), "false",
+			"The aria-expanded value is correct.");
+		assert.strictEqual(goupItemToggleBtn.getAttribute("aria-label"), TOGGLE_BUTTON_EXPAND_GROUP,
+			"The aria-label value is correct.");
+
+		// act
+		goupItemToggleBtn.click();
+
+		// assert
+		assert.strictEqual(goupItemRoot.getAttribute("aria-expanded"), "true",
+			"The aria-expanded value is correct.");
+		assert.strictEqual(goupItemToggleBtn.getAttribute("aria-label"), TOGGLE_BUTTON_COLLAPSE_GROUP,
+			"The aria-label value is correct.");
+	});
+
 	it("tests List Group Item ACC ariaLabelledBy", () => {
 		const firstGroupItem = $("#nlgi1");
 		const firstGroupItemRoot = firstGroupItem.shadow$(".ui5-nli-group-root");