ドロップダウンのタブインデックスの作成方法

Question

私はブートストラップドロップダウンコンポーネントを持つヘッダを持っており、tabindexを使ってその要素へのキーボードナビゲーションを有効にしようとしています。以下は、HTMLやCSSシンプルです：

HTML: 
<span class="pull-right"> 
    <span class="help-menu dropdown"> 
     <span class="dropdown-toggle" data-toggle="dropdown" role="button"> 
      <span class="help-header" tab-index="0">Help</span> 
     </span> 
      <ul class="dropdown-menu pull-right" tabindex="-1" role="menu"> 
      <li tabindex="-1"><a [href]="/help.html" target="_blank">Docs</a></li> 
      </ul> 
    </span> 
</span> 

CSS：

.help-header{ 
    &:after{ 
     content: "\25BE"; //caret should be displayed! 
    } 
} 
.help-menu{ 
    display: inline-block; 
    cursor: pointer; 
    background: aqua; 
    margin-top: 10px; 
    margin-right: 20px; 
} 

ここでは、今、フィドルlink

で、ヘルプは、私はタブを行うときにフォーカスを取得しません。しかし、help-headerクラスからtabindexを削除し、それをクラスプル右のスパンまたはクラスhelp-menuとドロップダウンのスパンのいずれかに適用すると、ヘルプテキストにタブが表示されます。それは焦点が合っていても、打撃や宇宙、下向き矢印のドロップダウンを見ることはできません。

私は本当にこの作業を行う方法がわかりません。私はしばらくそれを理解しようとしていたが、失敗した。

ここでは、tabindexのコアコ​​ンセプトがありません。誰でも私を助けてくれるか、正しい方向に向けることができますか？

ありがとうございます。

乾杯。

Answer 1

tabindex属性は、ページ内の フォーカス可能な要素（通常はリンクとフォームコントロール）のナビゲーション順序を明示的に定義します。 要素をフォーカス可能にするか、 にするかを定義するために使用することもできます。

[両方] tabindex = "0"とtabindex = " - 1"は特別な意味を持ち、HTML内に別の機能を提供します（ ）。値0は、 要素をデフォルトのナビゲーション順序に配置する必要があることを示します。これにより、ネイティブにフォーカスすることができない要素（<div>、<span>、および <p>など）がキーボードフォーカスを受け取ることができるようになる 要素が許可されます。もちろん、すべての対話型要素に対して、通常は のリンクとフォームコントロールを使用する必要がありますが、 は、他の要素にフォーカスを合わせて相互作用を引き起こすことができます。

でtabindex =「 - 1」値は、デフォルトのナビゲーション フロー（すなわち、ユーザーはそれにタブすることはできません）から要素を削除しますが、それは焦点がそれに設定することができることを意味し、それは プログラムでフォーカスを受け取ることができます** にタブするべきではない要素には非常に便利ですが、フォーカスが設定されている必要があります。

良い例は、モーダルダイアログウィンドウです。開いたときにフォーカスが に設定されていると、スクリーンリーダーが読み込みを開始し、 キーボードがダイアログ内でナビゲートを開始します。ダイアログ （おそらくちょうど<div>要素）はデフォルトでフォーカス可能ではないので、 というtabindex = " - 1"を割り当てると、 が表示されているときにスクリプトでフォーカスが設定されます。

-1の値はまた、ウィジェット内の一つだけ 要素はタブキーでナビゲート可能であることを保証するために矢印キーまたは他のショートカットキーを利用 複合ウィジェットとメニューに有用であり得るが、それでも がフォーカスを可能にしますウィジェット内の他のコンポーネントに設定することができます。

あなたが特定の要素を設定したいのであれば要約すると、あなたはに値を変更する必要がありキーボード]タブで有効にすること。