<wa-dropdown> のオーバーフロー時に自動スクロールで可視化を確保

この PR は <wa-dropdown> コンポーネントで、選択された項目がメニュー領域を超えて隠れるケースを修正し、キーボード操作時の可視性を向上させます。フォーカス後に scrollIntoView を呼び出すシンプルな追加で、既存ロジックへの影響はありません。

背景

Issue #2430 では、キーボードで選択した項目がオーバーフローすると表示領域から切り離れ、ユーザーが現在の選択肢を確認できない状態が報告されました。<wa-dropdown> の内部では focus({ preventScroll: true }) が使用されており、スクロールが抑制されたまま項目が隠れ続けます。この挙動はアクセシビリティと操作性の観点で問題視され、修正が求められました。PR #2447 はその課題に対する直接的な対応です。

技術的な変更

フォーカス処理の直後に scrollIntoView({ block: 'nearest' }) を呼び出す行が追加され、選択項目が可視領域に自動的に調整されるようになりました。これによりオーバーフロー時でもユーザーが現在の選択肢を視認でき、キーボードナビゲーションがスムーズに続行できます。

変更前:

itemToSelect.focus({ preventScroll: true });

変更後:

itemToSelect.focus({ preventScroll: true });
itemToSelect.scrollIntoView({ block: 'nearest' });

設計判断

既存のフォーカスロジックに最小限の拡張を加える 方針が採用されました。preventScroll によるスクロール抑制は維持しつつ、必要な場合だけ scrollIntoView を実行することで、意図しないスクロールの副作用を防ぎます。また、block: 'nearest' を指定することで、項目が既に一部可視であれば過剰なスクロールを回避し、ユーザー体験を最適化しています。この設計はコード量の増加を抑え、将来的な拡張やテストにも影響を最小化します。

まとめ

<wa-dropdown> の選択項目がオーバーフローした際に自動的に可視領域へスクロールさせる修正は、アクセシビリティと操作性の向上という明確な目的に即したシンプルかつ安全な実装です。既存ロジックを壊さずに視認性を保証することで、コンポーネント全体の品質が向上しました。