VSB-TUO/Fix duplicate id search-navbar-container and loginDropdownMenu (#1245)

Co-authored-by: Matus Kasak <matus.kasak@dataquest.sk>

Author: Kasinhou

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

@@ -1,4 +1,4 @@
-<div [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
+<div class="search-navbar-container" [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
   <div class="d-inline-block position-relative">
     <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"

src/app/shared/auth-nav-menu/auth-nav-menu.component.html

@@ -9,12 +9,11 @@
               role="button"
               tabindex="0"
               aria-haspopup="menu"
-              aria-controls="loginDropdownMenu"
               [attr.aria-expanded]="loginDrop.isOpen()"
               ngbDropdownToggle>
         {{ 'nav.login' | translate }}
       </button>
-      <div id="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
+      <div class="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
            role="dialog"
            aria-modal="true"
            [attr.aria-label]="'nav.login' | translate">
@@ -35,7 +34,7 @@
         [attr.data-test]="'user-menu' | dsBrowserOnly"
         ngbDropdownToggle>
         <i class="fas fa-user-circle fa-lg fa-fw"></i></button>
-      <div id="logoutDropdownMenu" ngbDropdownMenu>
+      <div class="logoutDropdownMenu" ngbDropdownMenu>
         <ds-user-menu [inExpandableNavbar]="false"></ds-user-menu>
       </div>
     </div>

src/app/shared/auth-nav-menu/auth-nav-menu.component.scss

@@ -1,9 +1,9 @@
-#loginDropdownMenu, #logoutDropdownMenu {
+.loginDropdownMenu, .logoutDropdownMenu {
   min-width: 330px;
   z-index: 1002;
 }
 
-#loginDropdownMenu {
+.loginDropdownMenu {
   min-height: 75px;
 }
 

src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts

@@ -214,7 +214,7 @@ describe('AuthNavMenuComponent', () => {
         });
 
         it('should render login dropdown menu', () => {
-          const loginDropdownMenu = deNavMenuItem.query(By.css('div#loginDropdownMenu'));
+          const loginDropdownMenu = deNavMenuItem.query(By.css('div.loginDropdownMenu'));
           expect(loginDropdownMenu.nativeElement).toBeDefined();
         });
       });

src/themes/custom/app/search-navbar/search-navbar.component.html

@@ -1,4 +1,4 @@
-<div id="search-navbar-container" [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
+<div class="search-navbar-container" [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
   <div class="d-inline-block position-relative">
     <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"

src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.html

@@ -9,12 +9,11 @@
               role="button"
               tabindex="0"
               aria-haspopup="menu"
-              aria-controls="loginDropdownMenu"
               [attr.aria-expanded]="loginDrop.isOpen()"
               ngbDropdownToggle>
         {{ 'nav.login' | translate }}
       </button>
-      <div id="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
+      <div class="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
            role="dialog"
            aria-modal="true"
            [attr.aria-label]="'nav.login' | translate">
@@ -35,7 +34,7 @@
         [attr.data-test]="'user-menu' | dsBrowserOnly"
         ngbDropdownToggle>
         <i class="fas fa-user-circle fa-lg fa-fw"></i></button>
-      <div id="logoutDropdownMenu" ngbDropdownMenu>
+      <div class="logoutDropdownMenu" ngbDropdownMenu>
         <ds-themed-user-menu [inExpandableNavbar]="false"></ds-themed-user-menu>
       </div>
     </div>

src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.scss

@@ -1,4 +1,4 @@
-#loginDropdownMenu, #logoutDropdownMenu {
+.loginDropdownMenu, .logoutDropdownMenu {
   min-width: 330px;
   z-index: 1002;
 }