ZCU-DATA/Cherry-pick Fix duplicate id (#1240)

* Changed id to class

* Fix duplicate id license_option

---------

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

Author: Kasinhou

cypress/e2e/header.cy.ts

@@ -12,7 +12,6 @@ describe('Header', () => {
         // testA11y({
         //     include: ['ds-header'],
         //     exclude: [
-        //         ['#search-navbar-container'], // search in navbar has duplicative ID. Will be fixed in #1174
         //         ['.dropdownLogin']            // "Log in" link has color contrast issues. Will be fixed in #1149
         //     ],
         // });

src/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/app/search-navbar/search-navbar.component.spec.ts

@@ -72,7 +72,7 @@ describe('SearchNavbarComponent', () => {
       spyOn(component, 'expand').and.callThrough();
       spyOn(component, 'onSubmit').and.callThrough();
       spyOn(router, 'navigate');
-      const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon'));
+      const searchIcon = fixture.debugElement.query(By.css('.search-navbar-container form .submit-icon'));
       searchIcon.triggerEventHandler('click', {
         preventDefault: () => {/**/
         }
@@ -88,7 +88,7 @@ describe('SearchNavbarComponent', () => {
     describe('empty query', () => {
       describe('press submit button', () => {
         beforeEach(fakeAsync(() => {
-          const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon'));
+          const searchIcon = fixture.debugElement.query(By.css('.search-navbar-container form .submit-icon'));
           searchIcon.triggerEventHandler('click', {
             preventDefault: () => {/**/
             }
@@ -109,14 +109,14 @@ describe('SearchNavbarComponent', () => {
       beforeEach(async () => {
         await fixture.whenStable();
         fixture.detectChanges();
-        searchInput = fixture.debugElement.query(By.css('#search-navbar-container form input'));
+        searchInput = fixture.debugElement.query(By.css('.search-navbar-container form input'));
         searchInput.nativeElement.value = 'test';
         searchInput.nativeElement.dispatchEvent(new Event('input'));
         fixture.detectChanges();
       });
       describe('press submit button', () => {
         beforeEach(fakeAsync(() => {
-          const searchIcon = fixture.debugElement.query(By.css('#search-navbar-container form .submit-icon'));
+          const searchIcon = fixture.debugElement.query(By.css('.search-navbar-container form .submit-icon'));
           searchIcon.triggerEventHandler('click', null);
           tick();
           fixture.detectChanges();

src/app/submission/sections/clarin-license-resource/section-license.component.html

@@ -64,11 +64,11 @@
               <li class="dropdown-item clarin-dropdown-item pt-2" value="0" (click)="selectLicense(0)">
                 <b>{{'submission.sections.clarin-license.head.license-select-default-value' | translate}}</b>
               </li>
-              <li class="dropdown-item clarin-dropdown-item pt-2"
+              <li class="dropdown-item clarin-dropdown-item pt-2 license-option"
                   *ngFor="let license of filteredLicenses4Selector"
                   (click)="selectLicense(license.id)"
                   [value]="license.id"
-                  id="license_option">
+                  [id]="'license_option_' + license.id">
                 <span [class]="'label label-default label-' + license.licenseLabel">{{license.licenseLabel}}</span>
                 <b class="pl-1">{{license.name}}</b>
               </li>