@ui5/webcomponents-fiori 0.0.0-e818f286e → 0.0.0-ee3bbe46b

package/src/ShellBar.js

@@ -46,7 +46,7 @@ const metadata = {
 	tag: "ui5-shellbar",
 	languageAware: true,
 	fastNavigation: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.ShellBar.prototype */ {
 
 		/**
 		 * Defines the <code>primaryTitle</code>.
@@ -115,6 +115,17 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines, if the Search Field would be displayed when there is a valid <code>searchField</code> slot.
+		 * <br><b>Note:</b> By default the Search Field is not displayed.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		showSearchField: {
+			type: Boolean,
+		},
+
 		/**
 		 * An object of strings that defines additional accessibility roles for further customization.
 		 *
@@ -152,13 +163,6 @@ const metadata = {
 			type: String,
 		},
 
-		/**
-		 * @private
-		 */
-		showSearchField: {
-			type: Boolean,
-		},
-
 		/**
 		 * @private
 		 */
@@ -201,14 +205,14 @@ const metadata = {
 		},
 	},
 	managedSlots: true,
-	slots: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.ShellBar.prototype */ {
 		/**
 		 * Defines the <code>ui5-shellbar</code> aditional items.
 		 * <br><br>
 		 * <b>Note:</b>
 		 * You can use the &nbsp;&lt;ui5-shellbar-item>&lt;/ui5-shellbar-item>.
 		 *
-		 * @type {sap.ui.webcomponents.fiori.IShellBarItem[]}
+		 * @type {sap.ui.webc.fiori.IShellBarItem[]}
 		 * @slot items
 		 * @public
 		 */
@@ -224,7 +228,7 @@ const metadata = {
 		 *
 		 * Note: We recommend not using the <code>size</code> attribute of <code>ui5-avatar</code> because
 		 * it should have specific size by design in the context of <code>ui5-shellbar</code> profile.
-		 * @type {sap.ui.webcomponents.main.IAvatar}
+		 * @type {sap.ui.webc.main.IAvatar}
 		 * @slot
 		 * @since 1.0.0-rc.6
 		 * @public
@@ -236,7 +240,7 @@ const metadata = {
 		/**
 		 * Defines the logo of the <code>ui5-shellbar</code>.
 		 * For example, you can use <code>ui5-avatar</code> or <code>img</code> elements as logo.
-		 * @type {sap.ui.webcomponents.main.IAvatar}
+		 * @type {sap.ui.webc.main.IAvatar}
 		 * @slot
 		 * @since 1.0.0-rc.8
 		 * @public
@@ -251,7 +255,7 @@ const metadata = {
 		 * <b>Note:</b>
 		 * You can use the &nbsp;&lt;ui5-li>&lt;/ui5-li> and its ancestors.
 		 *
-		 * @type {sap.ui.webcomponents.main.IListItem[]}
+		 * @type {sap.ui.webc.main.IListItem[]}
 		 * @slot
 		 * @since 0.10
 		 * @public
@@ -263,7 +267,7 @@ const metadata = {
 		/**
 		 * Defines the <code>ui5-input</code>, that will be used as a search field.
 		 *
-		 * @type {sap.ui.webcomponents.main.IInput}
+		 * @type {sap.ui.webc.main.IInput}
 		 * @slot
 		 * @public
 		 */
@@ -276,7 +280,7 @@ const metadata = {
 		 * We encourage this slot to be used for a back or home button.
 		 * It gets overstyled to match ShellBar's styling.
 		 *
-		 * @type {sap.ui.webcomponents.main.IButton}
+		 * @type {sap.ui.webc.main.IButton}
 		 * @slot
 		 * @public
 		 */
@@ -284,13 +288,13 @@ const metadata = {
 			type: HTMLElement,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.ShellBar.prototype */ {
 		/**
 		 *
 		 * Fired, when the notification icon is activated.
 		 *
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#notifications-click
+		 * @event sap.ui.webc.fiori.ShellBar#notifications-click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
@@ -304,7 +308,7 @@ const metadata = {
 		/**
 		 * Fired, when the profile slot is present.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#profile-click
+		 * @event sap.ui.webc.fiori.ShellBar#profile-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
 		 */
@@ -318,7 +322,7 @@ const metadata = {
 		 * Fired, when the product switch icon is activated.
 		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#product-switch-click
+		 * @event sap.ui.webc.fiori.ShellBar#product-switch-click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @public
@@ -332,7 +336,7 @@ const metadata = {
 		/**
 		 * Fired, when the logo is activated.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#logo-click
+		 * @event sap.ui.webc.fiori.ShellBar#logo-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
@@ -346,7 +350,7 @@ const metadata = {
 		/**
 		 * Fired, when the co pilot is activated.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#co-pilot-click
+		 * @event sap.ui.webc.fiori.ShellBar#co-pilot-click
 		 * @param {HTMLElement} targetRef dom ref of the activated element
 		 * @since 0.10
 		 * @public
@@ -361,7 +365,7 @@ const metadata = {
 		 * Fired, when a menu item is activated
 		 * <b>Note:</b> You can prevent closing of overflow popover by calling <code>event.preventDefault()</code>.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBar#menu-item-click
+		 * @event sap.ui.webc.fiori.ShellBar#menu-item-click
 		 * @param {HTMLElement} item DOM ref of the activated list item
 		 * @since 0.10
 		 * @public
@@ -416,8 +420,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.ShellBar
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.ShellBar
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-shellbar
  * @appenddocs ShellBarItem
  * @public
@@ -488,7 +492,7 @@ class ShellBar extends UI5Element {
 
 				if (this.hasMenuItems) {
 					const menuPopover = await this._getMenuPopover();
-					menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
+					menuPopover.showAt(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"), true);
 				}
 			},
 		};
@@ -525,6 +529,9 @@ class ShellBar extends UI5Element {
 
 	_menuPopoverBeforeOpen() {
 		this._menuPopoverExpanded = true;
+		if (this.menuPopover.content && this.menuPopover.content.length) {
+			this.menuPopover.content[0].focusFirstItem();
+		}
 	}
 
 	_menuPopoverAfterClose() {
@@ -533,6 +540,9 @@ class ShellBar extends UI5Element {
 
 	_overflowPopoverBeforeOpen() {
 		this._overflowPopoverExpanded = true;
+		if (this.overflowPopover.content && this.overflowPopover.content.length) {
+			this.overflowPopover.content[0].focusFirstItem();
+		}
 	}
 
 	_overflowPopoverAfterClose() {
@@ -719,7 +729,7 @@ class ShellBar extends UI5Element {
 	async _toggleActionPopover() {
 		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
 		const overflowPopover = await this._getOverflowPopover();
-		overflowPopover.showAt(overflowButton);
+		overflowPopover.showAt(overflowButton, true);
 	}
 
 	onEnterDOM() {
@@ -812,7 +822,7 @@ class ShellBar extends UI5Element {
 
 	/**
 	 * Returns the <code>logo</code> DOM ref.
-	 * @type { HTMLElement }
+	 * @type {HTMLElement}
 	 * @public
 	 * @readonly
 	 * @since 1.0.0-rc.16
@@ -823,7 +833,7 @@ class ShellBar extends UI5Element {
 
 	/**
 	 * Returns the <code>copilot</code> DOM ref.
-	 * @type { HTMLElement }
+	 * @type {HTMLElement}
 	 * @public
 	 * @readonly
 	 * @since 1.0.0-rc.16
@@ -834,7 +844,7 @@ class ShellBar extends UI5Element {
 
 	/**
 	 * Returns the <code>notifications</code> icon DOM ref.
-	 * @type { HTMLElement }
+	 * @type {HTMLElement}
 	 * @public
 	 * @readonly
 	 * @since 1.0.0-rc.16
@@ -845,7 +855,7 @@ class ShellBar extends UI5Element {
 
 	/**
 	 * Returns the <code>overflow</code> icon DOM ref.
-	 * @type { HTMLElement }
+	 * @type {HTMLElement}
 	 * @public
 	 * @readonly
 	 * @since 1.0.0-rc.16
@@ -856,7 +866,7 @@ class ShellBar extends UI5Element {
 
 	/**
 	 * Returns the <code>profile</code> icon DOM ref.
-	 * @type { HTMLElement }
+	 * @type {HTMLElement}
 	 * @public
 	 * @readonly
 	 * @since 1.0.0-rc.16
@@ -867,7 +877,7 @@ class ShellBar extends UI5Element {
 
 	/**
 	 * Returns the <code>product-switch</code> icon DOM ref.
-	 * @type { HTMLElement }
+	 * @type {HTMLElement}
 	 * @public
 	 * @readonly
 	 * @since 1.0.0-rc.16

package/src/ShellBarItem.js

@@ -6,7 +6,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
  */
 const metadata = {
 	tag: "ui5-shellbar-item",
-	properties: /** @lends sap.ui.webcomponents.fiori.ShellBarItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.ShellBarItem.prototype */ {
 		/**
 		 * Defines the name of the item's icon.
 		 * @type {string}
@@ -39,11 +39,11 @@ const metadata = {
 		},
 	},
 
-	events: /** @lends sap.ui.webcomponents.fiori.ShellBarItem.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.ShellBarItem.prototype */ {
 		/**
 		 * Fired, when the item is pressed.
 		 *
-		 * @event sap.ui.webcomponents.fiori.ShellBarItem#click
+		 * @event sap.ui.webc.fiori.ShellBarItem#click
 		 * @allowPreventDefault
 		 * @param {HTMLElement} targetRef DOM ref of the clicked element
 		 * @public
@@ -66,10 +66,10 @@ const metadata = {
  * <code>import "@ui5/webcomponents-fiori/dist/ShellBarItem";</code>
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.ShellBarItem
- * @extends sap.ui.webcomponents.base.UI5Element
+ * @alias sap.ui.webc.fiori.ShellBarItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-shellbar-item
- * @implements sap.ui.webcomponents.fiori.IShellBarItem
+ * @implements sap.ui.webc.fiori.IShellBarItem
  * @public
  */
 class ShellBarItem extends UI5Element {

package/src/SideNavigation.hbs

@@ -1,4 +1,4 @@
-<div class="ui5-sn-root">
+<div class="ui5-sn-root" role="navigation">
 	{{> header }}
 
 	{{#if items.length}}
@@ -6,6 +6,7 @@
 			id="ui5-sn-items-tree"
 			class="ui5-sn-items-tree"
 			mode="None"
+			.accessibleRoleDescription="{{ariaRoleDescNavigationList}}"
 			?_minimal="{{collapsed}}"
 			_toggle-button-end
 			@ui5-item-click="{{handleTreeItemClick}}"
@@ -19,6 +20,9 @@
 					?has-children="{{this.item.items.length}}"
 					?expanded="{{this.item.expanded}}"
 					?selected="{{this.selected}}"
+					.ariaHaspopup="{{this.item._ariaHasPopup}}"
+					.accessibleRoleDescription="{{../ariaRoleDescNavigationListItem}}"
+					._fixed="{{this.item._fixed}}"
 				>
 					{{#unless ../collapsed}}
 						{{#each this.item.items}}
@@ -28,6 +32,7 @@
 								title="{{this._tooltip}}"
 								icon="{{this.icon}}"
 								?selected="{{this.selected}}"
+								.accessibleRoleDescription="{{../ariaRoleDescNavigationListItem}}"
 							>
 							</ui5-tree-item>
 						{{/each}}
@@ -50,6 +55,7 @@
 				?_minimal="{{collapsed}}"
 				_toggle-button-end
 				@ui5-item-click="{{handleTreeItemClick}}"
+				.accessibleRoleDescription="{{ariaRoleDescNavigationList}}"
 			>
 				{{#each _fixedItems}}
 					<ui5-tree-item
@@ -60,6 +66,8 @@
 						?has-children="{{this.item.items.length}}"
 						?expanded="{{this.item.expanded}}"
 						?selected="{{this.selected}}"
+						.ariaHaspopup="{{this.item._ariaHasPopup}}"
+						.accessibleRoleDescription="{{../ariaRoleDescNavigationListItem}}"
 					>
 						{{#unless ../collapsed}}
 							{{#each this.item.items}}
@@ -68,6 +76,7 @@
 									text="{{this.text}}"
 									title="{{this._tooltip}}"
 									?selected="{{this.selected}}"
+									.accessibleRoleDescription="{{../ariaRoleDescNavigationListItem}}"
 								>
 								</ui5-tree-item>
 							{{/each}}

package/src/SideNavigation.js

@@ -5,8 +5,16 @@ import List from "@ui5/webcomponents/dist/List.js";
 import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
 import Tree from "@ui5/webcomponents/dist/Tree.js";
 import TreeItem from "@ui5/webcomponents/dist/TreeItem.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import SideNavigationTemplate from "./generated/templates/SideNavigationTemplate.lit.js";
 import SideNavigationItemPopoverContentTemplate from "./generated/templates/SideNavigationItemPopoverContentTemplate.lit.js";
+import {
+	SIDE_NAVIGATION_POPOVER_HIDDEN_TEXT,
+	SIDE_NAVIGATION_COLLAPSED_LIST_ARIA_ROLE_DESC,
+	SIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC,
+	SIDE_NAVIGATION_LIST_ARIA_ROLE_DESC,
+	SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
@@ -19,7 +27,7 @@ const metadata = {
 	tag: "ui5-side-navigation",
 	managedSlots: true,
 	fastNavigation: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.SideNavigation.prototype */ {
 		/**
 		 * Defines whether the <code>ui5-side-navigation</code> is expanded or collapsed.
 		 *
@@ -38,14 +46,14 @@ const metadata = {
 			type: Object,
 		},
 	},
-	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.SideNavigation.prototype */ {
 		/**
 		 * Defines the main items of the <code>ui5-side-navigation</code>. Use the <code>ui5-side-navigation-item</code> component
 		 * for the top-level items, and the <code>ui5-side-navigation-sub-item</code> component for second-level items, nested
 		 * inside the items.
 		 *
 		 * @public
-		 * @type {sap.ui.webcomponents.fiori.ISideNavigationItem[]}
+		 * @type {sap.ui.webc.fiori.ISideNavigationItem[]}
 		 * @slot items
 		 */
 		"default": {
@@ -76,7 +84,7 @@ const metadata = {
 		 * <b>Note:</b> In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items)
 		 *
 		 * @public
-		 * @type {sap.ui.webcomponents.fiori.ISideNavigationItem[]}
+		 * @type {sap.ui.webc.fiori.ISideNavigationItem[]}
 		 * @slot
 		 */
 		fixedItems: {
@@ -84,11 +92,11 @@ const metadata = {
 			invalidateOnChildChange: true,
 		},
 	},
-	events: /** @lends sap.ui.webcomponents.fiori.SideNavigation.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.SideNavigation.prototype */ {
 		/**
 		 * Fired when the selection has changed via user interaction
 		 *
-		 * @event sap.ui.webcomponents.fiori.SideNavigation#selection-change
+		 * @event sap.ui.webc.fiori.SideNavigation#selection-change
 		 * @param {HTMLElement} item the clicked item.
 		 * @allowPreventDefault
 		 * @public
@@ -140,8 +148,8 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.SideNavigation
- * @extends UI5Element
+ * @alias sap.ui.webc.fiori.SideNavigation
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-side-navigation
  * @since 1.0.0-rc.8
  * @appenddocs SideNavigationItem SideNavigationSubItem
@@ -213,10 +221,33 @@ class SideNavigation extends UI5Element {
 		this._popoverContent = {
 			mainItem: item,
 			mainItemSelected: item.selected && !item.items.some(subItem => subItem.selected),
+			// add one as the first item is the main item
+			selectedSubItemIndex: item.items.findIndex(subItem => subItem.selected) + 1,
 			subItems: item.items,
 		};
 	}
 
+	async _onAfterOpen() {
+		// as the tree/list inside the popover is never destroyed,
+		// item navigation index should be managed, because items are
+		// dynamically recreated and tabIndexes are not updated
+		const tree = await this.getPickerTree();
+		const index = this._popoverContent.selectedSubItemIndex;
+		tree.focusItemByIndex(index);
+	}
+
+	get accSideNavigationPopoverHiddenText() {
+		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_POPOVER_HIDDEN_TEXT);
+	}
+
+	get ariaRoleDescNavigationList() {
+		return this.collapsed ? SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_COLLAPSED_LIST_ARIA_ROLE_DESC) : SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_LIST_ARIA_ROLE_DESC);
+	}
+
+	get ariaRoleDescNavigationListItem() {
+		return this.collapsed ? SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC) : SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC);
+	}
+
 	handleTreeItemClick(event) {
 		const treeItem = event.detail.item;
 		const item = treeItem.associatedItem;
@@ -240,7 +271,7 @@ class SideNavigation extends UI5Element {
 		}
 	}
 
-	handleListItemClick(event) {
+	handlePopoverItemClick(event) {
 		const listItem = event.detail.item;
 		const item = listItem.associatedItem;
 
@@ -262,11 +293,17 @@ class SideNavigation extends UI5Element {
 		responsivePopover.showAt(opener);
 	}
 
-	async closePicker(opener) {
+	async closePicker() {
 		const responsivePopover = await this.getPicker();
 		responsivePopover.close();
 	}
 
+	async getPickerTree() {
+		const picker = await this.getPicker();
+		const sideNav = picker.querySelector("[ui5-side-navigation]");
+		return sideNav._itemsTree;
+	}
+
 	get hasHeader() {
 		return !!this.header.length;
 	}
@@ -300,6 +337,13 @@ class SideNavigation extends UI5Element {
 			});
 		});
 	}
+
+	static async onDefine() {
+		[SideNavigation.i18nBundle] = await Promise.all([
+			getI18nBundle("@ui5/webcomponents"),
+			super.onDefine(),
+		]);
+	}
 }
 
 SideNavigation.define();

package/src/SideNavigationItem.js

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js";
 
 /**
  * @public
@@ -6,7 +7,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 const metadata = {
 	tag: "ui5-side-navigation-item",
 	managedSlots: true,
-	properties: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.SideNavigationItem.prototype */ {
 		/**
 		 * Defines the text of the item.
 		 *
@@ -24,7 +25,7 @@ const metadata = {
 		 *
 		 * The SAP-icons font provides numerous options.
 		 * <br>
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 * @public
 		 * @type {string}
 		 * @defaultvalue ""
@@ -79,16 +80,28 @@ const metadata = {
 		 title: {
 			type: String,
 		},
+
+		/**
+		 * Defines if the item should be collapsible or not.
+		 * It is true, for example, for the items inside the Popover of the Side Navigation
+		 * @private
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.10.0
+		 */
+		 _fixed: {
+			type: Boolean,
+		},
 	},
 
-	events: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.SideNavigationItem.prototype */ {
 	},
 
-	slots: /** @lends sap.ui.webcomponents.fiori.SideNavigationItem.prototype */ {
+	slots: /** @lends sap.ui.webc.fiori.SideNavigationItem.prototype */ {
 		/**
 		 * If you wish to nest menus, you can pass inner menu items to the default slot.
 		 *
-		 * @type {sap.ui.webcomponents.fiori.ISideNavigationSubItem[]}
+		 * @type {sap.ui.webc.fiori.ISideNavigationSubItem[]}
 		 * @public
 		 * @slot items
 		 */
@@ -114,12 +127,12 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.SideNavigationItem
- * @extends UI5Element
+ * @alias sap.ui.webc.fiori.SideNavigationItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-side-navigation-item
  * @public
  * @since 1.0.0-rc.8
- * @implements sap.ui.webcomponents.fiori.ISideNavigationItem
+ * @implements sap.ui.webc.fiori.ISideNavigationItem
  */
 class SideNavigationItem extends UI5Element {
 	static get metadata() {
@@ -129,6 +142,10 @@ class SideNavigationItem extends UI5Element {
 	get _tooltip() {
 		return this.title || this.text;
 	}
+
+	get _ariaHasPopup() {
+		return (this.parentNode.collapsed && this.items.length) ? HasPopup.Tree : undefined;
+	}
 }
 
 SideNavigationItem.define();

package/src/SideNavigationItemPopoverContent.hbs

@@ -1,23 +1,33 @@
 <ui5-responsive-popover
 	vertical-align="Top"
 	class="ui5-side-navigation-popover"
+	aria-labelledby="{{_id}}-sideNavigationPopoverText"
+	aria-modal="true"
+	@ui5-after-open="{{_onAfterOpen}}"
 >
-	<ui5-list
-		mode="None"
-		@ui5-item-click="{{handleListItemClick}}"
+	<span id="{{_id}}-sideNavigationPopoverText" class="ui5-hidden-text">{{accSideNavigationPopoverHiddenText}}</span>
+
+	<ui5-side-navigation 
+		class="ui5-side-navigation-in-popover"
+		@ui5-selection-change="{{handlePopoverItemClick}}"
 	>
-		<ui5-li
+		<ui5-side-navigation-item
 			title="{{_popoverContent.mainItem._tooltip}}"
-			?selected="{{_popoverContent.mainItemSelected}}"
+			text="{{_popoverContent.mainItem.text}}"
+			expanded="true"
+			_fixed="true"
+			?selected="{{_popoverContent.mainItem.selected}}"
 			.associatedItem="{{_popoverContent.mainItem}}"
-		>{{_popoverContent.mainItem.text}}</ui5-li>
+		>
 
 		{{#each _popoverContent.subItems}}
-			<ui5-li
+			<ui5-side-navigation-sub-item
 				title="{{this._tooltip}}"
+				text="{{this.text}}"
 				?selected="{{this.selected}}"
 				.associatedItem="{{this}}"
-			>{{this.text}}</ui5-li>
+			></ui5-side-navigation-sub-item>
 		{{/each}}
-	</ui5-list>
+		</ui5-side-navigation-item>
+	</ui5-side-navigation>
 </ui5-responsive-popover>

package/src/SideNavigationSubItem.js

@@ -5,7 +5,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  */
 const metadata = {
 	tag: "ui5-side-navigation-sub-item",
-	properties: /** @lends sap.ui.webcomponents.fiori.SideNavigationSubItem.prototype */ {
+	properties: /** @lends sap.ui.webc.fiori.SideNavigationSubItem.prototype */ {
 		/**
 		 * Defines the text of the item.
 		 *
@@ -34,7 +34,7 @@ const metadata = {
 		 *
 		 * The SAP-icons font provides numerous options.
 		 * <br>
-		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 * @public
 		 * @type {string}
 		 * @defaultvalue ""
@@ -55,7 +55,7 @@ const metadata = {
 		},
 	},
 
-	events: /** @lends sap.ui.webcomponents.fiori.SideNavigationSubItem.prototype */ {
+	events: /** @lends sap.ui.webc.fiori.SideNavigationSubItem.prototype */ {
 	},
 };
 
@@ -72,12 +72,12 @@ const metadata = {
  *
  * @constructor
  * @author SAP SE
- * @alias sap.ui.webcomponents.fiori.SideNavigationSubItem
- * @extends UI5Element
+ * @alias sap.ui.webc.fiori.SideNavigationSubItem
+ * @extends sap.ui.webc.base.UI5Element
  * @tagname ui5-side-navigation-sub-item
  * @public
  * @since 1.0.0-rc.8
- * @implements sap.ui.webcomponents.fiori.ISideNavigationSubItem
+ * @implements sap.ui.webc.fiori.ISideNavigationSubItem
  */
 class SideNavigationSubItem extends UI5Element {
 	static get metadata() {