プロンプトとコンテキスト
ポインターのホバー、キーボードフォーカス、または長押しで表示され、関心（interest）が外れたら非表示になるプロフィールプレビューが必要です。interestfor をどのように使用し、互換性、フォーカス、遅延、およびホバーでトリガーすべきでないコンテンツをどのように処理するか説明してください。
Popover API の interest invoker は、ボタンやリンクが interestfor を使用して同じツリー内のターゲット ID を参照できるようにします。ターゲットには popover="hint" プレビューカードを指定できます。ホバー、フォーカス、または長押しによってインボーカーへの関心が発生するとブラウザがそれを表示し、関心が終了すると非表示にします。これは簡潔で重要度の高くない補助情報に適しており、情報やアクションを発見するための唯一の手段であってはなりません。
面接官がテストしていること
面接官は、あなたが関心（interest）と起動（activation）を区別できるか、ターゲット ID、ポップオーバーの状態、InterestEvent を理解しているか、そしてキーボード、タッチ、遅延、互換性、アクセシビリティ、明示的なクリックや通常のリンクの方が安全なケースを網羅できるかを見ています。
明確化のための質問
対象のサーフェスがヒント、プレビュー、またはコントロール付きメニューのどれであるか、サポート対象ブラウザのマトリクス、タッチ要件、コンテンツが重要であるかどうか、ターゲットが同一 DOM ツリー内にあるかを確認します。また、ユーザーがサーフェス内に入って留まることができるか、表示・非表示の遅延、フォーカス復帰のルール、JavaScript なしの最小限のエクスペリエンスについても明確にします。
30秒の回答
「プロフィール名と通常のリンクを主要な導線として維持しつつ、Popover の hint を指す interestfor を持つネイティブのボタンまたはリンクを使用します。interest invoker はホバー、フォーカス、長押しによる可視性を提供します。ちらつきを抑えるために interest-delay または同等の戦略を用います。機能検知を行い、非対応環境ではフォーカスやクリックのリスナーにフォールバックします。プレビューのテキストはキーボードやタッチのユーザーにも利用可能である必要があり、副作用を伴うものや完全なインタラクションモデルを持つものは明示的なアクティベーションを使用すべきです。」
詳細な回答
ステップ 1: インタレスト関係を作成する
interestfor の値はターゲット要素の ID を指し、ターゲットとインボーカーは同じツリー内に存在する必要があります。最小限の例は以下のとおりです。
<button interestfor="profile-preview" aria-label="Read Ada's profile">
Ada Lovelace
</button>
<article id="profile-preview" popover="hint">
Early computing pioneer; the profile page contains the full biography.
</article>ボタンはフォーカス可能なネイティブコントロールのままであり、プレビューは補足的なものであってプロフィールへの唯一のルートではありません。
ステップ 2: 関心（interest）と起動（activation）を分離する
関心（interest）はプレビュー、説明、追加コンテキストのための一次的なフィードバックです。クリックや Enter キーは、遷移、送信、不可逆なアクションのための起動（activation）です。関心によってのみ表示されるサーフェスの中に、削除、購入、確認などのコントロールを隠してはなりません。
ステップ 3: Popover の境界を尊重する
ブラウザが popover="hint" ターゲットの表示状態を管理します。2 つの管理主体が競合する可能性があるため、別のスクリプトが同じ状態を強制的に変更することは避けてください。サーフェスにメニューのキーボードモデル、フォーカストラップ、または複雑な状態が必要な場合は、明示的なメニュー、ダイアログ、またはコンポーネントパターンを検討してください。
ステップ 4: 遅延とちらつきを制御する
ポインターはインボーカーとプレビューの境界を素早く横切ることがあります。表示と非表示のタイミングには interest-delay を使用し、トリガーとターゲットの間に連続したヒットエリアを設計します。すべてのデバイスに 1 つの値が適合すると想定せず、ポインター、キーボード、タッチのテストを行って遅延を調整します。
ステップ 5: キーボードとスクリーンリーダーの経路をカバーする
ネイティブのボタンやリンクはフォーカスを受け取ることができます。プレビューは予期せずフォーカスを奪うことなく、明確な名前の関係性を持つ必要があります。可視名、リンク先、またはその他の静的コンテンツを通じてプレビューテキストを利用可能な状態に保ちます。フォーカス表示をホバーで置き換えたり、重要なエラーをプレビュー内にのみ配置したりしてはなりません。
ステップ 6: タッチ操作と長押しを考慮する
タッチには従来のホバーがありません。長押しによる関心でプレビューを提供できますが、通常のタップやスクロールをブロックしてはなりません。重要なアクションには直接タップできる経路を残し、小型画面での遮蔽、ビューポートのはみ出し、閉じる挙動をテストします。
ステップ 7: 機能検知とフォールバック
すべてのランタイムが interestfor をサポートしていると想定してはなりません。HTMLButtonElement.prototype.interestForElement を機能検知します。非対応の場合は通常の HTML コンテンツとリンクを維持し、フォーカス、ポインター、またはクリックのリスナーによる基本的なプレビューを追加します。フォールバックは 2 つ目の信頼できる情報源（source of truth）を作ることなく機能を追加する必要があります。
ステップ 8: ライフサイクルと境界のテスト
ポインターの出入り、インボーカーからプレビューへの移動、Tab および Shift+Tab、長押し、スクロール、Escape、素早い再進入、ターゲットの動的削除をテストします。アクセシビリティツリー、境界、遅延、JavaScript 無効時のコンテンツ、対象ブラウザマトリクスを検証します。MDN の対応状況表示はプロジェクトでの実機テストの代わりにはなりません。
模範回答
アバターをネイティブのリンクまたはボタンにし、同じツリー内の popover="hint" プレビューに対して interestfor を指定します。プレビューはコンテキストを追加しますが、名前とプロフィールリンクは静的コンテンツ内に表示されたままになります。関心（interest）はポインター、フォーカス、長押しをカバーし、interest-delay と連続したヒットエリアによってちらつきを低減します。実装前に interestForElement を検知します。非対応ブラウザは通常のコンテンツを維持し、フォールバックを通じて同様のフォーカス、ポインター、クリックの挙動を受け取ります。削除、購入、メニュー、その他の副作用を伴うコンテンツは、関心のみで表示されるサーフェスではなく明示的な起動を使用するべきです。キーボード、タッチ、スクリーンリーダー、スクロール、Escape、動的削除、および対象ブラウザマトリクスを検証します。
よくある間違い
interestfor を汎用ツールチップ属性として扱う
これは interest-invoker の関係を確立するものであり、Popover に関連するブラウザの挙動に依存します。メニューモデルや複雑な状態を必要とするターゲットには、適切なコンポーネントセマンティクスが必要です。
ホバー CSS のみで実装する
キーボードユーザーにはポインターのホバーがなく、タッチには異なるジェスチャーモデルがあります。フォーカス時の挙動、タップ経路、静的情報を維持してください。
プレビューを重要コンテンツの唯一の情報源にする
ユーザーはサポートされていないブラウザを使用しているか、スクリプトを無効化しているか、長押しができない場合があります。重要な名前、ステータス、アクションは主要なコンテンツまたは明示的な起動経路に残す必要があります。
追加の質問と回答
ブラウザが interestfor をサポートしていない場合はどうしますか？
まず通常の HTML、リンク、フォーカススタイルを完全に維持し、その上で機能検知を行います。フォールバックはナビゲーションや情報構造を変更することなくプレビュー挙動を追加し、サポートマトリクス内でテストされます。
インボーカーとプレビュー間のちらつきをどのように防ぎますか？
連続したヒットエリア、表示・非表示の遅延を使用し、ターゲット進入中も関心状態を維持します。複数のスクリプトが Popover の状態を管理しないようにし、競合を診断する際は enter、leave、削除の順序をログに記録します。
インボーカーがフォーカスを受け取った際、フォーカスをプレビュー内に移動すべきですか？
純粋なプレビューの場合は通常「いいえ」です。フォーカスはインボーカーに残し、明確なアクセシブルな名前を公開します。サーフェス内にコントロールが含まれる場合は、開始、Escape、復帰の挙動が定義された明示的起動のメニューまたはダイアログに切り替えます。
長押しとタップをどのように処理しますか？
長押しによるプレビューがタップナビゲーションやスクロールをブロックしてはなりません。重要なアクションのためのタップターゲットを維持し、実機で長押し、短いタップ、スクロール、ビューポートの端をテストします。
interest-delay にはどのような値を使用すべきですか？
すべてのデバイスに共通する普遍的な値はありません。コンテンツの密度や誤トリガーのコストを考慮しながら、進入、離脱、素早い移動のケースを計測します。キーボードユーザーがポインター向けの遅延を待たされることがないよう、即時のフォーカスフィードバックを提供します。
interest invoker を避けるべきなのはどのような場合ですか？
コンテンツが重要である場合、アクションに副作用がある場合、フォーカス管理が複雑な場合、ツリーをまたぐ連携が必要な場合、古いブラウザのサポートが必須である場合は避けてください。interest invoker は、低リスクで一次的な補足プレビューに最適です。