fix(a11y): improve menu handling

package.json

@@ -91,8 +91,7 @@
   },
   "lint-staged": {
     "*.ts": [
-      "prettier --write",
-      "eslint --fix"
+      "prettier --write"
     ]
   }
 }

src/app/components/menu/menu.component.html

@@ -1,6 +1,6 @@
 <!-- Menu -->
 <div role="navigation" id="menu" class="is-menu-visible" aria-label="Hauptmenü">
-  <div class="inner" role="navigation">
+  <div class="inner" role="menu">
     <h2>Menü</h2>
     <ul class="links">
       <li>

src/app/components/navbar/navbar.component.html

@@ -1,10 +1,13 @@
-<nav class="menu-dark" id="navigation" role="navigation" tabindex="0">
+<nav class="menu-dark" id="navigation" role="navigation" tabindex="0"  (keydown)="onKeydown($event)"
+  >
   <button
     class="burger-menu"
     role="button"
     (click)="openDialog()"
     aria-label="Menü öffnen"
-    aria-expanded="false"
+    aria-controls="menu"
+    [attr.aria-expanded]="!!dialogRef()"
+
   >
     <span class="hidden-small">Menü</span>
   </button>

src/app/components/navbar/navbar.component.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { MenuComponent } from '../menu/menu.component';
-import { Dialog, DialogModule } from '@angular/cdk/dialog';
+import { Dialog, DialogModule, DialogRef } from '@angular/cdk/dialog';
 
 @Component({
   selector: 'dk-navbar',
@@ -10,15 +10,32 @@ import { Dialog, DialogModule } from '@angular/cdk/dialog';
   standalone: true,
 })
 export class NavbarComponent {
-  constructor(public dialog: Dialog) {}
+  private readonly dialog = inject(Dialog);
+  dialogRef = signal<DialogRef<string> | null>(null);
+
+  onKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.openDialog();
+    }
+  }
 
   openDialog(): void {
-    this.dialog.open<string>(MenuComponent, {
-      ariaModal: true,
-      hasBackdrop: true,
-      closeOnNavigation: true,
-      closeOnDestroy: true,
-      disableClose: false,
-    });
+    if (this.dialogRef()) {
+      this.dialog.closeAll();
+      this.dialogRef.set(null);
+    } else {
+      const ref = this.dialog.open<string>(MenuComponent, {
+        ariaModal: true,
+        hasBackdrop: true,
+        closeOnNavigation: true,
+        closeOnDestroy: true,
+        disableClose: false,
+      });
+      this.dialogRef.set(ref);
+      ref.closed.subscribe(() => {
+        this.dialogRef.set(null);
+      });
+    }
   }
 }