refactor(admin-ui): Re-work user menu for better keyboard accessibility

vendure-ecommerce · Jun 30, 2023 · f5dfc2f · f5dfc2f
1 parent d9c6cdd
commit f5dfc2f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 8 deletions.
diff --git a/packages/admin-ui/src/lib/core/src/components/theme-switcher/theme-switcher.component.html b/packages/admin-ui/src/lib/core/src/components/theme-switcher/theme-switcher.component.html
@@ -1,4 +1,4 @@
-<button *ngIf="activeTheme$ | async as activeTheme" class="theme-toggle" (click)="toggleTheme(activeTheme)">
+<button *ngIf="activeTheme$ | async as activeTheme" class="theme-toggle">
     <span>{{ 'common.theme' | translate }}</span>
     <div class="theme-icon default" [class.active]="activeTheme === 'default'">
         <clr-icon shape="sun" class="is-solid"></clr-icon>

diff --git a/packages/admin-ui/src/lib/core/src/components/theme-switcher/theme-switcher.component.scss b/packages/admin-ui/src/lib/core/src/components/theme-switcher/theme-switcher.component.scss
@@ -1,5 +1,5 @@
 :host {
-    display: inline-flex;
+    display: flex;
     justify-content: center;
     align-items: center;
 }

diff --git a/packages/admin-ui/src/lib/core/src/components/theme-switcher/theme-switcher.component.ts b/packages/admin-ui/src/lib/core/src/components/theme-switcher/theme-switcher.component.ts
@@ -1,5 +1,6 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, HostListener, Input, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
 
 import { DataService } from '../../data/providers/data.service';
 import { LocalStorageService } from '../../providers/local-storage/local-storage.service';
@@ -19,6 +20,12 @@ export class ThemeSwitcherComponent implements OnInit {
         this.activeTheme$ = this.dataService.client.uiState().mapStream(data => data.uiState.theme);
     }
 
+    @HostListener('click', ['$event'])
+    @HostListener('keydown.enter', ['$event'])
+    onHostClick() {
+        this.activeTheme$.pipe(take(1)).subscribe(current => this.toggleTheme(current));
+    }
+
     toggleTheme(current: string) {
         const newTheme = current === 'default' ? 'dark' : 'default';
         this.dataService.client.setUiTheme(newTheme).subscribe(() => {

diff --git a/packages/admin-ui/src/lib/core/src/components/user-menu/user-menu.component.html b/packages/admin-ui/src/lib/core/src/components/user-menu/user-menu.component.html
@@ -1,13 +1,13 @@
 <vdr-dropdown>
     <button class="trigger user-menu-btn" vdrDropdownTrigger>
         <div class="user-circle">
-        <clr-icon shape="user" size="16"></clr-icon>
+            <clr-icon shape="user" size="16"></clr-icon>
         </div>
         <span class="user-name">{{ userName }}</span>
         <clr-icon class="md:hidden" shape="caret down"></clr-icon>
     </button>
     <vdr-dropdown-menu vdrPosition="bottom-right">
-        <a [routerLink]="['/settings', 'profile']" vdrDropdownItem>
+        <a [routerLink]="['/settings', 'profile']" vdrDropdownItem tabindex="0">
             <clr-icon shape="user" class="is-solid"></clr-icon> {{ 'settings.profile' | translate }}
         </a>
         <ng-container *ngIf="1 < availableLanguages.length">
@@ -20,9 +20,7 @@
                 <clr-icon shape="language"></clr-icon> {{ uiLanguageAndLocale?.[0] | localeLanguageName }}
             </button>
         </ng-container>
-        <div class="dropdown-item">
-            <vdr-theme-switcher></vdr-theme-switcher>
-        </div>
+        <vdr-theme-switcher vdrDropdownItem tabindex="0"></vdr-theme-switcher>
         <div class="dropdown-divider"></div>
         <button type="button" vdrDropdownItem (click)="logOut.emit()">
             <clr-icon shape="logout"></clr-icon> {{ 'common.log-out' | translate }}