fix(ui5-notification-list): improved accessibility (#9070)

* fix(ui5-notification-list): enhansed accessibility - read state is announced after the title (before it was at the end of the notification) - "notification" word is removed from the description - "important" should be announced before the title and the status text, since it is valuable information for the user and should be in the begining - status icon in the title should have tooltip - there should be "loading" anouncement (after the title) for items, which are in loading state - ACC attributes are added for "More"/"Less" link, following the example of (openui5) sap.m.ExpandableText - tooltip for the expand/collapse arrow in the group header is moved to the whole header - tooltip for the group header is changed to static "Expand/Collapse" (doesn't change depending on the expand state of the group), following the example of ui5-panel component - samples in website playground fixed (there was a bug, that the popover doesn't open in the notifcations-in-shellbar sample) - tests added
SAP · May 30, 2024 · 5e62d4a · 5e62d4a
1 parent 34b065b
commit 5e62d4a
Show file tree

Hide file tree

Showing 13 changed files with 210 additions and 54 deletions.
diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/packages/fiori/src/NotificationListGroupItem.hbs
@@ -12,11 +12,10 @@
 		@keydown="{{_onkeydown}}"
 		role="button"
 		aria-expanded="{{_ariaExpanded}}"
-		aria-controls="{{_id}}-notificationsList">
+		aria-controls="{{_id}}-notificationsList"
+		title="{{toggleIconAccessibleName}}">
 		<ui5-icon
 			name={{groupCollapsedIcon}}
-			show-tooltip="true"
-			accessible-name={{toggleIconAccessibleName}}
 			class="ui5-nli-group-toggle-icon"
 			mode="Decorative"
 		></ui5-icon>
@@ -29,6 +28,10 @@
 			{{titleText}}
 		</div>
 
+		{{#if isLoading}}
+			<span id="{{_id}}-loading" class="ui5-hidden-text">{{loadingText}}</span>
+		{{/if}}
+
 		<div class="ui5-nli-group-divider"></div>
 	</div>
 

diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts
@@ -21,7 +21,6 @@ import {
 	NOTIFICATION_LIST_GROUP_COLLAPSED,
 	NOTIFICATION_LIST_GROUP_EXPANDED,
 	NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_ICON_COLLAPSE_TITLE,
-	NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_ICON_EXPAND_TITLE,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Templates
@@ -134,10 +133,6 @@ class NotificationListGroupItem extends NotificationListItemBase {
 	}
 
 	get toggleIconAccessibleName() {
-		if (this.collapsed) {
-			return NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_ICON_EXPAND_TITLE);
-		}
-
 		return NotificationListGroupItem.i18nFioriBundle.getText(NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_ICON_COLLAPSE_TITLE);
 	}
 
@@ -159,8 +154,17 @@ class NotificationListGroupItem extends NotificationListItemBase {
 
 	get ariaLabelledBy() {
 		const id = this._id;
+		const ids = [];
+
+		if (this.isLoading) {
+			ids.push(`${id}-loading`);
+		}
+
+		if (this.hasTitleText) {
+			ids.push(`${id}-title-text`);
+		}
 
-		return this.hasTitleText ? `${id}-title-text` : "";
+		return ids.join(" ");
 	}
 
 	get _ariaExpanded() {

diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs
@@ -6,14 +6,13 @@
 	@click="{{_onclick}}"
 	tabindex="{{forcedTabIndex}}"
 	aria-labelledby="{{ariaLabelledBy}}"
-	aria-describedby="{{ariaDescribedBy}}"
 	aria-level="2"
 >
 
 	<div class="{{contentClasses}}">
 
 			{{#if hasImportance}}
-				<ui5-tag class="ui5-nli-importance" design="Set2" color-scheme="2">
+				<ui5-tag id="{{_id}}-importance" class="ui5-nli-importance" design="Set2" color-scheme="2">
 					<ui5-icon name="high-priority" slot="icon"></ui5-icon>
 					{{importanceText}}
 				</ui5-tag>
@@ -23,6 +22,8 @@
 				<ui5-icon
 					class="ui5-state-icon"
 					name="{{statusIconName}}"
+					show-tooltip="true"
+					accessible-name={{stateText}}
 					design="{{statusIconDesign}}">
 				</ui5-icon>
 			{{/if}}
@@ -33,6 +34,12 @@
 			</div>
 		</div>
 
+		{{#if isLoading}}
+			<span id="{{_id}}-loading" class="ui5-hidden-text">{{loadingText}}</span>
+		{{/if}}
+
+		<span id="{{_id}}-read" class="ui5-hidden-text">{{readText}}</span>
+
 		{{#if hasDesc}}
 			<div id="{{_id}}-description" class="ui5-nli-description">
 				<slot></slot>
@@ -53,12 +60,14 @@
 				@ui5-click="{{_onShowMoreClick}}"
 				href="#" {{!--without href ENTER does not trigger click --}}
 				showMore-btn
+				accessible-name="{{moreLinkAccessibleName}}"
+				accessible-role="Button"
+				.accessibilityAttributes={{accInfoLink.accessibilityAttributes}}
 			>
 				{{showMoreText}}
 			</ui5-link>
 		</div>
 
-		<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accInvisibleText}}</span>
 	</div>
 
 	<div class="ui5-nli-actions">
@@ -69,7 +78,7 @@
 				@click="{{_onBtnMenuClick}}"
 				class="ui5-nli-menu-btn"
 				tooltip="{{menuBtnAccessibleName}}"
-				.accessibilityAttributes={{accInfo.accessibilityAttributes}}
+				.accessibilityAttributes={{accInfoButton.accessibilityAttributes}}
 			></ui5-button>
 		{{/if}}
 		{{#if showClose}}

diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts
@@ -31,7 +31,6 @@ import "@ui5/webcomponents-icons/dist/message-warning.js";
 
 // Texts
 import {
-	NOTIFICATION_LIST_ITEM_TXT,
 	NOTIFICATION_LIST_ITEM_READ,
 	NOTIFICATION_LIST_ITEM_UNREAD,
 	NOTIFICATION_LIST_ITEM_SHOW_MORE,
@@ -41,6 +40,8 @@ import {
 	NOTIFICATION_LIST_ITEM_NEGATIVE_STATUS_TXT,
 	NOTIFICATION_LIST_ITEM_CRITICAL_STATUS_TXT,
 	NOTIFICATION_LIST_ITEM_MENU_BTN_TITLE,
+	NOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_FULL,
+	NOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_TRUNCATE,
 	NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE,
 	NOTIFICATION_LIST_ITEM_IMPORTANT_TXT,
 } from "./generated/i18n/i18n-defaults.js";
@@ -313,6 +314,10 @@ class NotificationListItem extends NotificationListItemBase {
 		return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MENU_BTN_TITLE);
 	}
 
+	get moreLinkAccessibleName() {
+		return this._showMorePressed ? NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_TRUNCATE) : NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_FULL);
+	}
+
 	get closeBtnAccessibleName() {
 		return NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE);
 	}
@@ -374,10 +379,20 @@ class NotificationListItem extends NotificationListItemBase {
 		const id = this._id;
 		const ids = [];
 
+		if (this.hasImportance) {
+			ids.push(`${id}-importance`);
+		}
+
 		if (this.hasTitleText) {
 			ids.push(`${id}-title-text`);
 		}
 
+		if (this.isLoading) {
+			ids.push(`${id}-loading`);
+		}
+
+		ids.push(`${id}-read`);
+
 		if (this.hasDesc) {
 			ids.push(`${id}-description`);
 		}
@@ -389,11 +404,6 @@ class NotificationListItem extends NotificationListItemBase {
 		return ids.join(" ");
 	}
 
-	get ariaDescribedBy() {
-		const id = this._id;
-		return `${id}-invisibleText`;
-	}
-
 	get itemClasses() {
 		const classes = ["ui5-nli-root", "ui5-nli-focusable"];
 
@@ -445,22 +455,26 @@ class NotificationListItem extends NotificationListItemBase {
 		return "";
 	}
 
-	get accInvisibleText() {
-		const notificationText = NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_TXT);
-		const readText = this.read ? NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ) : NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);
-		const importanceText = this.importanceText;
-
-		return `${notificationText} ${importanceText} ${readText}`;
+	get readText() {
+		return this.read ? NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_READ) : NotificationListItem.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_UNREAD);
 	}
 
-	get accInfo() {
+	get accInfoButton() {
 		return {
 			accessibilityAttributes: {
 				hasPopup: "menu",
 			},
 		};
 	}
 
+	get accInfoLink() {
+		return {
+			accessibilityAttributes: {
+				expanded: this._showMorePressed,
+			},
+		};
+	}
+
 	get menuButtonDOM() {
 		return this.shadowRoot!.querySelector<HTMLElement>(".ui5-nli-menu-btn")!;
 	}

diff --git a/packages/fiori/src/NotificationListItemBase.ts b/packages/fiori/src/NotificationListItemBase.ts
@@ -9,6 +9,11 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getEventMark } from "@ui5/webcomponents-base/dist/MarkedEvents.js";
 import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
 
+// Texts
+import {
+	NOTIFICATION_LIST_ITEM_LOADING,
+} from "./generated/i18n/i18n-defaults.js";
+
 /**
  * @class
  *
@@ -61,6 +66,14 @@ class NotificationListItemBase extends ListItemBase {
 		return !!this.titleText.length;
 	}
 
+	get loadingText() {
+		return NotificationListItemBase.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_LOADING);
+	}
+
+	get isLoading() {
+		return this.loading;
+	}
+
 	/**
 	 * Event handlers
 	 */

diff --git a/packages/fiori/src/i18n/messagebundle.properties b/packages/fiori/src/i18n/messagebundle.properties
@@ -50,9 +50,6 @@ FCL_END_COLUMN_COLLAPSE_BUTTON_TOOLTIP=Collapse the last column
 #XTXT: Accessible name for the NotificationList
 NOTIFICATION_LIST_ACCESSIBLE_NAME=Notifications
 
-#XTXT: Text for the NotificationListGroupItem
-NOTIFICATION_LIST_ITEM_TXT=Notification
-
 #XTXT: Text for the 'ShowMore' link in the NotificationListItem
 NOTIFICATION_LIST_ITEM_SHOW_MORE=More
 
@@ -62,9 +59,18 @@ NOTIFICATION_LIST_ITEM_SHOW_LESS=Less
 #XBUT: Tooltip text for 'Overflow' button in the NotificationListItem, that opens a menu with actions
 NOTIFICATION_LIST_ITEM_MENU_BTN_TITLE=Actions
 
+#XBUT: Label text for 'More' link in the NotificationListItem, that shows the full texts of the title and the description, if truncated
+NOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_FULL=More button. Show the full texts
+
+#XBUT: Label text for 'More' link in the NotificationListItem, that truncates the texts (title and description)
+NOTIFICATION_LIST_ITEM_MORE_LINK_LABEL_TRUNCATE=Less button. Show the texts with truncation
+
 #XBUT: Tooltip text for 'Close' button in the NotificationListItem
 NOTIFICATION_LIST_ITEM_CLOSE_BTN_TITLE=Close
 
+#XTXT: Text for the NotificationListItem "loading" state
+NOTIFICATION_LIST_ITEM_LOADING=loading
+
 #XTXT: Text for the NotificationListItem "read" state
 NOTIFICATION_LIST_ITEM_READ=read
 
@@ -87,10 +93,7 @@ NOTIFICATION_LIST_GROUP_ITEM_TXT=Notification group
 NOTIFICATION_LIST_GROUP_ITEM_COUNTER_TXT=Counter
 
 #XBUT: accessible name for 'Toggle' icon in the NotificationListGroupItem
-NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_ICON_COLLAPSE_TITLE=Collapse
-
-#XBUT: accessible name for 'Toggle' icon in the NotificationListGroupItem
-NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_ICON_EXPAND_TITLE=Expand
+NOTIFICATION_LIST_GROUP_ITEM_TOGGLE_ICON_COLLAPSE_TITLE=Expand/Collapse
 
 #XTXT: The state of the NotificationListGroupItem
 NOTIFICATION_LIST_GROUP_COLLAPSED=Collapsed

diff --git a/packages/fiori/test/pages/NotificationListGroupItem.html b/packages/fiori/test/pages/NotificationListGroupItem.html
@@ -186,8 +186,6 @@
 	<ui5-notification-list id="ACCtestGroup">
 
 		<ui5-li-notification-group
-			show-close
-			show-counter
 			title-text="Today"
 		>
 			<ui5-li-notification
@@ -229,8 +227,6 @@
 			</ui5-li-notification>
 		</ui5-li-notification-group>
 		<ui5-li-notification-group
-			show-close
-			show-counter
 			title-text="Yesterday"
 			collapsed="true"
 		>
@@ -268,6 +264,32 @@
 
 			</ui5-li-notification>
 		</ui5-li-notification-group>
+
+		<ui5-li-notification-group
+			loading
+			title-text="Last week"
+		>
+			<ui5-li-notification
+				importance="Important"
+				loading
+				title-text="Message 1"
+				state="Positive"
+				importance="Important"
+			>
+				Text with details.
+				<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
+
+				<span slot="footnotes">Office</span>
+				<span slot="footnotes">3 Days</span>
+
+				<ui5-notification-action icon="accept" text="Accept-deprecated" slot="actions"></ui5-notification-action>
+
+				<ui5-menu slot="menu">
+					<ui5-menu-item icon="accept" text="Accept"></ui5-menu-item>
+					<ui5-menu-item icon="message-error" text="Reject"></ui5-menu-item>
+				</ui5-menu>
+			</ui5-li-notification>
+		</ui5-li-notification-group>
 	</ui5-notification-list>
 	<ui5-button design="Transparent">Tab stop</ui5-button>
 

diff --git a/packages/fiori/test/pages/NotificationList_test_page.html b/packages/fiori/test/pages/NotificationList_test_page.html
@@ -74,6 +74,7 @@
 
 				<ui5-li-notification
 					id="nli2"
+					read
 					show-close
 					title-text="New order #2202"
 					state="Critical"
@@ -168,6 +169,32 @@
 					</ui5-menu>
 				</ui5-li-notification>
 			</ui5-li-notification-group>
+
+			<ui5-li-notification-group
+			id="nlgi4"
+			title-text="Collapsed loading"
+			collapsed
+			loading
+		>
+			<ui5-li-notification
+				id="nli5"
+				wrapping-type="Normal"
+				show-close
+				title-text="New payment #2900"
+				state="Negative"
+			>
+				And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
+				<ui5-avatar icon="employee" size="XS" slot="avatar"></ui5-avatar>
+
+				<span slot="footnotes">Office Notifications</span>
+				<span slot="footnotes">3 Days</span>
+
+				<ui5-menu slot="menu">
+					<ui5-menu-item icon="accept" text="Accept"></ui5-menu-item>
+					<ui5-menu-item icon="message-error" text="Reject"></ui5-menu-item>
+				</ui5-menu>
+			</ui5-li-notification>
+		</ui5-li-notification-group>
 		</ui5-notification-list>
 	</div>
 	<br >