Preflight が Firefox の iframe:focus-visible スタイルを上書きしないように修正

Preflight の :-moz-focusring ルールが Firefox のネイティブ iframe:focus-visible アウトラインを上書きしていた問題を、セレクタに :where(:not(iframe)) を付加して除外するよう修正しました。これにより、iframe 以外の要素では従来どおりフォーカスリングが適用され、Firefox のデフォルト挙動は保持されます。

背景

Firefox は iframe:focus-visible { outline-style: none; } を UA スタイルシートで定義しており、iframe がフォーカスされたときに自動的にアウトラインが付かないよう設計されています。 Tailwind の Preflight が :-moz-focusring { outline: auto; } を追加したことで、Firefox のこのデフォルトが上書きされ、iframe に不要な自動アウトラインが表示されるケースが報告されました（#19795）。この挙動は特にキーボード操作で iframe 内の要素にフォーカスが移動した際に顕著で、アクセシビリティ体験を損ねるため、修正が必要と判断されました。

技術的な変更

:-moz-focusring セレクタに :where(:not(iframe)) を付与し、iframe を除外するように変更しました。 変更前と変更後のコードは以下の通りです。

-:-moz-focusring {
+:-moz-focusring:where(:not(iframe)) {
   outline: auto;
 }

このシンプルな置換により、iframe 以外の要素では従来通り outline: auto; が適用され、iframe だけは UA スタイルシートの outline-style: none; がそのまま有効になります。

テストスイートとスナップショットが同様に更新され、期待されるセレクタが反映されています。 integrations/cli/index.test.ts、packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap、packages/tailwindcss/src/__snapshots__/index.test.ts.snap、packages/tailwindcss/src/source-maps/source-map.test.ts の全てで :-moz-focusring から :-moz-focusring:where(:not(iframe)) への差分が追加・削除されています。これにより CI が新しいセレクタを検証し、回帰を防止します。

CHANGELOG にも変更内容が追記され、リリースノートとして利用可能になっています。 具体的には CHANGELOG.md に「Prevent Preflight from overriding Firefox's native iframe:focus-visible outline styles」(#20292) が追加され、利用者が変更点を容易に把握できるようになりました。

設計判断

:where(:not(iframe)) を用いる選択は、既存のセレクタの構造を極力保持しつつ例外要素だけを除外する最小限のアプローチです。 :where() は特異性が 0 であるため、他の CSS ルールとの衝突リスクを増やさずに目的を達成できます。この点は、Firefox 以外のブラウザでも安全に評価され、将来的な UA スタイルシートの変更にも柔軟に対応できます。

設計上のトレードオフはほとんどなく、既存の :-moz-focusring ルールの動作を変えずに例外だけを除外できる点が評価されました。 新たな設定キーやフラグを導入する必要がなく、コードベースへの侵入度が低いため、メンテナンスコストも最小限に抑えられています。

まとめ

この PR は、Firefox のネイティブ iframe:focus-visible スタイルを尊重しつつ、Preflight のフォーカスリング改善を維持するためのセレクタ修正です。:where(:not(iframe)) の導入により、iframe の自動アウトラインが除外され、アクセシビリティとブラウザ固有の挙動が調和しました。