ボタンを押してドロップダウンアイテムを「クリック可能」にする方法は？

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

このアイテムにはタブインデックスが0になります。このような要素のほとんどはデフォルトではタブブルではないため、このインデックスは0です。

<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とメニューの役割を追加しました。