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

Author: davide-negretti

src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html

@@ -1,4 +1,4 @@
-<li role="presentation">
+<div>
   <a class="sidebar-section-wrapper"
      [ngClass]="{ disabled: isDisabled }"
      role="menuitem"
@@ -18,4 +18,4 @@
       </div>
     </div>
   </a>
-</li>
+</div>

src/app/admin/admin-sidebar/admin-sidebar.component.html

@@ -28,13 +28,13 @@ <h4 class="my-1">{{ 'menu.header.admin' | translate }}</h4>
   <!-- ITEMS -->
 
   <div class="sidebar-full-width-container" id="sidebar-top-level-items-container">
-    <ul class="sidebar-full-width-container" id="sidebar-top-level-items" role="menubar"
+    <div class="sidebar-full-width-container" id="sidebar-top-level-items" role="menubar"
         [attr.aria-label]="'menu.header.admin.description' |translate">
       <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>
 
   <!-- TOGGLER -->

src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html

@@ -1,4 +1,4 @@
-<li [ngClass]="{'expanded': (isExpanded$ | async)}" role="presentation"
+<div [ngClass]="{'expanded': (isExpanded$ | async)}"
     [@bgColor]="{
      value: ((isExpanded$ | async) ? 'endBackground' : 'startBackground'),
      params: {endColor: (sidebarActiveBg$ | async)}
@@ -33,14 +33,14 @@
     <div class="sidebar-fixed-element-wrapper"></div>
     <div class="sidebar-collapsible-element-outer-wrapper">
       <div class="sidebar-collapsible-element-inner-wrapper">
-        <ul class="sidebar-sub-level-item-list" role="menu" [id]="adminMenuSectionId(section.id)" [attr.aria-label]="('menu.section.' + section.id) | translate">
-          <li class="sidebar-item" role="presentation" *ngFor="let subSection of (subSections$ | async)">
+        <div class="sidebar-sub-level-item-list" role="menu" [id]="adminMenuSectionId(section.id)" [attr.aria-label]="('menu.section.' + section.id) | translate">
+          <div class="sidebar-item" *ngFor="let subSection of (subSections$ | async)">
             {{ (sectionMap$ | async).get(subSection.id).component | json}}
             <ng-container
               *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
-          </li>
-        </ul>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-</li>
+</div>

src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.scss

@@ -1,5 +1,5 @@
 :host {
-  ul.sidebar-sub-level-item-list  {
+  .sidebar-sub-level-item-list  {
     list-style: none;
     margin: 0;
     padding: 0;