3

ラベル、チェックボックス、および 2 つのアイコン (クリック イベントを持つ) を含むカスタム レンダラーを使用するリストがあります。このリストは WCAG 2.0 に準拠する必要があり、そのためにはリストをキーボードで操作できるようにする必要があります。

問題は、あるリスト項目から次のリスト項目に移動して、次/前のリスト項目のラベルにフォーカスを移動できることです。具体的には、ユーザーが TAB ボタンを使用してリストに入ると、最初のリスト項目のラベルがフォーカスされ (テキストの周りのボックスが強調表示されます)、リスト内の行全体が選択された項目として強調表示されます。

ただし、ユーザーが下矢印キーを押して次のリスト項目に移動すると、次の行が強調表示されます (選択された項目になります) が、フォーカスは前の行のラベルに残ります (行のラベルの周りに強調表示が表示されます)。 1)。フォーカスを新しく選択した行に移動する唯一の方法は、チェックボックスと 2 つのアイコンをタブで移動することです。これは、リスト項目が 2 つしかない場合は大したことではありませんが、リストに 20 行以上ある場合は面倒です。

ユーザーが (上下のカーソル キーを使用して) 新しいリスト項目に移動するとすぐに、新しく選択された行のラベルにフォーカスを移動する方法はありますか? 写真が役立つことはわかっていますが、スクリーンショットをオンラインで投稿する方法はありません。どんな助けでも大歓迎です。

4

1 に答える 1

2

Flex でフォーカスがどのように機能するかを掘り下げる必要があります。これは完全な答えではありませんが、うまくいけば、あなたに合った解決策をまとめることができます. Flex 3 で約 4 ～ 5 年前にこれを行いましたが、Flex 4 でも同様のはずです。

Flex でのフォーカスの仕組み

主に知っておくべきことは、FocusManagerシングルトン クラスとIFocusManagerComponentインターフェイスです。

FocusManagerユーザー インタラクション (マウス クリック、キーボード ナビゲーションなど) に基づいて、UI 内でフォーカスを移動します。

IFocusManagerComponentコンポーネントがインターフェイスを実装する場合、FocusManagerはそれを「タブ」ループに含め、キーボード ナビゲーションを介してコンポーネントにフォーカスできるようにします。

フォーカスがフレックス リスト コンポーネントでどのように機能するか

Listフォーカスがコンポーネントとアイテムのレンダラーでどのように機能するかの特異性にすでに遭遇しました。FlexListコンポーネントが実装されIFocusMangerComponentているため、UI をタブで移動するとFocusManager、フォーカスがリストに送信されます。

アイテムレンダラーにフォーカスするList場合とフォーカスしない場合があります。Flex 3 では、これを行うために編集可能なアイテム レンダラーを使用する必要がありましたが、Flex 4 では同じである場合とそうでない場合があります。

問題を解決するためのアイデア

これを解決する方法はたくさんあると思います。これらの手法をいくつか組み合わせて使用​​します。

  • List コンポーネントの保護されたkeyDownHandler()メソッドをオーバーライドします。コードは手元にありませんが、Listクラスの実装を見ると、オーバーライドされたバージョンが次のレンダラーにフォーカスを設定できるようになるはずです。

  • タブ ループ内のコンポーネントを検索するには、FocusManager のメソッドを使用します: getNextFocusManagerComponent()、findFocusManagerComponent()。ドキュメントを確認してください。他にも役立つものがあります。たとえば、ユーザーが下矢印を押したときに、次のアイテム レンダラーが選択されるようにfindFocusManagerComponent()し、(新しく選択されたレンダラーを渡す) を使用FocusManagerして、メソッドでそれにフォーカスするように指示することができsetFocus()ます。これはおそらく正しいアプローチではありません;）

  • ちなみに、これFocusMangerは Flex のシングルトン オブジェクトであり、Flex のすべてUIComponentのオブジェクトには、参照を取得するために使用できるfocusManagerプロパティがあります。

  • フォーカスを受け取る必要のないオブジェクト (Labelアイテム レンダラーなど) のフォーカスを無効にすることを検討してください。focusEnabledこれを行うには、hasFocusableChildren、mouseFocusEnabled、tabEnabled、tabChildrenなどの多数のプロパティがあります。

  • コンポーネントへのフォーカスを無効にすることを検討しListてください。ただし、アイテム レンダラーにIFocusManagerComponentインターフェースを実装させることを検討してください。インターフェイスの実装は簡単です。クラスで宣言するだけです (実装する実際のメソッドはありません)。トリッキーな部分は、アイテムレンダラーにキーダウンハンドラーが必要になることです (keyDownHandler()すべてのUIComponentオブジェクトが持っている保護されたメソッドをオーバーライドするだけです)。

他にも使用できるテクニックがあると思います。これを行ってから時間が経ちました。行き詰まった場合は、さらにサポートを提供できることをうれしく思います...

于 2013-09-20T21:17:52.800 に答える