Fix menu accessibility

Signed-off-by: Chocobozzz <me@florianbigard.com>

client/src/app/header/header.component.html

@@ -9,7 +9,10 @@
 
   <div class="d-flex align-items-center buttons-container">
     @if (!loggedIn) {
-      <my-button theme="tertiary" rounded="true" class="margin-button settings-button" icon="cog" (click)="openQuickSettings()"></my-button>
+      <my-button
+        i18n-title title="Open settings modal"
+        theme="tertiary" rounded="true" class="margin-button settings-button" icon="cog" (click)="openQuickSettings()"
+      ></my-button>
 
       <a *ngIf="isRegistrationAllowed()" routerLink="/signup" class="peertube-button-link secondary-button w-100 ellipsis margin-button create-account-button">
         <my-signup-label [requiresApproval]="requiresApproval"></my-signup-label>

client/src/app/header/header.component.scss

@@ -51,6 +51,7 @@
 
 my-search-typeahead {
   max-width: 270px;
+  width: 100%;
 
   @include margin-right(1.5rem);
 }

client/src/app/menu/menu.component.html

@@ -1,5 +1,5 @@
 <ng-template #moreInfoButton>
-  <my-button i18n class="mt-2 d-block" theme="secondary" icon="help" i18n-ariaLabel aria-label="More info" i18n ptRouterLink="/about" ptRouterLinkActive="active">
+  <my-button i18n class="mt-2 d-block" theme="secondary" icon="help" i18n-title title="More info" i18n ptRouterLink="/about" ptRouterLinkActive="active">
     @if (!collapsed) {
       More info
     }
@@ -20,11 +20,11 @@
 
         <div class="toggle-menu-container">
           @if (collapsed) {
-            <button type="button" class="button-unstyle toggle-menu" i18n-title title="Display the lateral bar" (click)="toggleMenu()">
+            <button type="button" class="button-unstyle toggle-menu" i18n-title title="Display the lateral menu" (click)="toggleMenu()">
               <my-global-icon class="transform-rotate-180" iconName="chevron-left"></my-global-icon>
             </button>
           } @else {
-            <button type="button" class="button-unstyle toggle-menu" i18n-title title= "Hide the lateral bar" (click)="toggleMenu()">
+            <button type="button" class="button-unstyle toggle-menu" i18n-title title= "Hide the lateral menu" (click)="toggleMenu()">
               <my-global-icon iconName="chevron-left"></my-global-icon>
             </button>
           }
@@ -47,13 +47,13 @@
                 <ul class="ul-unstyle">
                   <li *ngFor="let link of menuSection.links">
                     @if (link.isPrimaryButton === true) {
-                      <my-button class="d-block menu-button" [ngClass]="link.ngClass" theme="primary" [icon]="link.icon" [ariaLabel]="link.label" [ptRouterLink]="link.path">
+                      <my-button class="d-block menu-button" [ngClass]="link.ngClass" theme="primary" [icon]="link.icon" [title]="link.label" [ptRouterLink]="link.path">
                         @if (!collapsed) {
                           {{ link.label }}
                         }
                       </my-button>
                     } @else {
-                      <a class="menu-link ellipsis" [routerLink]="link.path" routerLinkActive="active" [ngClass]="link.ngClass">
+                      <a class="menu-link ellipsis" [routerLink]="link.path" routerLinkActive="active" [ngClass]="link.ngClass" [title]="link.label">
                         <my-global-icon *ngIf="link.icon" [iconName]="link.icon" [ngClass]="link.iconClass" aria-hidden="true"></my-global-icon>
                         <span [ngClass]="{ 'visually-hidden': collapsed }">{{ link.label }}</span>
                       </a>

client/src/app/menu/menu.component.scss

@@ -27,7 +27,7 @@
   width: 24px;
   height: 24px;
   border-radius: 100%;
-  background-color: pvar-fallback(--menu-bg, --bg-secondary-500);
+  background-color: pvar-fallback(--menu-bg, --bg-secondary-450);
 
   @include button-with-icon(20px, 0, 0, 1px);
 
@@ -116,9 +116,7 @@
       margin: 1rem auto;
     }
   }
-}
 
-.collapsed {
   .main-menu-wrapper {
     max-height: 100%;
   }
@@ -137,6 +135,10 @@
 
   .menu-link {
     justify-content: center;
+
+    my-global-icon {
+      color: pvar-fallback(--menu-fg, --fg-400);
+    }
   }
 }
 
@@ -179,7 +181,6 @@
     line-height: 22px;
     position: relative;
     top: -1px;
-    color: pvar-fallback(--menu-fg, --secondary-icon-color);
 
     + *:not(.visually-hidden) {
       @include margin-left(12px);
@@ -198,10 +199,18 @@
   }
 }
 
-my-button[theme=secondary] ::ng-deep my-global-icon {
+my-button[theme=secondary] ::ng-deep my-global-icon,
+.menu-link my-global-icon {
   color: pvar(--secondary-icon-color) !important;
 }
 
+.collapsed {
+  my-button[theme=secondary] ::ng-deep my-global-icon,
+  .menu-link my-global-icon {
+    color: pvar(--fg-200) !important;
+  }
+}
+
 .menu-overlay {
   background-color: #000;
   width: 100vw;

client/src/app/shared/shared-video-miniature/video-miniature.component.scss

@@ -17,8 +17,6 @@ $more-button-width: 40px;
 }
 
 .video-info {
-  width: calc(100% - #{$more-button-width});
-
   display: grid;
 }
 
@@ -92,6 +90,10 @@ $more-button-width: 40px;
   padding-bottom: 1rem;
   width: 100%;
 
+  .video-info {
+    width: calc(100% - #{$more-button-width});
+  }
+
   my-video-thumbnail {
     margin-bottom: 0.35rem;