From 25a0827c982d89071a0e593e7bf4a3254a45cc45 Mon Sep 17 00:00:00 2001
From: Bogdan Bogdanov <bbogdanov@vmware.com>
Date: Wed, 13 Apr 2022 14:58:05 +0300
Subject: [PATCH] fix(navigation): add aria-hidden attributes to hidden
 elements

Signed-off-by: Bogdan Bogdanov <bbogdanov@vmware.com>
---
 projects/angular/src/layout/nav/nav-level.spec.ts | 5 +++++
 projects/angular/src/layout/nav/nav-level.ts      | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/projects/angular/src/layout/nav/nav-level.spec.ts b/projects/angular/src/layout/nav/nav-level.spec.ts
index a480e1ee83..b0db5c1aa3 100644
--- 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,6 +43,7 @@ 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();
   });
 
@@ -49,6 +51,7 @@ describe('NavLevelDirective', 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');
   });
 
@@ -56,8 +59,10 @@ describe('NavLevelDirective', 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
index dc51b37fd2..2b0f372e7f 100644
--- 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');
   }