Fix accessibility issue

Author: YanaDePauw

src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html

@@ -2,18 +2,18 @@
   <div class="dso-button-menu mb-1" ngbDropdown container="body" placement="bottom-right">
     <div class="d-flex flex-row flex-nowrap"
       [ngbTooltip]="itemModel.text | translate" container="body">
-      <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" ngbDropdownToggle [dsBtnDisabled]="section.model?.disabled" role="menuitem">
+      <button [attr.aria-label]="itemModel.text | translate" [title]="itemModel.text | translate" class="btn btn-dark btn-sm" ngbDropdownToggle [dsBtnDisabled]="section.model?.disabled" role="menuitem" tabindex="0">
         <i class="fas fa-{{section.icon}} fa-fw"></i>
       </button>
-      <ul ngbDropdownMenu class="dso-edit-menu-dropdown p-1">
+      <ul ngbDropdownMenu class="dso-edit-menu-dropdown p-1" role="menu">
         @for (subSection of (subSections$ | async); track subSection) {
-          <li class="nav-item nav-link d-flex flex-row p-2">
+          <li class="nav-item nav-link d-flex flex-row p-2" role="presentation">
             @if (renderIcons$ | async) {
               <div class="me-2">
                 @if (subSection.icon) {
-                  <i class="fas fa-{{subSection.icon}} fa-fw"></i>
+                  <i class="fas fa-{{subSection.icon}} fa-fw" aria-hidden="true"></i>
                 } @else {
-                  <i class="fas fa-fw"></i>
+                  <i class="fas fa-fw" aria-hidden="true"></i>
                 }
               </div>
             }

src/app/shared/dso-page/dso-edit-menu/dso-edit-menu.component.html

@@ -1,4 +1,4 @@
-<div class="dso-edit-menu d-flex">
+<div class="dso-edit-menu d-flex" role="menubar">
   @for (section of (sections | async); track section) {
     <div class="ms-1">
       <ng-container