Mysterious tab stop in reaction picker and custom emoji picker

[MineCake147E]

💡 Summary

In reaction picker, after I pressed Tab key in the search box, this happens.

In custom emoji picker, after I pressed Tab key in the search box, this happens.

🥰 Expected Behavior

Such a green bar should not be selected.

🤬 Actual Behavior

Such a green bar appears.

📝 Steps to Reproduce

1. Open any instance's web client on browser.
2. Open the new note dialog.
3. Open the custom emoji picker.
4. Select the search box.
5. Press the Tab key in your keyboard.
6. See what happens. This appears no matter whether you typed anything in the search box or not, just at different places.

📌 Environment

Misskey version: 13.11.3
Your OS: Windows 10 Home 22H2 19045.2846
Your browser: Mozilla Firefox 112.0.2

[mappi-pr]

Misskey v13.11.3、firefox 112.0.2 で再現しました。
Firefoxの仕様で、overflow: auto;が適用されている要素にtabでフォーカスが当たるようになっているようです。

.emojis に当たっている、overflow-yをhiddenにすることで事象が発生しなくなることを確認しております。
/misskey/packages/frontend/src/components/MkEmojiPicker.vue(L.529)のfixで解消するかもしれないです。
→overflow-yをhiddenにすると、カスタム絵文字エリアをスクロールできなくなるのでこの方法は不可でした。

[mappi-pr]

もしかしたらFirefoxのBugかもしれないので、放置が正解かもしれないです…
https://bugzilla.mozilla.org/show_bug.cgi?id=1795509

[MineCake147E]

最終更新が三ヶ月も前ですが本当に修正入るんでしょうか...

[mappi-pr]

#10744 (comment)
コメントのUPDATEの通り、
overflow-yをhiddenにすると、カスタム絵文字エリアをスクロールできなくなる
ので、この方法はfixとしては不可でした。

cssはそのままに、tabindex="-1"とすることでフォーカスが当たらなくなることは確認しております。

ただし、Chromeなどのブラウザで動作検証した際に、カスタム絵文字ピッカーのスクロール動作時に再描画されない事象も発生するので、既知の事象かどうか追加検証が必要な状況です。

[mappi-pr]

ただし、Chromeなどのブラウザで動作検証した際に、カスタム絵文字ピッカーのスクロール動作時に再描画されない事象も発生するので、既知の事象かどうか追加検証が必要な状況です。

修正前後の環境で改めて比較してみましたが、私の手元環境の問題のようなのでPR作成してみます。