Как использовать клавиатуру только для открытия компонента VMware Clarity <clr-dropdown>? - PullRequest
Новая
       6

Как использовать клавиатуру только для открытия компонента VMware Clarity <clr-dropdown>?

0 голосов
/ 14 мая 2019

Мы используем компонент VMware Clarity.Я пытаюсь заставить работать клавиатуру, чтобы отобразилось раскрывающееся меню.Как я могу это сделать?

Я добавил tabindex = "0" к верхнему элементу и успешно вкладываю значок «Настройки», чтобы он был в фокусе.Однако я не могу понять, как открыть выпадающее меню с помощью клавиш клавиатуры.Я попытался добавить tabindex = "0" в и / или внутри, но не повезло, открыв раскрывающийся список с помощью любой из клавиш: Enter, Пробел, Стрелка вниз, Стрелка вверх. 

<div id="header-action-settings" tabindex="0" title="Settings"
   class="nav-link nav-icon">
    <clr-dropdown [clrCloseMenuOnItemClick]="true">
        <button tabindex="0" clrDropdownTrigger aria-haspopup="true">
            <clr-icon size="18" shape="dell-settings-gear"></clr-icon>
            <clr-icon shape="play right" *ngIf="settingsMenuExpanded"></clr-icon>
            <clr-icon shape="play top"*ngIf="!settingsMenuExpanded"></clr-icon>
        </button>
        <ng-template [(clrIfOpen)]="settingsMenuExpanded">
            <clr-dropdown-menu clrPosition="bottom-right">
                <label class="dropdown-header">
                    <div class="float-xs-left">System</div>
                    <div class="float-xs-right">
                        <clr-icon shape="play left" class="text-gray"></clr-icon>
                    </div>
                </label>
                <button tabindex="0" aria-haspopup="true" class="settings-system-link" type="button" (click)="showSystem()" clrDropdownItem>
                    <span tabindex="0" aria-haspopup="true" class="pl-3">System</span>
                </button>
            </clr-dropdown-menu>
        </ng-template>
    </clr-dropdown>
</div>
...