feat(ui5-side-navigation): add actions and unselectable items

packages/fiori/src/SideNavigation.ts

@@ -587,7 +587,7 @@ class SideNavigation extends UI5Element {
 	}
 
 	_selectItem(item: SideNavigationSelectableItemBase) {
-		if (item.disabled) {
+		if (!item.isSelectable) {
 			return;
 		}
 

packages/fiori/src/SideNavigationItem.ts

@@ -2,11 +2,18 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import jsxRender from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
+import {
+	isLeft,
+	isRight,
+	isSpace,
+	isEnter,
+} from "@ui5/webcomponents-base/dist/Keys.js";
 import type SideNavigationItemBase from "./SideNavigationItemBase.js";
 import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
 import type SideNavigation from "./SideNavigation.js";
 import type SideNavigationSubItem from "./SideNavigationSubItem.js";
+
+// Templates
 import SideNavigationItemTemplate from "./SideNavigationItemTemplate.js";
 
 // Styles
@@ -89,6 +96,10 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 	}
 
 	get _ariaHasPopup() {
+		if (this.inPopover && this.accessibilityAttributes?.hasPopup) {
+			return this.accessibilityAttributes.hasPopup;
+		}
+
 		if (!this.disabled && this.sideNavCollapsed && this.items.length) {
 			return "tree";
 		}
@@ -97,7 +108,7 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 	}
 
 	get _ariaChecked() {
-		if (this.isOverflow) {
+		if (this.isOverflow || this.unselectable) {
 			return undefined;
 		}
 
@@ -142,10 +153,10 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 		return this.selected;
 	}
 
-	_onToggleClick(e: PointerEvent) {
+	_onToggleClick(e: CustomEvent) {
 		e.stopPropagation();
 
-		this.expanded = !this.expanded;
+		this._toggle();
 	}
 
 	_onkeydown(e: KeyboardEvent) {
@@ -159,6 +170,15 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 			return;
 		}
 
+		if (this.unselectable && isSpace(e)) {
+			this._toggle();
+			return;
+		}
+
+		if (this.unselectable && isEnter(e)) {
+			this._toggle();
+		}
+
 		super._onkeydown(e);
 	}
 
@@ -171,6 +191,10 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 	}
 
 	_onclick(e: MouseEvent) {
+		if (this.unselectable) {
+			this._toggle();
+		}
+
 		super._onclick(e);
 	}
 
@@ -201,6 +225,12 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
 	get isSideNavigationItem() {
 		return true;
 	}
+
+	_toggle() {
+		if (this.items.length) {
+			this.expanded = !this.expanded;
+		}
+	}
 }
 
 SideNavigationItem.define();

packages/fiori/src/SideNavigationItemTemplate.tsx

@@ -111,7 +111,6 @@ function TreeItemTemplate(this: SideNavigationItem) {
 					{!!this.items.length &&
 					<Icon class="ui5-sn-item-toggle-icon"
 						name={this.expanded ? navDownArrow : navRightArrow}
-						// @ts-expect-error
 						onClick={this._onToggleClick}
 					/>
 					}
@@ -128,6 +127,7 @@ function TreeItemTemplate(this: SideNavigationItem) {
 					aria-expanded={this._expanded}
 					aria-current={this._ariaCurrent}
 					aria-selected={this.selected}
+					aria-haspopup={this.accessibilityAttributes?.hasPopup}
 					title={this._tooltip}
 					aria-owns={this._groupId}
 				>
@@ -143,7 +143,6 @@ function TreeItemTemplate(this: SideNavigationItem) {
 					{!!this.items.length &&
 					<Icon class="ui5-sn-item-toggle-icon"
 						name={this.expanded ? navDownArrow : navRightArrow}
-						// @ts-expect-error
 						onClick={this._onToggleClick}
 					/>
 					}

packages/fiori/src/SideNavigationPopoverTemplate.tsx

@@ -56,25 +56,31 @@ export default function SideNavigationTemplate(this: SideNavigation) {
 					class="ui5-side-navigation-in-popover"
 				>
 					<SideNavigationItem
+						accessibilityAttributes={this._popoverContents.item.accessibilityAttributes}
 						text={this._popoverContents.item.text}
 						tooltip={this._popoverContents.item._tooltip}
 						href={this._popoverContents.item._href}
 						target={this._popoverContents.item._target}
+						design={this._popoverContents.item.design}
 						disabled={this._popoverContents.item.disabled}
 						expanded={true}
 						_fixed={true}
 						selected={this._popoverContents.item.selected}
+						unselectable={this._popoverContents.item.unselectable}
 						onui5-click={this.handlePopupItemClick}
 						ref={this.captureRef.bind(this._popoverContents.item)}
 					>
 						{this._popoverContents.subItems.map(item =>
 							<SideNavigationSubItem
+								accessibilityAttributes={item.accessibilityAttributes}
 								text={item.text}
 								tooltip={item._tooltip}
 								href={item._href}
 								target={item._target}
+								design={item.design}
 								disabled={item.disabled}
 								selected={item.selected}
+								unselectable={item.unselectable}
 								onui5-click={this.handlePopupItemClick}
 								ref={this.captureRef.bind(item)}
 							/>

packages/fiori/src/SideNavigationSelectableItemBase.ts

@@ -3,10 +3,13 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import SideNavigationItemBase from "./SideNavigationItemBase.js";
+import type SideNavigationItemDesign from "./types/SideNavigationItemDesign.js";
+import type { AccessibilityAttributes } from "@ui5/webcomponents-base/dist/types.js";
+
+type SideNavigationItemAccessibilityAttributes = Pick<AccessibilityAttributes, "hasPopup">;
 
 /**
- * Fired when the component is activated either with a
- * click/tap or by using the [Enter] or [Space] keys.
+ * Fired when the component is activated either with a click/tap or by using the [Enter] or [Space] keys.
  *
  * @public
  */
@@ -83,6 +86,50 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase {
 	@property()
 	target?: string;
 
+	/**
+	 * Item design.
+	 *
+	 * **Note:** Items with "Action" design must not have sub-items.
+	 *
+	 * @public
+	 * @default "Default"
+	 * @since 2.7.0
+	 */
+	@property()
+	design: `${SideNavigationItemDesign}` = "Default";
+
+	/**
+	 * Indicates whether the navigation item is selectable. By default all items are selectable unless specifically marked as unselectable.
+	 *
+	 * When a parent item is marked as unselectable, selecting it will only expand or collapse its sub-items.
+	 * To improve user experience do not mix unselectable parent items with selectable parent items in a single side navigation.
+	 *
+	 *
+	 * **Guidelines**:
+	 * - External links should be unselectable.
+	 * - Items that trigger actions (with design "Action") should be unselectable.
+	 *
+	 * @public
+	 * @default false
+	 * @since 2.7.0
+	 */
+	@property({ type: Boolean })
+	unselectable = false;
+
+	/**
+	 * Defines the additional accessibility attributes that will be applied to the component.
+	 * The following fields are supported:
+	 *
+	 * - **hasPopup**: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button.
+	 * Accepts the following string values: `dialog`, `grid`, `listbox`, `menu` or `tree`.
+	 *
+	 * @public
+	 * @default {}
+	 * @since 2.7.0
+	 */
+	@property({ type: Object })
+	accessibilityAttributes: SideNavigationItemAccessibilityAttributes = {};
+
 	/**
 	 * @private
 	 * @default false
@@ -92,12 +139,16 @@ class SideNavigationSelectableItemBase extends SideNavigationItemBase {
 
 	get ariaRole() {
 		if (this.sideNavCollapsed) {
-			return this.isOverflow ? "menuitem" : "menuitemradio";
+			return this.isOverflow || this.unselectable ? "menuitem" : "menuitemradio";
 		}
 
 		return "treeitem";
 	}
 
+	get isSelectable() {
+		return !this.unselectable && !this.disabled;
+	}
+
 	get _href() {
 		return (!this.disabled && this.href) ? this.href : undefined;
 	}
@@ -189,3 +240,6 @@ export default SideNavigationSelectableItemBase;
 export {
 	isInstanceOfSideNavigationSelectableItemBase,
 };
+export type {
+	SideNavigationItemAccessibilityAttributes,
+};

packages/fiori/src/SideNavigationSubItemTemplate.tsx

@@ -44,6 +44,7 @@ export default function SideNavigationSubItemTemplate(this: SideNavigationSubIte
 					onFocusIn={this._onfocusin}
 					tabIndex={this.effectiveTabIndex ? parseInt(this.effectiveTabIndex) : undefined}
 					aria-current={this._ariaCurrent}
+					aria-haspopup={this.accessibilityAttributes?.hasPopup}
 					aria-selected={this.selected}
 					title={this._tooltip}
 				>

packages/fiori/src/themes/SideNavigationItemBase.css

@@ -28,6 +28,10 @@
 	display: none;
 }
 
+:host([design="Action"]) {
+	color: var(--sapButton_TextColor);
+}
+
 .ui5-sn-item:focus {
 	outline: none;
 }
@@ -138,6 +142,10 @@ and there is an additional border that appears on hover. */
 	padding-inline-end: var(--_ui5_side_navigation_icon_padding_inline_end);
 }
 
+:host([design="Action"]) .ui5-sn-item-icon {
+	color: var(--sapButton_TextColor);
+}
+
 .ui5-sn-item-toggle-icon,
 .ui5-sn-item-external-link-icon {
 	color: var(--_ui5_side_navigation_expand_icon_color);

packages/fiori/src/types/SideNavigationItemDesign.ts

@@ -0,0 +1,24 @@
+/**
+ * SideNavigationItem designs.
+ * @public
+ * @since 2.7.0
+ */
+enum SideNavigationItemDesign {
+	/**
+	 * Design for items that perform navigation, contain navigation child items, or both.
+	 *
+	 * @public
+	 */
+	Default = "Default",
+
+	/**
+	 * Design for items that trigger an action, such as opening a dialog.
+	 *
+	 * **Note:** Items with this design must not have sub-items.
+	 *
+	 * @public
+	 */
+	Action = "Action",
+}
+
+export default SideNavigationItemDesign;

packages/fiori/test/pages/SideNavigation.html

@@ -54,15 +54,23 @@
 				<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
 			</ui5-side-navigation-item>
 			<ui5-side-navigation-item disabled id="item1" text="Home" icon="home" tooltip="Home tooltip"></ui5-side-navigation-item>
+			<ui5-side-navigation-item text="Home (unselectable)" icon="home" unselectable></ui5-side-navigation-item>
+			<ui5-side-navigation-item text="Home (unselectable)" icon="home" unselectable>
+				<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
+				<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
+			</ui5-side-navigation-item>
 
 			<!-- Fixed Items -->
 			<ui5-side-navigation-item id="fixedItem1" slot="fixedItems" text="Useful Links" icon="chain-link" tooltip="Useful links tooltip">
 				<ui5-side-navigation-sub-item id="fixedItem11" text="Vacation Tool" tooltip="Vacation Tool tooltip"></ui5-side-navigation-sub-item>
 				<ui5-side-navigation-sub-item id="fixedItem12" text="HR tool"></ui5-side-navigation-sub-item>
 				<ui5-side-navigation-sub-item text="External Link" href="https://sap.com" target="_blank"></ui5-side-navigation-sub-item>
+				<ui5-side-navigation-sub-item text="External Link (unselectable)" href="https://sap.com" target="_blank" unselectable></ui5-side-navigation-sub-item>
+				<ui5-side-navigation-sub-item text="Quick Create" design="Action" unselectable></ui5-side-navigation-sub-item>
 			</ui5-side-navigation-item>
 			<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
 			<ui5-side-navigation-item slot="fixedItems" text="External Link" icon="chain-link" href="https://sap.com" target="_blank"></ui5-side-navigation-item>
+			<ui5-side-navigation-item slot="fixedItems" text="Quick Create" icon="write-new" design="Action" unselectable id="quickCreate"></ui5-side-navigation-item>
 		</ui5-side-navigation>
 		<div class="inner-content">
 			<div>
@@ -80,9 +88,6 @@
 		</div>
 	</div>
 
-
-
-
 	<script>
 		var sideNavigation = document.querySelector("ui5-side-navigation"),
 			input = document.querySelector("#counter"),
@@ -115,6 +120,10 @@
 			input.value = `${++counter}`;
 		});
 
+		document.getElementById("quickCreate").accessibilityAttributes = {
+			hasPopup: "dialog"
+		};
+
 	</script>
 </body>
 </html>

packages/fiori/test/specs/SideNavigation.spec.js

@@ -225,9 +225,9 @@ describe("Component Behavior", () => {
 
 			// fixed items
 			assert.strictEqual(await sideNavigationFixedTree.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation fixed tree element is correctly set");
-			assert.notExists(await items[8].getAttribute("aria-roledescription"), "Role description of the SideNavigation fixed tree item is not set");
-			assert.strictEqual(await items[8].getAttribute("aria-haspopup"), "tree", "There is 'aria-haspopup' with correct value");
-			assert.notExists(await items[9].getAttribute("aria-haspopup"), "There is no 'aria-haspopup'");
+			assert.notExists(await items[10].getAttribute("aria-roledescription"), "Role description of the SideNavigation fixed tree item is not set");
+			assert.strictEqual(await items[10].getAttribute("aria-haspopup"), "tree", "There is 'aria-haspopup' with correct value");
+			assert.notExists(await items[11].getAttribute("aria-haspopup"), "There is no 'aria-haspopup'");
 
 			// popup
 			await browser.$("#item2").click();

packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx

@@ -1,8 +1,16 @@
 import Basic from "../../../_samples/fiori/SideNavigation/Basic/Basic.md";
+import QuickAction from "../../../_samples/fiori/SideNavigation/QuickAction/QuickAction.md";
 
 <%COMPONENT_OVERVIEW%>
 
 ## Basic Sample
 <Basic />
 
-<%COMPONENT_METADATA%>
+<%COMPONENT_METADATA%>
+
+## More Samples
+
+### Quick Action
+Quick action items allow for providing access to frequent functionality.
+
+<QuickAction />

packages/website/docs/_samples/fiori/SideNavigation/Basic/main.js

@@ -1,5 +1,6 @@
 import "@ui5/webcomponents-fiori/dist/SideNavigation.js";
 import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
+import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";
 import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
 import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";