フォーカスリングを描画するには?
解説
指定の要素がフォーカスされているとき、直前のパスの周りにフォーカス・リングを描くための、
drawFocusRing()というメソッドがあります。
※なお、このメソッドを実装しているブラウザはまだありません。
フォーカス・リングとは、<a>タグで表されるハイパーリンクで、フォーカスが当たっているところのまわりに描かれる、
点線の枠などのことです。この点線はTabキーなどで、別の要素に移動することができます。
Canvasは、それ自身が操作可能な場合は、フォーカス可能な部分に対応する要素を<canvas>~</canvas>の中に、代替要素として含めるべきとされています。たとえば、Canvasがチェックボックスに相当する機能を持つのであれば、
<canvas width="700" height="80">
<input type=checkbox id="chk1">
</canvas>
のように書くべきということです。このようにしておけば、代替要素であるid="chk1"の要素は、表示はされませんが、Tabキーなどによってフォーカスを受け取ることができます。
このような状況のとき、代替要素の状況に応じてCanvas上にフォーカス・リングを描くのが、drawFocusRing()メソッドの役割です。
詳しくは、次のようになります。
- 代替要素がフォーカスされていないときは、drawFocusRing()メソッドを呼び出しても何も描画されません。
- 代替要素がフォーカスされていて、カスタム描画する設定になっていなければ、ブラウザによって、パスの周りに標準のフォーカスリングが描かれます。
- 代替要素がフォーカスされていて、カスタム描画する設定になっている場合は、このメソッドはtrueを返すので、独自にフォーカス・リングを描く必要があります。このケース以外では、drawFocusRing()メソッドはfalseを返します。
ただし、ユーザーが特定の方法でフォーカス・リングを表示するよう設定している場合は、2のパターンになります。
drawFocusRing()メソッドの書式は次のようになっています。
shouldDraw = context.drawFocusRing(element, [canDrawCustom]);
elementには代替要素のコントロールのオブジェクトを指定します。
canDrawCustomには、カスタム描画する準備があればtrueを渡します。
省略するとfalseが渡されたのと同じ意味になります。
shouldDrawがtrueの場合は、独自にフォーカス・リングを描くことが期待されます。
※実装しているブラウザがないため、サンプルはありません。
関連項目
Canvasとは