fix(ui5-notification-list): improve keyboard accessibility for the "More" button

packages/fiori/cypress/specs/NotificationList.cy.tsx

@@ -0,0 +1,154 @@
+import NotificationList from "../../src/NotificationList.js";
+import NotificationListGroupItem from "../../src/NotificationListGroupItem.js";
+import NotificationListItem from "../../src/NotificationListItem.js";
+
+function Sample() {
+	return <NotificationList id="nl1">
+		<NotificationListGroupItem
+			title-text="Group 1"
+			id="group1"
+			growing="Button">
+			<NotificationListItem id="item11" show-close>
+				Group 1 Item 1
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 1 Item 2
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 1 Item 3
+			</NotificationListItem>
+			<NotificationListItem id="item1last" show-close>
+				Group 1 Item 4
+			</NotificationListItem>
+		</NotificationListGroupItem>
+		<NotificationListGroupItem
+			id="group2"
+			title-text="Group 2">
+			<NotificationListItem id="item21" show-close>
+				Group 2 Item 1
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 2 Item 2
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 2 Item 3
+			</NotificationListItem>
+			<NotificationListItem id="item2last" show-close>
+				Group 2 Item 4
+			</NotificationListItem>
+		</NotificationListGroupItem>
+		<NotificationListGroupItem
+			growing="Button"
+			title-text="Group 3">
+			<NotificationListItem show-close>
+				Group 3 Item 1
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 3 Item 2
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 3 Item 3
+			</NotificationListItem>
+			<NotificationListItem show-close>
+				Group 3 Item 4
+			</NotificationListItem>
+		</NotificationListGroupItem>
+	</NotificationList>;
+}
+
+describe("Keyboard Navigation", () => {
+	beforeEach(() => {
+		cy.mount(<Sample />);
+	});
+
+	it("tests Arrows and Space keys", () => {
+		cy.get("#group1")
+			.shadow()
+			.find("[ui5-notification-group-list]")
+			.shadow()
+			.find("[ui5-busy-indicator] .ui5-growing-button-inner")
+			.as("growingButton");
+
+		cy.realPress("Tab");
+		cy.get("#item11").realClick();
+		cy.get("#item11").should("be.focused");
+
+		cy.realPress("ArrowDown");
+		cy.realPress("ArrowDown");
+		cy.realPress("ArrowDown");
+		cy.get("#item1last").should("be.focused");
+
+		cy.realPress("ArrowDown");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("ArrowDown");
+		cy.get("#group2").should("be.focused");
+
+		cy.realPress("ArrowDown");
+		cy.get("#item21").should("be.focused");
+
+		cy.realPress("ArrowUp");
+		cy.get("#group2").should("be.focused");
+
+		cy.realPress("ArrowUp");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("ArrowUp");
+		cy.get("#item1last").should("be.focused");
+
+		cy.realPress("ArrowRight");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("ArrowRight");
+		cy.get("#group2").should("be.focused");
+
+		cy.realPress("ArrowUp");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("Space");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("ArrowLeft");
+		cy.get("#item1last").should("be.focused");
+	});
+
+	it("tests Home and End", () => {
+		cy.get("#group1")
+			.shadow()
+			.find("[ui5-notification-group-list]")
+			.shadow()
+			.find("[ui5-busy-indicator] .ui5-growing-button-inner")
+			.as("growingButton");
+
+		cy.realPress("Tab");
+		cy.get("#item11").realClick();
+		cy.get("#item11").should("be.focused");
+
+		cy.realPress("End");
+		cy.get("#item1last").should("be.focused");
+
+		cy.realPress("End");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("End");
+		cy.get("@growingButton").should("be.focused");
+
+		cy.realPress("ArrowDown");
+		cy.realPress("End");
+		cy.get("#item2last").should("be.focused");
+
+		cy.realPress("End");
+		cy.get("#item2last").should("be.focused");
+
+		cy.realPress("Home");
+		cy.realPress("ArrowUp");
+		cy.get("#group2").should("be.focused");
+
+		cy.realPress("ArrowUp");
+		cy.realPress("Home");
+		cy.get("#item11").should("be.focused");
+
+		cy.realPress("Home");
+		cy.get("#item11").should("be.focused");
+	});
+});

packages/fiori/src/NotificationListGroupItem.ts

@@ -214,9 +214,9 @@ class NotificationListGroupItem extends NotificationListItemBase {
 		this.fireDecoratorEvent("load-more");
 	}
 
-	get loadMoreButton() {
+	getGrowingButton() {
 		const innerList = this.getDomRef()?.querySelector("[ui5-notification-group-list]") as NotificationListGroupList;
-		return innerList.getDomRef()?.querySelector(".ui5-growing-button-inner") as HTMLElement;
+		return innerList.getGrowingButton();
 	}
 
 	async _onkeydown(e: KeyboardEvent) {
@@ -225,6 +225,10 @@ class NotificationListGroupItem extends NotificationListItemBase {
 			return;
 		}
 
+		if (this.getGrowingButton()?.matches(":focus")) {
+			return;
+		}
+
 		await super._onkeydown(e);
 
 		const space = isSpace(e);

packages/fiori/src/NotificationListGroupItemTemplate.tsx

@@ -1,4 +1,3 @@
-import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
 import type NotificationListGroupItem from "./NotificationListGroupItem.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import NotificationListGroupList from "./NotificationListGroupList.js";
@@ -22,51 +21,46 @@ export default function NotificationListItemTemplate(this: NotificationListGroup
 					{this.loadingText}
 				</span>
 			)}
-			<BusyIndicator
-				delay={this.loadingDelay}
-				active={this.loading}
-				inert={this.loading}
-				class="ui5-nli-loading"
-			>
-				<div class="ui5-nli-group-content-wrapper">
+			<div class="ui5-nli-group-content-wrapper">
+				<div
+					class={{
+						"ui5-nli-group-header": true,
+						"ui5-nli-group-header-expanded": this._expanded,
+					}}
+					onClick={this._onHeaderToggleClick}
+					onKeyDown={this._onkeydown}
+					role="button"
+					aria-expanded={this._expanded}
+					aria-controls={`${this._id}-notificationsList`}
+					title={this.toggleIconAccessibleName}>
+					<Icon
+						name={this.groupCollapsedIcon}
+						class="ui5-nli-group-toggle-icon"
+						mode="Decorative"
+					/>
 					<div
-						class={{
-							"ui5-nli-group-header": true,
-							"ui5-nli-group-header-expanded": this._expanded,
-						}}
-						onClick={this._onHeaderToggleClick}
-						onKeyDown={this._onkeydown}
-						role="button"
-						aria-expanded={this._expanded}
-						aria-controls={`${this._id}-notificationsList`}
-						title={this.toggleIconAccessibleName}>
-						<Icon
-							name={this.groupCollapsedIcon}
-							class="ui5-nli-group-toggle-icon"
-							mode="Decorative"
-						/>
-						<div
-							id={`${this._id}-title-text`}
-							class="ui5-nli-group-title-text"
-							part="title-text"
-							role="heading"
-							aria-level={2}
-						>
-							{this.titleText}
-						</div>
-						<div class="ui5-nli-group-divider"></div>
-					</div>
-					<NotificationListGroupList
-						id={`${this._id}-notificationsList`}
-						class="ui5-nli-group-items"
-						accessibleNameRef={`${this._id}-title-text`}
-						growing={this.growing}
-						onLoadMore={this._onLoadMore}
+						id={`${this._id}-title-text`}
+						class="ui5-nli-group-title-text"
+						part="title-text"
+						role="heading"
+						aria-level={2}
 					>
-						<slot></slot>
-					</NotificationListGroupList>
+						{this.titleText}
+					</div>
+					<div class="ui5-nli-group-divider"></div>
 				</div>
-			</BusyIndicator>
+				<NotificationListGroupList
+					id={`${this._id}-notificationsList`}
+					class="ui5-nli-group-items"
+					accessibleNameRef={`${this._id}-title-text`}
+					growing={this.growing}
+					loading={this.loading}
+					loadingDelay={this.loadingDelay}
+					onLoadMore={this._onLoadMore}
+				>
+					<slot></slot>
+				</NotificationListGroupList>
+			</div>
 		</li>
 	);
 }

packages/fiori/src/NotificationListGroupList.ts

@@ -1,6 +1,7 @@
 import List from "@ui5/webcomponents/dist/List.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import type ListItemBase from "@ui5/webcomponents/dist/ListItemBase.js";
+import { isSpace } from "@ui5/webcomponents-base/Keys.js";
 
 /**
  * @class
@@ -35,9 +36,21 @@ class NotificationListGroupList extends List {
 		e.stopImmediatePropagation();
 	}
 
+	_onkeydown() {
+
+	}
+
 	focusItem(item: ListItemBase) {
 		item.focus();
 	}
+
+	_onLoadMoreKeydown(e: KeyboardEvent) {
+		if (isSpace(e)) {
+			e.stopImmediatePropagation();
+		}
+
+		super._onLoadMoreKeydown(e);
+	}
 }
 
 NotificationListGroupList.define();