fix(ui5-li-notification): fix aria-level value (#9504)

* fix(ui5-li-notification): fix aria-level value
SAP · Jul 19, 2024 · ca153d0 · ca153d0
1 parent a77cd4b
commit ca153d0
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts
@@ -10,6 +10,7 @@ import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import NotificationListGroupList from "./NotificationListGroupList.js";
 import NotificationListItemBase from "./NotificationListItemBase.js";
+import type NotificationListItem from "./NotificationListItem.js";
 
 // Icons
 import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
@@ -103,10 +104,15 @@ class NotificationListGroupItem extends NotificationListItemBase {
 	 * @public
 	 */
 	@slot({ type: HTMLElement, "default": true })
-	items!: Array<NotificationListItemBase>
+	items!: Array<NotificationListItem>
 
 	onBeforeRendering() {
 		super.onBeforeRendering();
+
+		this.items.forEach(item => {
+			item._ariaLevel = "2";
+		});
+
 		if (this.loading) {
 			this.clearChildBusyIndicator();
 		}

diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs
@@ -6,7 +6,7 @@
 	@click="{{_onclick}}"
 	tabindex="{{forcedTabIndex}}"
 	aria-labelledby="{{ariaLabelledBy}}"
-	aria-level="2"
+	aria-level="{{_ariaLevel}}"
 >
 	{{#if loading}}
 		<span id="{{_id}}-loading" class="ui5-hidden-text">{{loadingText}}</span>

diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts
@@ -261,6 +261,8 @@ class NotificationListItem extends NotificationListItemBase {
 	_descOverflowHeight: number;
 	_onResizeBound: ResizeObserverCallback;
 
+	_ariaLevel : string | undefined;
+
 	constructor() {
 		super();
 

diff --git a/packages/fiori/test/specs/NotificationList.spec.js b/packages/fiori/test/specs/NotificationList.spec.js
@@ -518,3 +518,16 @@ describe("Keyboard navigation", () => {
 	});
 });
 
+describe("Notification List Item Without a Group", () => {
+	before(async () => {
+		await browser.url(`test/pages/NotificationListItem.html`);
+	});
+
+	it("ACC", async () => {
+		const item1 = await browser.$("#notificationListWithMenu [ui5-li-notification]");
+		const item1Root = await item1.shadow$(".ui5-nli-root");
+
+		assert.notOk(await item1Root.getAttribute("aria-level"),  "aria-level is not set");
+	});
+});
+