Merge e7617a2 into cc73197

SAP · Dec 19, 2024 · 277ea54 · 277ea54
2 parents cc73197 + e7617a2
commit 277ea54
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 20 deletions.
diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -789,6 +789,12 @@ export interface FeatureTogglesInterface {
    */
   a11yAddPaddingToCarouselPanel?: boolean;
 
+  /**
+   * Removes invalid aria-level usage on button elements and ensures buttons have a proper accessible name via aria-label or aria-labelledby.
+   * Affects: NavigationUIComponent
+   */
+  a11yButtonAriaFixes?: boolean;
+
   /**
    * Hides the 'Consent Management' button from the tab order when the cookies banner is visible.
    * Ensures the button is re-enabled and part of the tab order once consent is given and the banner disappears.
@@ -1049,6 +1055,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yDifferentiateFocusedAndSelected: false,
   a11yKeyboardFocusInSearchBox: false,
   a11yAddPaddingToCarouselPanel: false,
+  a11yButtonAriaFixes: false,
   a11yHideConsentButtonWhenBannerVisible: false,
   occCartNameAndDescriptionInHttpRequestBody: false,
   cmsBottomHeaderSlotUsingFlexStyles: false,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -415,6 +415,7 @@ if (environment.cpq) {
         a11yDifferentiateFocusedAndSelected: true,
         a11yKeyboardFocusInSearchBox: true,
         a11yAddPaddingToCarouselPanel: true,
+        a11yButtonAriaFixes: true,
         a11yHideConsentButtonWhenBannerVisible: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
         useSiteThemeService: false,

diff --git a/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.html b/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.html
@@ -102,26 +102,50 @@
           </button>
         </ng-container>
         <ng-container *cxFeature="'a11yNavigationUiKeyboardControls'">
-          <button
-            aria-level="4"
-            [attr.role]="(isDesktop$ | async) && depth ? 'heading' : 'button'"
-            [attr.aria-haspopup]="true"
-            [attr.aria-expanded]="false"
-            [attr.aria-controls]="node.title"
-            [attr.aria-describedby]="'greeting'"
-            (click)="toggleOpen($any($event))"
-            (mouseenter)="onMouseEnter($event)"
-            (keydown.space)="onSpace($any($event))"
-            (keydown.enter)="onSpace($any($event))"
-            (keydown.esc)="back()"
-            (keydown.arrowDown)="focusOnNode($any($event))"
-            (focus)="depth || reinitializeMenu()"
-          >
-            <ng-container *ngIf="!node.url">
-              {{ node.title }}
-            </ng-container>
-            <cx-icon [type]="iconType.CARET_DOWN"></cx-icon>
-          </button>
+          <ng-container *cxFeature="'!a11yButtonAriaFixes'">
+            <button
+              aria-level="4"
+              [attr.role]="(isDesktop$ | async) && depth ? 'heading' : 'button'"
+              [attr.aria-haspopup]="true"
+              [attr.aria-expanded]="false"
+              [attr.aria-controls]="node.title"
+              [attr.aria-describedby]="'greeting'"
+              (click)="toggleOpen($any($event))"
+              (mouseenter)="onMouseEnter($event)"
+              (keydown.space)="onSpace($any($event))"
+              (keydown.enter)="onSpace($any($event))"
+              (keydown.esc)="back()"
+              (keydown.arrowDown)="focusOnNode($any($event))"
+              (focus)="depth || reinitializeMenu()"
+            >
+              <ng-container *ngIf="!node.url">
+                {{ node.title }}
+              </ng-container>
+              <cx-icon [type]="iconType.CARET_DOWN"></cx-icon>
+            </button>
+          </ng-container>
+          <ng-container *cxFeature="'a11yButtonAriaFixes'">
+            <button
+              [attr.role]="(isDesktop$ | async) && depth ? 'heading' : 'button'"
+              [attr.aria-haspopup]="true"
+              [attr.aria-expanded]="false"
+              [attr.aria-label]="getAriaLabelAndControl(node)"
+              [attr.aria-controls]="getAriaLabelAndControl(node)"
+              [attr.aria-describedby]="getAriaDescribedbyOfButton(node)"
+              (click)="toggleOpen($any($event))"
+              (mouseenter)="onMouseEnter($event)"
+              (keydown.space)="onSpace($any($event))"
+              (keydown.enter)="onSpace($any($event))"
+              (keydown.esc)="back()"
+              (keydown.arrowDown)="focusOnNode($any($event))"
+              (focus)="depth || reinitializeMenu()"
+            >
+              <ng-container *ngIf="!node.url">
+                {{ node.title }}
+              </ng-container>
+              <cx-icon [type]="iconType.CARET_DOWN"></cx-icon>
+            </button>
+          </ng-container>
         </ng-container>
       </ng-container>
       <ng-template #title>

diff --git a/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.ts b/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.ts
@@ -396,4 +396,18 @@ export class NavigationUIComponent implements OnInit, OnDestroy {
     }
     return depth > 0 && !node?.children ? -1 : 0;
   }
+
+  /**
+   * Returns the ID for the `aria-describedby` attribute of a button.
+   */
+  getAriaDescribedbyOfButton(node: NavigationNode): string | null {
+    return node.title === 'My Account' ? 'greeting' : null;
+  }
+
+  /**
+   * Returns the value for the `aria-control` and the `aria-label` attribute of a button.
+   */
+  getAriaLabelAndControl(node: NavigationNode): string | null {
+    return node.title || null;
+  }
 }