blockly > FocusManager

FocusManager クラス

1 つ以上の IFocusableTree 全体で Blockly のフォーカスを管理し、このフォーカスを DOM と双方向に同期する、ページごとのシングルトン。

ページ上の特定の Blockly コンポーネントの入力フォーカスを明示的に変更したい場合は、このマネージャーのフォーカス関数を使用する必要があります。

マネージャーは、DOM からのフォーカス イベント(ユーザーがページ要素をクリックしたときに発生する可能性があります)を処理し、対応する IFocusableNode が、focusNode() の呼び出しで表されるのと同じ方法で、アクティブまたはパッシブにハイライト表示されるようにします。

署名:

export declare class FocusManager 

コンストラクタ

コンストラクタ 修飾子 説明
(コンストラクタ)(addGlobalEventListener) FocusManager クラスの新しいインスタンスを構築します。

プロパティ

プロパティ 修飾子 タイプ 説明
ACTIVE_FOCUS_NODE_CSS_CLASS_NAME

static

readonly

(宣言されていません)

現在アクティブな DOM と Blockly のフォーカスがある IFocusableNode 要素に割り当てられる CSS クラス。

直接使用しないでください。代わりに、FocusManager を使用して、ノードにアクティブなフォーカスがあることを確認します(DOM フォーカスによる自動、またはこのクラスが提供するさまざまな focus* メソッドによる手動)。

このクラス名を使用してクエリを実行することもおすすめしません。代わりに、FocusableTreeTraverser または IFocusableTree のメソッドを使用して特定のノードを見つけます。

PASSIVE_FOCUS_NODE_CSS_CLASS_NAME

static

readonly

(宣言されていません)

現在パッシブ フォーカス(つまり、相対ツリー内でアクティブ フォーカスが設定された最後のノードであり、周囲のツリーがフォーカスされるようリクエストされた場合(下の focusTree を使用するなど)に再びアクティブ フォーカスが設定される)が設定されている IFocusableNode 要素に割り当てられる CSS クラス。ACTIVE_FOCUS_NODE_CSS_CLASS_NAME を参照してください。

この定数を直接使用する際の注意点と制限事項については、ACTIVE_FOCUS_NODE_CSS_CLASS_NAME をご覧ください(通常、この定数を使用する必要はありません)。

メソッド

メソッド 修飾子 説明
ephemeralFocusTaken()
focusNode(focusableNode)

指定されたノードに DOM 入力をフォーカスし、アクティブにフォーカスされているものとしてマークします。

以前にフォーカスされていたノードは、別のフォーカス可能なツリーにある場合は受動的にハイライト表示され、同じツリーにある場合はぼかし表示されるように更新されます。

**重要**: 指定されたノードにフォーカスできない場合(canBeFocused() メソッドが false を返すなど)、そのノードは無視され、既存のフォーカス状態は変更されません。

なお、この関数は、指定されたノードの要素の tabindex を更新して、フォーカス時にスクリーン リーダーで正しく読み上げられるようにする場合があります。

focusTree(focusableTree)

特定の IFocusableTree にフォーカスします。これは、ツリーのパッシブ フォーカス ノードにアクティブ フォーカスを復元するか、ツリーのルートノードにフォーカスすることを意味します。

指定されたツリーにすでにフォーカスされたノードがある場合、既存のフォーカスは変更されません(ただし、そのノードにパッシブ フォーカスがある場合は、アクティブ フォーカスに復元されます)。

他のノードがどのように影響を受けるかについては、getFocusedNode をご覧ください。

getFocusedNode()

フォーカスのある現在の IFocusableNode(常にフォーカスのある IFocusableTree に関連付けられています)を返します。存在しない場合は null を返します。

この関数は IFocusableTree.getFocusedNode() と同等性を維持します。つまり、ツリー自体にフォーカスがあるが、ルート以外の子にはフォーカスがない場合、この関数は null を返しますが、getFocusedTree() は null を返しません。

また、一時的なフォーカスが現在キャプチャされている場合(takeEphemeralFocus を使用している場合など)、ここで返されるノードは現在 DOM フォーカスを持っていない可能性があります。

getFocusedTree()

フォーカスがある現在の IFocusableTree を返します。現在フォーカスがあるものがない場合は null を返します。

また、一時的なフォーカスが現在キャプチャされている場合(takeEphemeralFocus を使用している場合など)、ここで返されるツリーには現在 DOM フォーカスがない可能性があります。

getFocusManager() static

ページ全体の FocusManager を返します。

返されるインスタンスは、関数呼び出し間で変更されないことが保証されていますが、ページ読み込み間で変更される可能性があります。

isRegistered(tree) 指定されたツリーが registerTree を使用してこのマネージャーにすでに登録されており、unregisterTree を使用してまだ登録解除されていないかどうかを返します。
registerTree(tree, rootShouldBeAutoTabbable)

自動フォーカス管理用の新しい IFocusableTree を登録します。

ツリーに現在 DOM フォーカスのある要素がある場合、フォーカスが新しいモニタリング対象の要素/ノードに変更されるまで、このマネージャーの内部状態には影響しません。

指定されたツリーがこのマネージャーにすでに登録されている場合、この関数は例外をスローします。isRegistered を使用して、ツリーが登録されているかどうかを確実に判断できない場合に確認します。

ツリーの登録をカスタマイズして、自動タブストップを構成できます。具体的には、ツリーにアクティブなフォーカスがない場合にのみ、ユーザーがタブでツリーのルートに移動できる機能を提供します。この機能が無効になっている場合、ツリーのルートは、他のフォーカス可能なノードと同様に、最初にフォーカスされたときに自動的にフォーカス可能(ただしタブ移動可能ではない)になります。

takeEphemeralFocus(focusableElement)

返されたラムダが呼び出されるまで、特定要素のフォーカスを一時的にキャプチャします。これは、ダイアログなどの一時的な UI フローで特に役立つことが期待されます。

重要: 返されたラムダは呼び出す必要があります。呼び出さないと、ページ上のどこでも自動フォーカスが機能しなくなります。ラムダ呼び出しを対応する UI のクロージャに結び付けることを強くおすすめします。これにより、入力が一時的な UI の外部の要素に手動で変更された場合、UI が閉じ、自動入力が復元されます。このラムダは 1 回だけ呼び出す必要があり、それ以降の呼び出しはエラーをスローします。

マネージャーは、エフェメラル フォーカスがアクティブな場合でも DOM 入力シグナルを追跡し続けますが、返されたラムダが呼び出されるまでノードの状態は実際には変更されません。また、一度にアクティブにできる一時的なフォーカス コンテキストは 1 つのみです(同時に複数のコンテキストをアクティブにしようとすると、エラーがスローされます)。

unregisterTree(tree)

自動フォーカス管理から IFocusableTree の登録を解除します。

ツリーに以前にフォーカスされたノードがある場合、そのハイライトは削除されます。この関数は DOM フォーカスを変更しません。

指定されたツリーが現在このマネージャーに登録されていない場合、この関数は例外をスローします。

この関数は、ツリーが自動タブ管理で登録されている場合、ツリーのルート要素の tabindex をリセットします。