fix(ui5-side-navigation): fixed accessibility of the Popover

PartOf: #5827
SAP · Nov 15, 2022 · 6178f37 · 6178f37
1 parent 66ea5f2
commit 6178f37
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 11 deletions.
diff --git a/packages/fiori/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js
@@ -230,11 +230,11 @@ class SideNavigation extends UI5Element {
 	}
 
 	get ariaRoleDescPopoverNavigationList() {
-		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_COLLAPSED_LIST_ARIA_ROLE_DESC);
+		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_LIST_ARIA_ROLE_DESC);
 	}
 
 	get ariaRoleDescPopoverNavigationListItem() {
-		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC);
+		return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC);
 	}
 
 	get ariaRoleDescNavigationList() {

diff --git a/packages/fiori/src/SideNavigationItemPopoverContent.hbs b/packages/fiori/src/SideNavigationItemPopoverContent.hbs
@@ -6,32 +6,34 @@
 >
 	<span id="{{_id}}-sideNavigationPopoverText" class="ui5-hidden-text">{{accSideNavigationPopoverHiddenText}}</span>
 
-	<ui5-list
+	<ui5-tree
 		mode="None"
-		.ariaRoleDescription="{{ariaRoleDescPopoverNavigationList}}"
+		.accessibleRoleDescription="{{ariaRoleDescPopoverNavigationList}}"
 		accessible-role="tree"
 		@ui5-item-click="{{handleListItemClick}}"
 	>
-		<ui5-li
+		<ui5-tree-item
 			title="{{_popoverContent.mainItem._tooltip}}"
+			text="{{_popoverContent.mainItem.text}}"
 			accessible-role="treeitem"
 			_level="1"
 			aria-selected="{{this.selected}}"
-			.ariaRoleDescription="{{ariaRoleDescPopoverNavigationListItem}}"
+			.accessibleRoleDescription="{{ariaRoleDescPopoverNavigationListItem}}"
 			?selected="{{_popoverContent.mainItemSelected}}"
 			.associatedItem="{{_popoverContent.mainItem}}"
-		>{{_popoverContent.mainItem.text}}</ui5-li>
+		></ui5-tree-item>
 
 		{{#each _popoverContent.subItems}}
-			<ui5-li
+			<ui5-tree-item
 				title="{{this._tooltip}}"
+				text="{{this.text}}"
 				accessible-role="treeitem"
 				_level="2"
 				aria-selected="{{this.selected}}"
-				.ariaRoleDescription="{{ariaRoleDescPopoverNavigationListItem}}"
+				.accessibleRoleDescription="{{ariaRoleDescPopoverNavigationListItem}}"
 				?selected="{{this.selected}}"
 				.associatedItem="{{this}}"
-			>{{this.text}}</ui5-li>
+			></ui5-tree-item>
 		{{/each}}
-	</ui5-list>
+	</ui5-tree>
 </ui5-responsive-popover>
diff --git a/packages/fiori/src/themes/SideNavigationPopover.css b/packages/fiori/src/themes/SideNavigationPopover.css
@@ -2,6 +2,7 @@
 
 .ui5-side-navigation-popover::part(content) {
 	padding: 0;
+	--_ui5-tree-toggle-box-width: 1rem;
 }
 
 .ui5-hidden-text {