Angular 2+在下拉菜单中添加键盘辅助功能和导航

Question

我有一个下拉式导航栏，我想添加aria键盘导航。我必须设置较差的html / css，因为这似乎对每个细微差别都是一场艰苦的战斗（按Tab键顺序排列菜单，使链接可单击，单击时关闭菜单，等等）

   <div class="section-right">
      <div class="toggles">
        <ul>

          <li [class.dropdown-active]="isDropdownActive" 
              (mouseover)="isDropdownActive=true" 
              (mouseout)="isDropdownActive=false" 
              tabindex="1"
              class="dropdown dropdown-language">
              <a id="lang-dropdown" aria-haspopup="true" aria-expanded="true" [class.green]="isDropdownActive" [class.white]="!isDropdownActive">

                <span class="icon expand" aria-hidden="true"></span>
                <span class="icon collapse" aria-hidden="true"></span>
              </a>
              <ul aria-labelledby="lang-dropdown" class="dropdown-content">
                  <li tabindex="2" lang="en" [ngClass]="{'active':getSelectedLang('en_ca')}">
                    <a (click)="isDropdownActive=false;switchLanguage('en_ca')">English
                      <span *ngIf="getSelectedLang('en_ca')" class="icon selected" aria-hidden="true"></span>
                      <span *ngIf="getSelectedLang('en_ca')" class="forscreenreader">Selected</span>
                    </a>
                  </li>
                  <li tabindex="3" lang="fr" [ngClass]="{'active':getSelectedLang('fr_ca')}">
                    <a (click)="isDropdownActive=false;switchLanguage('fr_ca')">Français
                      <span *ngIf="getSelectedLang('fr_ca')" class="icon selected" aria-hidden="true"></span>
                      <span *ngIf="getSelectedLang('fr_ca')" class="forscreenreader">Selected</span>
                    </a>
                  </li>
              </ul>
            </li>
          </ul>
      </div>
  </div>

我只是想让鼠标悬停时打开一个菜单，然后在选中某个选项或将鼠标移开时关闭菜单。它工作正常，但是增加键盘部分给我带来麻烦。