From cc34cea9d06babbcb44a1edd21e99becf637c64f Mon Sep 17 00:00:00 2001
From: Georgieva <lidiya.georgieva@sap.com>
Date: Fri, 14 Jun 2024 09:09:06 +0300
Subject: [PATCH] fix(ui5-li-notification): enhance accessibility (#9192)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 packages/fiori/src/NotificationListItem.hbs     | 17 +++++++++--------
 packages/fiori/src/NotificationListItem.ts      |  2 +-
 .../fiori/src/themes/NotificationListItem.css   |  4 ++++
 .../fiori/test/specs/NotificationList.spec.js   |  6 +++---
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs
index ce2287add7d9..87b6be67be58 100644
--- 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
index 369748c377fe..0cd8174fe8d7 100644
--- 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
index de5c9fc4915b..be896a099865 100644
--- 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
index 1290d663c6f8..6b49a3d262a7 100644
--- 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