fix(navigation): add aria-hidden attributes to hidden elements

Signed-off-by: Bogdan Bogdanov <bbogdanov@vmware.com>
vmware-clarity · Apr 13, 2022 · 25a0827 · 25a0827
1 parent af6c44c
commit 25a0827
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/projects/angular/src/layout/nav/nav-level.spec.ts b/projects/angular/src/layout/nav/nav-level.spec.ts
@@ -33,6 +33,7 @@ describe('NavLevelDirective', function () {
     const navLevel = this.clarityDirective;
     navLevel.hideNavigation();
     const element = this.fixture.nativeElement.querySelector('nav');
+    expect(element.getAttribute('aria-hidden')).toBe('true');
     expect(element.getAttribute('hidden')).toBe('true');
   });
 
@@ -42,22 +43,26 @@ describe('NavLevelDirective', function () {
     navLevel.hideNavigation();
     expect(element.getAttribute('hidden')).toBe('true');
     navLevel.showNavigation();
+    expect(element.getAttribute('aria-hidden')).toBe('false');
     expect(element.getAttribute('hidden')).toBeNull();
   });
 
   it('should set [attr.hidden] when called hideCloseButton()', function () {
     const navLevel = this.clarityDirective;
     const element = this.fixture.nativeElement.querySelector('cds-internal-close-button');
     navLevel.hideCloseButton();
+    expect(element.getAttribute('aria-hidden')).toBe('true');
     expect(element.getAttribute('hidden')).toBe('true');
   });
 
   it('should remove [attr.hidden] when called showCloseButton()', function () {
     const navLevel = this.clarityDirective;
     const element = this.fixture.nativeElement.querySelector('cds-internal-close-button');
     navLevel.hideCloseButton();
+    expect(element.getAttribute('aria-hidden')).toBe('true');
     expect(element.getAttribute('hidden')).toBe('true');
     navLevel.showCloseButton();
+    expect(element.getAttribute('aria-hidden')).toBe('false');
     expect(element.getAttribute('hidden')).toBeNull();
   });
 

diff --git a/projects/angular/src/layout/nav/nav-level.ts b/projects/angular/src/layout/nav/nav-level.ts
@@ -30,6 +30,7 @@ const createCdsCloseButton = (document: Document, ariaLabel: string) => {
   const cdsCloseButton = document.createElement('cds-internal-close-button');
   cdsCloseButton.setAttribute('icon-size', '32');
   cdsCloseButton.setAttribute('aria-label', ariaLabel);
+  cdsCloseButton.setAttribute('aria-hidden', 'true');
   cdsCloseButton.setAttribute('type', 'button');
   /**
    * The button is hidden by default based on our Desktop-first approach.
@@ -192,18 +193,22 @@ export class ClrNavLevel extends FocusTrap implements OnInit {
   }
 
   protected hideNavigation() {
+    this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-hidden', 'true');
     this.renderer.setAttribute(this.elementRef.nativeElement, 'hidden', 'true');
   }
 
   protected showNavigation() {
+    this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-hidden', 'false');
     this.renderer.removeAttribute(this.elementRef.nativeElement, 'hidden');
   }
 
   protected hideCloseButton() {
+    this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-hidden', 'true');
     this.renderer.setAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'hidden', 'true');
   }
 
   protected showCloseButton() {
+    this.renderer.setAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'aria-hidden', 'false');
     this.renderer.removeAttribute(this.elementRef.nativeElement.querySelector('.clr-nav-close'), 'hidden');
   }