130479: add aria-selected to selected language + globe button uses a button element

Author: Wout-atmire

src/app/shared/lang-switch/lang-switch.component.html

@@ -1,17 +1,18 @@
 <div ngbDropdown class="navbar-nav" *ngIf="moreThanOneLanguage" display="dynamic" placement="bottom-right">
-  <a href="javascript:void(0);" role="button"
-     [attr.aria-label]="'nav.language' |translate"
-     [title]="'nav.language' | translate" class="px-1"
-     (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle
-     tabindex="0">
+  <button role="button"
+          [attr.aria-label]="'nav.language' |translate"
+          [title]="'nav.language' | translate" class="dropdown-toggle px-1"
+          (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle
+          tabindex="0">
     <i class="fas fa-globe-asia fa-lg fa-fw"></i>
-  </a>
-  <ul ngbDropdownMenu class="dropdown-menu" [attr.aria-label]="'nav.language' |translate">
-    <li class="dropdown-item" tabindex="0" #langSelect *ngFor="let lang of translate.getLangs()"
-            (keyup.enter)="useLang(lang)"
-            (click)="useLang(lang)"
-            [class.active]="lang === translate.currentLang">
-                {{ langLabel(lang) }}
-    </li>
-  </ul>
+  </button>
+  <div ngbDropdownMenu class="dropdown-menu" role="listbox" [attr.aria-label]="'nav.language' |translate">
+    <div class="dropdown-item" tabindex="0" role="option" *ngFor="let lang of translate.getLangs()"
+         (keyup.enter)="useLang(lang)"
+         (click)="useLang(lang)"
+         [attr.aria-selected]="lang === translate.currentLang"
+         [class.active]="lang === translate.currentLang">
+      {{ langLabel(lang) }}
+    </div>
+  </div>
 </div>

src/app/shared/lang-switch/lang-switch.component.scss

@@ -3,6 +3,7 @@
 }
 
 .dropdown-toggle {
+  all: unset;
   color: var(--ds-header-icon-color);
 
   &:hover, &:focus {

src/app/shared/lang-switch/lang-switch.component.spec.ts

@@ -109,7 +109,7 @@ describe('LangSwitchComponent', () => {
     }));
 
     it('should define the main A HREF in the UI', (() => {
-      expect(langSwitchElement.querySelector('a')).not.toBeNull();
+      expect(langSwitchElement.querySelector('button.dropdown-toggle')).not.toBeNull();
     }));
 
     describe('when selecting a language', () => {