如何通过输入按钮使下拉项目“可点击”？

Question

我正在开发一个包含Angular和Semantic-UI的应用程序。

我有类似下面的下拉菜单：https://plnkr.co/edit/BTCxfk

<div class="ui right labeled top pointing floating icon button dropdown"> 
    <i class="icon folder open"></i> 
    <span class="text">Menu</span> 
    <div class="menu"> 
     <div class="item" (click)="onClickItem()" *ngFor="#m of menu"> 
      <i class="icon sign in"></i> 
      {{m}} 
     </div> 
    </div> 
</div> 

我想有一个用户可以点击使用tab和enter按钮的单个项目。

正如你所看到的，他们只能朝菜单项移动，但他们不能触发点击事件。

有什么想法？

Answer 1

我会给这个项目一个tab-index为0，因为像这样的大多数元素在默认情况下是不可tabbable的。

<div class="ui right labeled top pointing floating icon button dropdown"> 
    <i class="icon folder open"></i> 
    <span class="text" tabindex="0" role="menu">Menu</span> 
    <div class="menu"> 
     <div class="item" (click)="onClickItem()" *ngFor="#m of menu"> 
      <i class="icon sign in"></i> 
      {{m}} 
     </div> 
    </div> 
</div> 

我添加了标签索引0和菜单的作用。