fix(header): improve mobile menu accessibility

modules/layout/src/lib/header/header.component.html

@@ -1,6 +1,10 @@
 <header id="header">
   <nav id="nav">
-    <a href="#" title="Voltar para Página Inicial">
+    <a
+      href="#"
+      title="Voltar para página inicial"
+      aria-label="Voltar para página inicial"
+    >
       <img
         ngSrc="logo-ascepa.png"
         priority
@@ -11,29 +15,36 @@
         id="logo"
       />
     </a>
-    <button
-      id="menu-button"
-      (click)="toggleMenu()"
-      title="Botão abrir/fechar menu"
-    >
-      <svg
-        width="26"
-        height="23"
-        viewBox="0 0 26 23"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
+    <div id="menu-toggle-container">
+      <h2 id="menu-title" class="mr-1rem">Menu Principal</h2>
+      <button
+        id="menu-button"
+        (click)="toggleMenu()"
+        title="Botão abrir/fechar menu"
+        [attr.aria-expanded]="isMenuExpanded"
+        aria-label="Botão abrir/fechar menu"
+        aria-controls="links"
+        tabindex="0"
       >
-        <path
-          d="M0 2.15625C0 1.37695 0.620982 0.75 1.39286 0.75H24.6071C25.379 0.75 26 1.37695 26 2.15625C26 2.93555 25.379 3.5625 24.6071 3.5625H1.39286C0.620982 3.5625 0 2.93555 0 2.15625ZM0 11.5312C0 10.752 0.620982 10.125 1.39286 10.125H24.6071C25.379 10.125 26 10.752 26 11.5312C26 12.3105 25.379 12.9375 24.6071 12.9375H1.39286C0.620982 12.9375 0 12.3105 0 11.5312ZM26 20.9062C26 21.6855 25.379 22.3125 24.6071 22.3125H1.39286C0.620982 22.3125 0 21.6855 0 20.9062C0 20.127 0.620982 19.5 1.39286 19.5H24.6071C25.379 19.5 26 20.127 26 20.9062Z"
-        />
-      </svg>
-    </button>
-    <ul id="links" [ngClass]="{ opened: opened }">
-      <li><a href="#">Quem somos</a></li>
-      <li><a href="#">Notícias</a></li>
-      <li><a href="#">Vagas</a></li>
-      <li><a href="#">Filie-se</a></li>
-      <li><a href="#">Contato</a></li>
+        <svg
+          width="26"
+          height="23"
+          viewBox="0 0 26 23"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M0 2.15625C0 1.37695 0.620982 0.75 1.39286 0.75H24.6071C25.379 0.75 26 1.37695 26 2.15625C26 2.93555 25.379 3.5625 24.6071 3.5625H1.39286C0.620982 3.5625 0 2.93555 0 2.15625ZM0 11.5312C0 10.752 0.620982 10.125 1.39286 10.125H24.6071C25.379 10.125 26 10.752 26 11.5312C26 12.3105 25.379 12.9375 24.6071 12.9375H1.39286C0.620982 12.9375 0 12.3105 0 11.5312ZM26 20.9062C26 21.6855 25.379 22.3125 24.6071 22.3125H1.39286C0.620982 22.3125 0 21.6855 0 20.9062C0 20.127 0.620982 19.5 1.39286 19.5H24.6071C25.379 19.5 26 20.127 26 20.9062Z"
+          />
+        </svg>
+      </button>
+    </div>
+    <ul id="links" [ngClass]="{ isMenuExpanded }" aria-labelledby="menu-title">
+      <li><a href="#" aria-label="Quem somos">Quem somos</a></li>
+      <li><a href="#" aria-label="Notícias">Notícias</a></li>
+      <li><a href="#" aria-label="Vagas">Vagas</a></li>
+      <li><a href="#" aria-label="Filie-se">Filie-se</a></li>
+      <li><a href="#" aria-label="Contato">Contato</a></li>
     </ul>
   </nav>
 </header>

modules/layout/src/lib/header/header.component.scss

@@ -49,25 +49,31 @@
     }
   }
 }
-#menu-button {
-  display: none;
-  padding: 1rem;
-  background-color: transparent;
-  border: none;
-  border-radius: $border-radius;
-  @include transition;
-
-  path {
-    fill: $color-primary;
-    @include transition;
+#menu-toggle-container {
+  display: flex;
+  #menu-title {
+    display: none;
   }
-
-  &:hover {
-    cursor: pointer;
-    background-color: $color-primary;
+  #menu-button {
+    display: none;
+    padding: 1rem;
+    background-color: transparent;
+    border: none;
+    border-radius: $border-radius;
+    @include transition;
 
     path {
-      fill: $color-white;
+      fill: $color-primary;
+      @include transition;
+    }
+
+    &:hover {
+      cursor: pointer;
+      background-color: $color-primary;
+
+      path {
+        fill: $color-white;
+      }
     }
   }
 }
@@ -91,7 +97,7 @@
     align-items: stretch;
     opacity: 0;
 
-    &.opened {
+    &.isMenuExpanded {
       height: calc(100% - 112px);
       opacity: 1;
     }
@@ -112,4 +118,8 @@
     display: block;
     align-self: center;
   }
+  #menu-title {
+    display: flex;
+    align-items: center;
+  }
 }

modules/layout/src/lib/header/header.component.spec.ts

@@ -20,14 +20,14 @@ describe('HeaderComponent', () => {
   });
 
   it('should call toggleMenu and close menu', () => {
-    component.opened = true;
+    component.isMenuExpanded = true;
     component.toggleMenu();
-    expect(component.opened).toBe(false);
+    expect(component.isMenuExpanded).toBe(false);
   });
 
   it('should call toggleMenu and open menu', () => {
-    component.opened = false;
+    component.isMenuExpanded = false;
     component.toggleMenu();
-    expect(component.opened).toBe(true);
+    expect(component.isMenuExpanded).toBe(true);
   });
 });

modules/layout/src/lib/header/header.component.ts

@@ -1,17 +1,18 @@
 import { CommonModule, NgOptimizedImage } from '@angular/common';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'lib-header',
   standalone: true,
   imports: [CommonModule, NgOptimizedImage],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HeaderComponent {
-  opened = false;
+  isMenuExpanded = false;
 
   toggleMenu(): void {
-    this.opened = !this.opened;
+    this.isMenuExpanded = !this.isMenuExpanded;
   }
 }