fix: (CXSPA-8035) NavigationUiComponent list-count not read out. (#19360

)
SAP · Oct 14, 2024 · cb77480 · cb77480
1 parent e96611a
commit cb77480
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 5 deletions.
diff --git a/projects/assets/src/translations/en/common.json b/projects/assets/src/translations/en/common.json
@@ -62,7 +62,8 @@
     "footerNavLabel": "Footer links",
     "goTo": "Go to {{location}}",
     "navigateTo": "Navigate to {{nav}}",
-    "scrollToTop": "Scroll back to the top of the page"
+    "scrollToTop": "Scroll back to the top of the page",
+    "linkItemInList": "{{title}}. {{position}} of {{listLength}}"
   },
   "searchBox": {
     "placeholder": "Enter product name or SKU",

diff --git a/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.html b/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.html
@@ -1,5 +1,9 @@
 <nav [attr.aria-label]="navAriaLabel">
-  <ul [attr.role]="flyout ? 'list' : 'presentation'">
+  <ul
+    [attr.role]="
+      flyout && (node?.children?.length ?? 0) > 1 ? 'list' : 'presentation'
+    "
+  >
     <li
       *ngIf="flyout && (node?.children?.length ?? 0) > 1"
       class="back is-open"
@@ -18,7 +22,13 @@
 </nav>
 <!-- we generate links in a recursive manner -->
 
-<ng-template #nav let-node="node" let-depth="depth">
+<ng-template
+  #nav
+  let-node="node"
+  let-depth="depth"
+  let-listLength="listLength"
+  let-position="position"
+>
   <li [attr.role]="!flyout && !depth ? 'presentation' : 'listitem'">
     <ng-container *cxFeature="'!a11yNavigationUiKeyboardControls'">
       <cx-generic-link
@@ -41,6 +51,15 @@
           node.url && (!node.children || node.children?.length === 0);
           else heading
         "
+        [ariaLabel]="
+          'navigation.linkItemInList'
+            | cxTranslate
+              : {
+                  title: node.title,
+                  position,
+                  listLength,
+                }
+        "
         [url]="node.url"
         [target]="node.target"
         [style]="node.styleAttributes"
@@ -128,9 +147,17 @@
         [attr.wrap-after]="node.children.length > wrapAfter ? wrapAfter : null"
         [attr.columns]="getColumnCount(node.children.length)"
       >
-        <ng-container *ngFor="let child of node.children">
+        <ng-container *ngFor="let child of node.children; index as i">
           <ng-container
-            *ngTemplateOutlet="nav; context: { node: child, depth: depth + 1 }"
+            *ngTemplateOutlet="
+              nav;
+              context: {
+                node: child,
+                depth: depth + 1,
+                listLength: node.children.length,
+                position: i + 1,
+              }
+            "
           >
           </ng-container>
         </ng-container>