【備忘録】とあるボタンもどきを別なボタンからJavaScriptで間接キックする時にハマった時の解決メモ

普段と違って趣味コーディングじゃなく仕事での話なので、あまり具体的な事は書けないんだが・・・。

今後、似たようにハマった時の為にやった事を軽くメモっておく。

問題編

まず簡単に状況設定。

某パッケージを使用しており、HTMLはそいつがレンダリングしていて基本的には手を出せない。
しかもこのパッケージの中身に手を出せないばかりかソースも見れない。
可能なのはJavaScript(jQuery)でちょこちょこ手を加える程度。
パッケージの提供機能だけ使って、外観は開発基準に則った別物を使う必要がある。
（至上命題）
パッケージのレンダリング処理に直接手を加える事が出来れば直接的に何とかなるが、それが出来ない。
（やりたくもない）
ので、パッケージがレンダリングするやつを非表示にして、処理だけJavaScriptでキックして使い回す事になった。
（それが無理なら全部自作する事になるので、それはそれで嫌だ）

まぁ、割とよくある話だと思う。

ダミーの要素を見せておいて、そいつから本処理をやる別な奴をキックしてやるパターン。

解決編

取り敢えず普通に実装して画面を表示し、F12で開いてHTMLレンダリング結果を調べて、ボタン的な外観をしている奴の正体を特定。

span[role=button]

でも普通にこのボタンもどきのspanをクリックしてやればイケるかなーと思ったらイケなかった。

で、この後色々と試行錯誤。

click() で発火しないので trigger("click") にしてみた。当然ダメ。
そもそもこれで動きの違いなんか出てほしくない。
一旦 focus() してから改めて click() してみた。これもダメ。
試しに setTimeout 掛けてみたがこれもダメ。
と言うか focus() してもフォーカス当たってないので attr で強引に tabindex を持たせて focusable にしてやったがそれでもダメ。
しかしこれでフォーカスは当たるようになった。ので、このJavaScriptが空振りに終わってから改めてキーボードで [enter] や [space] 打ってみた。が、やはりダメ。
と言うか [enter] だとボタンを押したようなモーションはするものの、[space] だとページがスクロールしやがった。どうもフォーカスを当てるべきtargetが間違ってる気がする。
この状態で [tab] を押すと次にフォーカスが移動するのだが、どうも見た目上変化が無い。視覚的変化はないがフォーカスは移動している。
この状態で [enter] や [space] を押すと、目的の動作がきちんと反応した。
やはりボタンもどきの span をターゲットに考えているのが間違い・・・？
この後 focus イベントを全体的に拾ってアスペクト的に :focus の遷移をログに吐き出させてみた。その中に非表示なのに処理上フォーカスの当たっている奴がいたのでそいつにJavaScriptで click() してみた。
動いた！！