Accessibility in web development: 8 mistakes to avoid (3/3)

				
					
  import { Component } from '@angular/core';

@Component({
  selector: 'my-dropdown',
  templateUrl: './my-dropdown.component.html'
})

export class MyDropdownComponent {

  /**
   * The possible values
   */
  options = ['Choose a value', 'first value', 'second value', 'third value'];

  /**
   * The selected value
   */
  selectedValue = this.options[1];

  /**
   * Manage the display of the list of values
   */
  protected isOpened = false;

  /**
   * The currently active value using keyboard management
   */
  protected activeValue!: string;

  /**
   * The currently active value using keyboard management
   */
  protected activeValueIndex!: number;

  /**
   * Select the value and focus the dropdown input
   */
  selectValue(value: string): void {
    this.selectedValue = value;
    this.activeValue = value;
    this.isOpened = false;
  }

  /**
   * Trigger the opening of the dropdown and the focus element
   */
  protected triggerOpening(): void {
    this.isOpened = !this.isOpened;

    if (this.isOpened) {
      this.setActiveItem(this.selectedValue);
    } else {
      this.selectValue(this.activeValue);
    }
  }

  protected manageInputKeydown(event: KeyboardEvent): void {
    switch (event.code) {
      case 'Enter':
      case 'NumpadEnter':
      case 'Space':
        this.triggerOpening();
        break;
      case 'ArrowUp':
        if (this.isOpened) {
          if (this.activeValueIndex > 0) {
            this.setActiveItem(this.options[this.activeValueIndex - 1]);
          }
        }
        break;
      case 'ArrowDown':
        if (this.isOpened) {
          if (this.activeValueIndex < this.options.length) {
            this.setActiveItem(this.options[this.activeValueIndex + 1]);
          }
        }
    }
  }

  protected manageBackdropKeydown(event: KeyboardEvent): void {
    switch (event.code) {
      case 'Enter':
      case 'NumpadEnter':
      case 'Space':
      case 'Escape':
        this.isOpened = false;
    }
  }

  protected manageOptionKeydown(event: KeyboardEvent, value: string): void {
    switch (event.code) {
      case 'Enter':
      case 'NumpadEnter':
        this.selectValue(value);
        break;
      case 'Escape':
        this.isOpened = false;
        break;
    }
  }

  /**
   * Set the active item after keyboard navigation
   */
  private setActiveItem(id: string): void {
    const item = this.options.find(option => option === id);
    if (item) {
      this.activeValue = item;
      this.activeValueIndex = this.options.findIndex(option => option === id);
    }
  }
}