From 27243f96f1c3d58bed5ee677f8badf5bf77b7cfa Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Fri, 6 Oct 2023 10:08:51 +0200
Subject: [PATCH] Improve left menu toggle accessibility

---
 client/src/app/app.component.html | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index ad7ca0129..7d43cf74e 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -6,9 +6,12 @@
   <div class="root-header">
 
     <div class="top-left-block">
-      <span role="button" tabindex="0" [title]="getToggleTitle()" (click)="menu.toggleMenu()" (keyup.enter)="menu.toggleMenu()">
+      <button
+        class="border-0 padding-0" [title]="getToggleTitle()" (click)="menu.toggleMenu()" (keyup.enter)="menu.toggleMenu()"
+        [ariaExpanded]="menu.isMenuDisplayed" aria-controls="left-menu"
+      >
         <span class="icon icon-menu"></span>
-      </span>
+      </button>
 
       <a class="peertube-title c-hand" [routerLink]="getDefaultRoute()" [queryParams]="getDefaultRouteQuery()">
         <span class="icon icon-logo"></span>
@@ -22,7 +25,7 @@
   </div>
 
   <div class="sub-header-container">
-    <my-menu *ngIf="menu.isMenuDisplayed"></my-menu>
+    <my-menu id="left-menu" role="navigation" aria-label="Main menu" i18n-ariaLabel [hidden]="!menu.isMenuDisplayed"></my-menu>
 
     <div id="content" class="main-col" [ngClass]="{ expanded: menu.isMenuDisplayed === false }">