[Patch] Fix #339 Dropdown keyboard focus

projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown-option/dxc-dropdown-option.component.html

@@ -1,4 +1,4 @@
-<button mat-menu-item (click)="selectedOption()" class="option">
+<button mat-menu-item (keydown)="arrowKey($event)" (click)="selectedOption()" class="option">
   <div>
     <ng-content select="dxc-dropdown-icon"></ng-content>
     {{label}}

projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown-option/dxc-dropdown-option.component.ts

@@ -1,5 +1,13 @@
-import { Component, EventEmitter, Input, OnChanges, Output } from "@angular/core";
-import { DropdownService } from '../services/dropdown.service';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  ViewChild,
+} from "@angular/core";
+import { MatMenuItem } from "@angular/material/menu";
+import { DropdownService } from "../services/dropdown.service";
 
 @Component({
   selector: "dxc-dropdown-option",
@@ -8,13 +16,33 @@ import { DropdownService } from '../services/dropdown.service';
 export class DxcDropdownOptionComponent implements OnChanges {
   @Input() public value;
   @Input() public label: string;
-
-  constructor(private service: DropdownService) {}
 
-  public ngOnChanges(): void {
+  @ViewChild(MatMenuItem) menuItem: MatMenuItem;
+
+  constructor(private service: DropdownService) {
+    this.service.items.push(this);
+  }
+
+  public ngOnChanges(): void {}
+
+  setFocus() {
+    this.menuItem?.focus();
+  }
+
+  arrowKey($event) {
+    if ($event.keyCode === 40 || $event.keyCode === 38) {
+      $event.preventDefault();
+      const direction =
+        $event.keyCode === 38
+          ? "previous"
+          : $event.keyCode === 40
+          ? "next"
+          : "";
+      this.service.changeFocus(direction, this);
+    }
   }
 
   selectedOption() {
-      this.service.setSelected(this.value);
+    this.service.setSelected(this.value);
   }
 }

projects/dxc-ngx-cdk/src/lib/dxc-dropdown/dxc-dropdown.component.ts

@@ -65,13 +65,15 @@ export class DxcDropdownComponent implements OnChanges {
   @Output() public onSelectOption: EventEmitter<any> = new EventEmitter<any>();
 
   @ViewChild("dropdownButton", { static: true }) dropdownButton;
-  @ViewChild(MatMenuTrigger, { static: false }) menu: MatMenuTrigger;
+  @ViewChild(MatMenuTrigger, { static: false }) menuTrigger: MatMenuTrigger;
+
+
 
   @HostListener("document:click", ["$event"])
   clickout(event) {
     if (!this._element.nativeElement.contains(event.target)) {
       if (this.menuOpened === "opened") {
-        this.menu.closeMenu();
+        this.menuTrigger.closeMenu();
       }
     }
   }
@@ -211,6 +213,11 @@ export class DxcDropdownComponent implements OnChanges {
             background-color: var(--dropdown-hoverBackgroundOption);
             border-color: var(--dropdown-hoverBackgroundOption);
           }
+          &.cdk-focused {
+            color: var(--dropdown-dropdownFontColor);
+            background-color: var(--dropdown-hoverBackgroundOption);
+            border-color: var(--dropdown-hoverBackgroundOption);
+          }
         }
         padding-top: 0px !important;
         padding-bottom: 0px !important;
@@ -320,6 +327,7 @@ export class DxcDropdownComponent implements OnChanges {
     this.triggerStyles = this.triggerButtonStyles(
       this.defaultInputs.getValue()
     );
+    this.menuOpened === "opened" && this.service.focusFirstItem();
   }
 
   getDynamicStyle(inputs) {

projects/dxc-ngx-cdk/src/lib/dxc-dropdown/services/dropdown.service.ts

@@ -1,15 +1,32 @@
-import { Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { Injectable } from "@angular/core";
+import { BehaviorSubject } from "rxjs";
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: "root",
 })
 export class DropdownService {
-
-  constructor() { }
+  constructor() {}
 
   public selected: BehaviorSubject<any> = new BehaviorSubject(null);
-
+
+  public items = [];
+
+  public focusFirstItem(): void {
+    this.items[0]?.setFocus();
+  }
+
+  public changeFocus(direction, focusedItem): void {
+    const index = this.items.indexOf(focusedItem);
+    if (
+      !(index === 0 && direction === "previous") ||
+      !(index === this.items.length - 1 && direction === "next")
+    ) {
+      direction === "previous"
+        ? this.items[index - 1]?.setFocus()
+        : this.items[index + 1]?.setFocus();
+    }
+  }
+
   public setSelected(selected): void {
     this.selected.next(selected);
   }

projects/dxc-ngx-cdk/src/lib/theme/complexThemeBindingStrategy.ts

@@ -155,7 +155,7 @@ export class ComplexThemeBindingStrategy implements MappingStrategy {
       this.setOpacity(theme?.dropdown?.baseColor, 0.8) ??
       tokens["--dropdown-hoverBackgroundColor"];
     proccessedTokens["--dropdown-hoverBackgroundOption"] =
-      this.setOpacity(theme?.dropdown?.baseColor, 0.34) ??
+      // this.setOpacity(theme?.dropdown?.baseColor, 0.34) ??
       tokens["--dropdown-hoverBackgroundOption"];
 
     //FOOTER

projects/dxc-ngx-cdk/src/lib/theme/componentTokens.ts

@@ -138,7 +138,7 @@ export const componentTokens = {
   "--dropdown-fontColor": globalTokens.black,
   "--dropdown-dropdownBackgroundColor": globalTokens.white,
   "--dropdown-dropdownFontColor": globalTokens.black,
-  "--dropdown-hoverBackgroundOption": globalTokens.white,
+  "--dropdown-hoverBackgroundOption": globalTokens.lightGrey,
   "--dropdown-hoverBackgroundColor": globalTokens.white,
   "--dropdown-scrollBarThumbColor": globalTokens.darkGrey,
   "--dropdown-scrollBarTrackColor": globalTokens.lightGrey,