はじめに
前回の記事でめでたくユーザー登録編が完結したわけですが、テストをしているとあることが分かりました。
え、Tab使った時の移動順変じゃね？？
ユーザー登録ページがこんな感じであって、当然、上から順に [お名前] ⇒ [メールアドレス] ⇒ [生年月日]、、というように移動したい。
しかし、私の環境でいざTab移動してみると、 [お名前] ⇒ [パスワード] ⇒ [パスワード（確認用）] という順番にTab移動してしまい、もう酷いものでした。
いやいや、メールアドレスとか飛ばさないでほしい。。
今回はそんな地味な欠陥をプラグインを使って解決していきます。
Fix Tab Orderを使う
Fix Tab Orderというプラグインを使います。
プラグインの詳細はこちら。
無料で使えるプラグインです。
とりあえずインストール
左ペインからPlugins画面を開き、右上の「Add plugins」をクリックします。
Fix Tab Orderを見つけ、「Install」ボタンをクリックし、続いて「DONE」ボタンをクリックします。
これでインストール完了です。
Installed PluginsのなかにFix Tab Orderが表示されていれば、正常にインストールできています。
エレメントとしてページ上に配置
Random Number Generatorを導入したときと同様ですが、Bubbleのプラグインはエレメントとしてページ上に配置して初めて機能するようです。
Design画面に移り、Visual elementsを確認すると、「Tab Fix」が追加されていることが分かります。
この「Tab Fix」のエレメントをuser_registrationページに追加します。
いつものようにドラッグアンドドロップ。
これで導入完了です。
Previewしてみると、いい感じにTab移動できていることが確認できます。
デフォルト設定のままでOK
Tab Fixの設定ウィンドウを見てみると、「Include Date Inputs」と「Include Radio Buttons」にチェックが入っていないことが分かります。
このままでは、[生年月日] と [加入プラン] はTabでの移動でスキップされてしまいます。
しかし、それで別に問題ないのでは、、というのが私の考えです。
基本的にDate InputsとRadio Buttonsはマウス操作での入力となるため、Tab移動で選択できたとしてもあまりメリットがありません。
ですので、ここに関してはデフォルト設定で放置でOKかと思います。
終わりに
今回発見した欠陥は地味ですが、かなりインパクトの大きいものだと思います。
入力項目多めのページではどうしてもTab移動使いがちですから、そこでユーザーにストレスを与えてしまってはユーザー登録やーめたとなるのがオチです。
ご自身の環境をチェックしていただき、Tab移動の順序が想定と異なるようであれば、ぜひFix Tab Orderを使ってみてください。