Angular 2+ Добавление доступа к клавиатуре и навигации в выпадающих меню - PullRequest
Новая
       42

Angular 2+ Добавление доступа к клавиатуре и навигации в выпадающих меню

0 голосов
/ 08 апреля 2019

У меня выпадающая навигация, и я хочу добавить навигацию с помощью клавиатуры арии. У меня должен быть плохой html / css настроенный, потому что это кажется тяжелым сражением для каждого нюанса (меню в порядке вкладок, делайте ссылки кликабельными, закрывайте меню при нажатии и т. Д.) 

   <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>

Я просто пытаюсь открыть меню при наведении и закрытии, когда выбран какой-либо параметр или мышь убрана. Он работает нормально, однако добавление части клавиатуры доставляет мне проблемы.

...