[DURACOM-195] replace ul/li with div in navbar

Author: davide-negretti

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html

@@ -1,4 +1,4 @@
-<li class="ds-menu-item-wrapper text-md-center" role="presentation"
+<div class="ds-menu-item-wrapper text-md-center"
     [id]="'expandable-navbar-section-' + section.id"
     (mouseenter)="onMouseEnter($event, isActive)"
     (mouseleave)="onMouseLeave($event, isActive)"
@@ -24,13 +24,13 @@
       </span>
       <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
     </a>
-    <ul @slide *ngIf="isActive" (click)="deactivateSection($event)"
+    <div @slide *ngIf="isActive" (click)="deactivateSection($event)"
         [id]="expandableNavbarSectionId(section.id)"
         role="menu"
         class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
-        <li *ngFor="let subSection of (subSections$ | async)" class="text-nowrap" role="presentation">
+        <div *ngFor="let subSection of (subSections$ | async)" class="text-nowrap" role="presentation">
             <ng-container
                     *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
-        </li>
-    </ul>
-</li>
+        </div>
+    </div>
+</div>

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss

@@ -1,5 +1,5 @@
 :host {
-  li.ds-menu-item-wrapper {
+  .ds-menu-item-wrapper {
     position: relative; // align dropdown menu with respect to this element
   }
 

src/app/navbar/navbar-section/navbar-section.component.html

@@ -1,5 +1,4 @@
-<li role="presentation"
-    class="ds-menu-item-wrapper text-md-center"
-    [id]="'navbar-section-' + section.id">
+<div class="ds-menu-item-wrapper text-md-center"
+     [id]="'navbar-section-' + section.id">
   <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-</li>
+</div>

src/app/navbar/navbar.component.html

@@ -9,12 +9,12 @@
         <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
           <ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu>
         </ng-container>
-        <ul class="navbar-nav align-items-md-center mr-auto shadow-none gapx-3">
+        <div class="navbar-nav align-items-md-center mr-auto shadow-none gapx-3">
           <ng-container *ngFor="let section of (sections | async)">
             <ng-container
               *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
           </ng-container>
-        </ul>
+        </div>
       </div>
     </div>
   </div>

src/themes/dspace/app/navbar/navbar.component.html

@@ -1,9 +1,9 @@
 <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
   <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
 </ng-container>
-<ul class="navbar-nav h-100 align-items-md-stretch gapx-3" role="menubar">
+<div class="navbar-nav h-100 align-items-md-stretch gapx-3" role="menubar">
   <ng-container *ngFor="let section of (sections | async)">
     <ng-container
       *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
   </ng-container>
-</ul>
+</div>