feat: Responsive role attribute (#19030)

Co-authored-by: Piotr Bartkowiak <[email protected]> Co-authored-by: PioBar <[email protected]>
SAP · Aug 1, 2024 · 506a71d · 506a71d
1 parent 7032934
commit 506a71d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.html b/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.html
@@ -83,6 +83,8 @@
         </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-label]="node.title"

diff --git a/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.spec.ts b/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.spec.ts
@@ -12,6 +12,7 @@ import {
   I18nTestingModule,
   WindowRef,
 } from '@spartacus/core';
+import { BreakpointService } from 'projects/storefrontlib/layout';
 import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { of } from 'rxjs';
 import { HamburgerMenuService } from './../../../layout/header/hamburger-menu/hamburger-menu.service';
@@ -48,6 +49,12 @@ class MockFeatureConfigService {
   }
 }
 
+class MockBreakpointService {
+  isUp() {
+    return of(true);
+  }
+}
+
 const mockWinRef: WindowRef = {
   nativeWindow: {
     location: { href: '/sub-sub-child-1a' },
@@ -131,6 +138,10 @@ describe('Navigation UI Component', () => {
           provide: FeatureConfigService,
           useClass: MockFeatureConfigService,
         },
+        {
+          provide: BreakpointService,
+          useClass: MockBreakpointService,
+        },
       ],
     }).compileComponents();
   });
@@ -348,6 +359,19 @@ describe('Navigation UI Component', () => {
         expect(child.getAttribute('role')).toBe('listitem');
       });
     });
+
+    it('should apply role="heading" to nested dropdown trigger button while on desktop', () => {
+      fixture.detectChanges();
+      const nestedTriggerButton = fixture.debugElement.query(
+        By.css('button[aria-label="Child 1"]')
+      ).nativeElement;
+      const rootTriggerButton = fixture.debugElement.query(
+        By.css('button[aria-label="Root 1"]')
+      ).nativeElement;
+
+      expect(nestedTriggerButton.getAttribute('role')).toEqual('heading');
+      expect(rootTriggerButton.getAttribute('role')).toEqual('button');
+    });
   });
 
   describe('Keyboard navigation', () => {

diff --git a/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.ts b/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.ts
@@ -11,6 +11,7 @@ import {
   EventEmitter,
   HostBinding,
   HostListener,
+  inject,
   Input,
   OnDestroy,
   OnInit,
@@ -26,6 +27,7 @@ import {
   filter,
   take,
 } from 'rxjs/operators';
+import { BREAKPOINT, BreakpointService } from '../../../layout';
 import { ICON_TYPE } from '../../misc/icon/index';
 import { HamburgerMenuService } from './../../../layout/header/hamburger-menu/hamburger-menu.service';
 import { NavigationNode } from './navigation-node.model';
@@ -83,6 +85,9 @@ export class NavigationUIComponent implements OnInit, OnDestroy {
     this.arrowControls.next(e);
   }
 
+  protected breakpointService = inject(BreakpointService);
+  isDesktop$ = this.breakpointService.isUp(BREAKPOINT.lg);
+
   constructor(
     private router: Router,
     private renderer: Renderer2,