Question

我们正在使用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>

如何仅使用键盘打开VMware Clarity <clr-dropdown>组件？

0 个答案: