Fixed invalid html structure the ExpandableNavbarSectionComponent had…

… an ul tag containing non-li tags (cherry picked from commit fa56d5d)
DSpace · Oct 23, 2023 · d7dba4b · d7dba4b
1 parent e82a1eb
commit d7dba4b
Show file tree

Hide file tree

Showing 11 changed files with 12 additions and 20 deletions.
diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
@@ -12,8 +12,7 @@ import { Router } from '@angular/router';
  * Represents a non-expandable section in the admin sidebar
  */
 @Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-admin-sidebar-section]',
+  selector: 'ds-admin-sidebar-section',
   templateUrl: './admin-sidebar-section.component.html',
   styleUrls: ['./admin-sidebar-section.component.scss'],
 

diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html
@@ -26,10 +26,10 @@ <h4 class="section-header-text mb-0">{{ 'menu.header.admin' | translate }}</h4>
               </div>
             </li>
 
-            <ng-container *ngFor="let section of (sections | async)">
+            <li *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>
+            </li>
         </ul>
     </div>
     <div class="navbar-nav">

diff --git a/...in-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/...in-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
@@ -15,8 +15,7 @@ import { Router } from '@angular/router';
  * Represents a expandable section in the sidebar
  */
 @Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-expandable-admin-sidebar-section]',
+  selector: 'ds-expandable-admin-sidebar-section',
   templateUrl: './expandable-admin-sidebar-section.component.html',
   styleUrls: ['./expandable-admin-sidebar-section.component.scss'],
   animations: [rotate, slide, bgColor]

diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -14,9 +14,9 @@
     </a>
     <ul @slide *ngIf="(active | async)" (click)="deactivateSection($event)"
         class="m-0 shadow-none border-top-0 dropdown-menu show">
-        <ng-container *ngFor="let subSection of (subSections$ | async)">
+        <li *ngFor="let subSection of (subSections$ | async)">
             <ng-container
                     *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
-        </ng-container>
+        </li>
     </ul>
 </div>
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -4,7 +4,6 @@ import { MenuService } from '../../shared/menu/menu.service';
 import { slide } from '../../shared/animations/slide';
 import { first } from 'rxjs/operators';
 import { HostWindowService } from '../../shared/host-window.service';
-import { rendersSectionForMenu } from '../../shared/menu/menu-section.decorator';
 import { MenuID } from '../../shared/menu/menu-id.model';
 
 /**
@@ -16,7 +15,6 @@ import { MenuID } from '../../shared/menu/menu-id.model';
   styleUrls: ['./expandable-navbar-section.component.scss'],
   animations: [slide]
 })
-@rendersSectionForMenu(MenuID.PUBLIC, true)
 export class ExpandableNavbarSectionComponent extends NavbarSectionComponent implements OnInit {
   /**
    * This section resides in the Public Navbar

diff --git a/src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/themed-expandable-navbar-section.component.ts
@@ -8,8 +8,7 @@ import { MenuID } from '../../shared/menu/menu-id.model';
  * Themed wrapper for ExpandableNavbarSectionComponent
  */
 @Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-themed-expandable-navbar-section]',
+  selector: 'ds-themed-expandable-navbar-section',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
 })

diff --git a/src/app/navbar/navbar-section/navbar-section.component.ts b/src/app/navbar/navbar-section/navbar-section.component.ts
@@ -8,8 +8,7 @@ import { MenuID } from '../../shared/menu/menu-id.model';
  * Represents a non-expandable section in the navbar
  */
 @Component({
-  /* eslint-disable @angular-eslint/component-selector */
-  selector: 'li[ds-navbar-section]',
+  selector: 'ds-navbar-section',
   templateUrl: './navbar-section.component.html',
   styleUrls: ['./navbar-section.component.scss']
 })

diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
@@ -8,9 +8,9 @@
                     <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
                         <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
                     </li>
-                    <ng-container *ngFor="let section of (sections | async)">
+                    <li *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>
+                    </li>
                 </ul>
             </div>
         </div>

diff --git a/...-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts b/...-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts
@@ -13,7 +13,6 @@ import { hasValue } from '../../../empty.util';
  * Represents an expandable section in the dso edit menus
  */
 @Component({
-  /* tslint:disable:component-selector */
   selector: 'ds-dso-edit-menu-expandable-section',
   templateUrl: './dso-edit-menu-expandable-section.component.html',
   styleUrls: ['./dso-edit-menu-expandable-section.component.scss'],

diff --git a/...pp/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.ts b/...pp/shared/dso-page/dso-edit-menu/dso-edit-menu-section/dso-edit-menu-section.component.ts
@@ -10,7 +10,6 @@ import { MenuSection } from '../../../menu/menu-section.model';
  * Represents a non-expandable section in the dso edit menus
  */
 @Component({
-  /* tslint:disable:component-selector */
   selector: 'ds-dso-edit-menu-section',
   templateUrl: './dso-edit-menu-section.component.html',
   styleUrls: ['./dso-edit-menu-section.component.scss']

diff --git a/src/themes/dspace/app/navbar/navbar.component.html b/src/themes/dspace/app/navbar/navbar.component.html
@@ -10,9 +10,9 @@
         <li *ngIf="(isXsOrSm$ | async) && (isAuthenticated$ | async)">
             <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
         </li>
-        <ng-container *ngFor="let section of (sections | async)">
+        <li *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>
+        </li>
       </ul>
     </div>
     <div class="navbar-buttons">