Fix top sub menu accessibility

client/src/app/app.component.html

@@ -10,7 +10,7 @@
 
     <div class="top-left-block">
       <button
-        class="border-0 padding-0" [title]="getToggleTitle()" (click)="menu.toggleMenu()" (keyup.enter)="menu.toggleMenu()"
+        class="border-0 p-0" [title]="getToggleTitle()" (click)="menu.toggleMenu()" (keyup.enter)="menu.toggleMenu()"
         [ariaExpanded]="menu.isMenuDisplayed" aria-controls="left-menu"
       >
         <span class="icon icon-menu"></span>
@@ -61,7 +61,7 @@
         <p>{{ message.detail }}</p>
       </div>
 
-      <button class="border-0 padding-0">
+      <button class="border-0 p-0">
         <my-global-icon [iconName]="getNotificationIcon(message)"></my-global-icon>
       </button>
     </div>

client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html

@@ -1,66 +1,64 @@
 <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }">
-  <ng-container *ngFor="let menuEntry of menuEntries; index as id">
+  <ul *ngFor="let menuEntry of menuEntries; index as id">
 
-    <a
+    <li *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)">
-      *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)" class="sub-menu-entry"
+      <a
-      [routerLink]="menuEntry.routerLink" routerLinkActive="active" #routerLink
+        class="sub-menu-entry" [routerLink]="menuEntry.routerLink" routerLinkActive="active"
-      (click)="onActiveLinkScrollToTop(routerLink)"
+        #routerLink (click)="onActiveLinkScrollToTop(routerLink)" ariaCurrentWhenActive="page"
-    >
+      >{{ menuEntry.label }}</a>
-      {{ menuEntry.label }}
+    </li>
-    </a>
 
-    <div *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)" ngbDropdown class="parent-entry"
+    <ng-container *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)">
-      #dropdown="ngbDropdown" autoClose="true" container="body">
+      <!-- On mobile, use a modal to display sub menu items -->
-      <span
+      <li *ngIf="isInSmallView">
-        *ngIf="isInSmallView"
+        <button class="sub-menu-entry" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" (click)="openModal(id)">
-        tabindex=0
+          {{ menuEntry.label }}
-        [ngClass]="{ active: !!suffixLabels[menuEntry.label] }"
-        (click)="openModal(id)" (keydown.enter)="openModal(id)"
-        role="button" class="sub-menu-entry">
-        <ng-container i18n>{{ menuEntry.label }}</ng-container>
-      </span>
 
-      <span
+          <span class="chevron-down"></span>
-        *ngIf="!isInSmallView"
+        </button>
-        tabindex=0
+      </li>
-        [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" ngbDropdownAnchor
-        (click)="dropdownAnchorClicked(dropdown)" (keydown.enter)="dropdownAnchorClicked(dropdown)"
-        role="button" class="sub-menu-entry"
-      >
-        <ng-container i18n>{{ menuEntry.label }}</ng-container>
-      </span>
 
-      <div ngbDropdownMenu>
+      <!-- On desktop, use a classic dropdown -->
-        <ng-container *ngFor="let menuChild of menuEntry.children">
+      <div *ngIf="!isInSmallView" ngbDropdown #dropdown="ngbDropdown" autoClose="true" container="body">
-          <a *ngIf="isDisplayed(menuChild)" class="dropdown-item"
+        <li>
-            [ngClass]="{ icon: hasIcons }"
+          <button ngbDropdownToggle class="sub-menu-entry" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }">{{ menuEntry.label }}</button>
-            [routerLink]="menuChild.routerLink"
+        </li>
-            #routerLink (click)="onActiveLinkScrollToTop(routerLink)">
-            <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
 
-            {{ menuChild.label }}
+        <ul ngbDropdownMenu>
-          </a>
+          <li *ngFor="let menuChild of menuEntry.children">
-        </ng-container>
+            <a
+              *ngIf="isDisplayed(menuChild)" ngbDropdownItem
+              [ngClass]="{ icon: hasIcons }" routerLinkActive="active" ariaCurrentWhenActive="page"
+              [routerLink]="menuChild.routerLink" #routerLink (click)="onActiveLinkScrollToTop(routerLink)"
+            >
+              <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
+
+              {{ menuChild.label }}
+            </a>
+          </li>
+        </ul>
       </div>
-    </div>
+    </ng-container>
-  </ng-container>
+  </ul>
 </div>
 
 <ng-template #modal let-close="close" let-dismiss="dismiss">
   <div class="modal-body">
     <ng-container *ngFor="let menuEntry of menuEntries; index as id">
+
       <div [ngClass]="{ hidden: id !== currentMenuEntryIndex }">
         <ng-container *ngFor="let menuChild of menuEntry.children">
-          <a *ngIf="isDisplayed(menuChild)"
+          <a
-            [ngClass]="{ icon: hasIcons }"
+            *ngIf="isDisplayed(menuChild)" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink" routerLinkActive="active"
-            [routerLink]="menuChild.routerLink" routerLinkActive="active"
+            #routerLink (click)="dismissOtherModals(); onActiveLinkScrollToTop(routerLink)" ariaCurrentWhenActive="page"
-            #routerLink (click)="dismissOtherModals(); onActiveLinkScrollToTop(routerLink)">
+          >
             <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>
 
             {{ menuChild.label }}
           </a>
         </ng-container>
       </div>
+
     </ng-container>
   </div>
 </ng-template>

client/src/app/shared/shared-main/misc/top-menu-dropdown.component.scss

@@ -1,14 +1,10 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
-.parent-entry {
+ul {
-  span[role=button] {
+  list-style: none;
-    cursor: pointer;
+  margin: 0;
-  }
+  padding: 0;
-
-  a {
-    display: block;
-  }
 }
 
 .sub-menu ::ng-deep .dropdown-toggle::after {

client/src/sass/class-helpers/_menu.scss

@@ -5,6 +5,8 @@
   @include disable-default-a-behaviour;
   @include margin-right(55px);
 
+  border: 0;
+  padding: 0;
   opacity: 0.7;
   color: pvar(--mainForegroundColor);
   display: inline-block;