コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

【Power Apps】タブ遷移に関して


スポンサードリンク

はじめに

今回の記事はTips てきな記事になります。

Power Apps ではアクセシビリティを向上させるためのTabIndex プロパティが存在します。
この設定を行うことにより、ユーザーがキーボードだけで操作を行うことができるようになります。

今回はこのTabIndex プロパティについて纏めようと思います。

TabIndex プロパティを設定してみる

TabIndex プロパティは各コントロールに設定することが可能です。

TabIndex プロパティは外面上部にある数式バーか、画面右にあるコントロールのプロパティから変更が可能です。

f:id:koruneko:20210103004157p:plain

f:id:koruneko:20210103003900p:plain

日本語名称では、"タブ遷移順"となっていますが、ここに設定する数値は0 or -1が推奨されています。
それぞれ以下の動作となります。

TabIndex 値 動作 既定
0 コントロールはキーボード ナビゲーションに関与します。 Button、Text input、Combo box、およびその他の一般的な対話型コントロール
-1 コントロールはキーボード ナビゲーションに関与できません。 Label、Image、Icon、およびその他の一般的な非対話型コントロール

簡単に説明すると、
0を設定するとタブ遷移を行い -1を設定するとタブ遷移を行いません。

このタブ遷移は特に特別な設定を行っていなかった場合、Z順で遷移を行います。

詳しくはこちらをご確認ください。

docs.microsoft.com

デフォルト値が-1のコントロールに関しても、もちろん0に設定することでタブ遷移を行えるようにすることが可能です。
その場合、 FocusedBorderColor に任意の色を設定し、 FocusedBorderThickness に0より大きい値を設定してください。
この設定を行わないと、現在フォーカス設定されているコントロールがユーザーからわからなくなってしまいます。

TabIndex のデフォルト値が0のコントトールは上記プロパティに自身のボーダーカラーと線の太さが0より大きい値が設定されていますのでフォーカスされているコントロールがわかるようになっています。

実際の動作

まずは以下のようにテキストボックスを5つ配置したときのタブ遷移です。

ヒントのテキストに数値が設定されているテキストボックスの TabIndex には0が設定されており、×が設定されている TabIndex には-1が設定されています。

続いてギャラリーのタブ遷移です。

ギャラリーは WrapCount で折り返しの数を指定することが可能です。
この数値を設定することで1行(1列)あたりに表示されるコントロールの数を指定できます。

今回は WrapCount に3を設定しているので3行ずつ表示されています。
この状態でタブ遷移を行うと以下のようになります。

上記のようにZ順でテキストボックスにタブ遷移が行われます。
ラベルには TabIndex に-1を設定しているのでタブ遷移が行われません。

続いてギャラリー内でタブ遷移を行ったときに、ギャラリー外から選択されている項目を参照するとどのような動作になるのかみてみましょう!

上記のようにタブ遷移でユーザーがコントロールへ移動した場合、外部からはユーザーが現在どのコントロールを選択しているのかわかりません。
これは恐らくタブ遷移ではコントロールを選択するのではなく、あくまでフォーカスを行っているだけだからかと思われます。

もし、ギャラリー内でユーザーが選択している項目によってなにか変化させるような実装を行いたい場合は、このような制限事項があるので注意が必要です。
現時点(2021/1/2)ではこの問題を回避するベストな方法が存在しないので、ケースバイケースで対応もしくは許容する必要があります。

最後にタブ遷移をZ順ではなくN順で行わせる方法についてです。

まずは下記のように、 TabIndex のみを設定した場合は以下のようにZ順でタブ遷移を行います。

上記のように上から下へ、左から右にタブ遷移を行っていますね。

これを、「テキストボックス → トグル」といった風にN順でタブ遷移を行うように設定してみます。
上記を実現するためにはグループをコンテナー内に設定します。

これにより、上記のようにN順でタブ遷移が行われるようになりましたね。

1点注意として、N順でタブ遷移をしたい場合は、グループ化ではなくコンテナ化する必要があるという点です。
グループ化とした場合は以下のようにZ順でタブ遷移を行います。

これらの違いに気を付けて各コントロールを設定しましょう。


スポンサードリンク