fix(ui5-li-notification): enhance accessibility (#9192)

- the "More"/"Less" button (link) is not read when focusing the notification item. Now the "More"/"Less" button is announced only when the focus is on it. - “tag” word before “Important” is not removed since it comes from the ui5-tag component and needs to be announced fixes #9161
SAP · Jun 14, 2024 · cc34cea · cc34cea
1 parent ced0f35
commit cc34cea
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 12 deletions.
diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs
@@ -46,14 +46,15 @@
 			</div>
 		{{/if}}
 
-		<div id="{{_id}}-footer" class="ui5-nli-footer">
-			{{#each footerItems}}
-				<slot name="{{slotName}}"></slot>
-				{{#if showDivider}}
-					<div class="ui5-nli-footer-divider" aria-hidden="true">·</div>
-				{{/if}}
-			{{/each}}
-
+		<div class="ui5-nli-footer">
+			<div id="{{_id}}-footnotes" class="ui5-nli-footnotes">
+				{{#each footerItems}}
+					<slot name="{{slotName}}"></slot>
+					{{#if showDivider}}
+						<div class="ui5-nli-footer-divider" aria-hidden="true">·</div>
+					{{/if}}
+				{{/each}}
+			</div>
 			<ui5-link
 				class="ui5-nli-footer-showMore"
 				?hidden="{{hideShowMore}}"

diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts
@@ -399,7 +399,7 @@ class NotificationListItem extends NotificationListItemBase {
 		}
 
 		if (this.hasFootNotes) {
-			ids.push(`${id}-footer`);
+			ids.push(`${id}-footnotes`);
 		}
 
 		return ids.join(" ");

diff --git a/packages/fiori/src/themes/NotificationListItem.css b/packages/fiori/src/themes/NotificationListItem.css
@@ -159,6 +159,10 @@
 	margin-inline: 0.5rem;
 }
 
+.ui5-nli-footnotes {
+	display: flex;
+}
+
 .ui5-nli-footer-showMore {
 	margin-inline-start: 1rem;
 }

diff --git a/packages/fiori/test/specs/NotificationList.spec.js b/packages/fiori/test/specs/NotificationList.spec.js
@@ -223,21 +223,21 @@ describe("Notification List Item Tests", () => {
 		const titleTextId = `${await firstItem.getProperty("_id")}-title-text`;
 		const readId = `${await firstItem.getProperty("_id")}-read`;
 		const descriptionId = `${await firstItem.getProperty("_id")}-description`;
-		const footerId = `${await firstItem.getProperty("_id")}-footer`;
+		const footerId = `${await firstItem.getProperty("_id")}-footnotes`;
 		const EXPECTED_ARIA_LABELLED_BY = `${titleTextId} ${readId} ${descriptionId} ${footerId}`;
 
 		const importantId3 = `${await thirdItem.getProperty("_id")}-importance`;
 		const titleTextId3 = `${await thirdItem.getProperty("_id")}-title-text`;
 		const readId3 = `${await thirdItem.getProperty("_id")}-read`;
 		const descriptionId3 = `${await thirdItem.getProperty("_id")}-description`;
-		const footerId3 = `${await thirdItem.getProperty("_id")}-footer`;
+		const footerId3 = `${await thirdItem.getProperty("_id")}-footnotes`;
 		const EXPECTED_ARIA_LABELLED_BY3 = `${importantId3} ${titleTextId3} ${readId3} ${descriptionId3} ${footerId3}`;
 
 		const loadingId4 = `${await loadingItem.getProperty("_id")}-loading`;
 		const titleTextId4 = `${await loadingItem.getProperty("_id")}-title-text`;
 		const readId4 = `${await loadingItem.getProperty("_id")}-read`;
 		const descriptionId4 = `${await loadingItem.getProperty("_id")}-description`;
-		const footerId4 = `${await loadingItem.getProperty("_id")}-footer`;
+		const footerId4 = `${await loadingItem.getProperty("_id")}-footnotes`;
 		const EXPECTED_ARIA_LABELLED_BY4 = `${titleTextId4} ${loadingId4} ${readId4} ${descriptionId4} ${footerId4}`;
 
 		// assert