プロンプトとコンテキスト
プロダクトにおいて、ユーザーがユーザー名、ドキュメントのリンク、または用語に関心を示したときに軽量なプレビューを表示したいと考えていますが、ホバーが外れたとき、ユーザーがキーボードで操作しているとき、またはデバイスがタッチ専用である場合でも、コンテンツは利用可能であり続ける必要があります。HTMLのinterest invokersとPopover APIを使用し、遅延、フォーカス、非表示化（dismissal）、非対応ブラウザ、およびデータ読み込みの失敗について説明してください。
MDNでは、interestforをボタンまたはリンクをターゲット要素に関連付ける宣言的な方法として説明しています。ターゲットがpopoverの場合、関心（interest）が存在する間、ブラウザはそれを自動的に表示できます。Open UIのエクスプローラーでは、ホバーカードの動機が文書化されています。この記事は公開資料を統合したものであり、特定の企業固有の面接質問であることを主張するものではありません。
面接官がテストしていること
面接官は、あなたが「ホバー」をポインタ、フォーカス、タッチ、および支援技術を網羅する1つの関心状態（interest state）として扱っているかを確認したいと考えています。優れた回答では、interest/loseinterest、interest-delay-*、popoverのトップレイヤー、フォーカス管理、JavaScriptなしのコアパス、およびプログレッシブエンハンスメントに言及します。不十分な回答はmouseenter/mouseleaveをバインドするだけにとどまります。
最初に明確にすべき質問
- プレビューは補足情報ですか、それともタスクを完了するために必須ですか？
- ターゲットコンテンツは同一オリジンでキャッシュ可能であり、遅延読み込みを行ってもよいですか？
- タッチデバイスではどのように開閉すべきですか？また、タップによって詳細ページに遷移すべきですか？
- ブラウザにinterest invokersがない場合、コアリンクはどのようにして利用可能な状態を維持しますか？
30秒での回答
「詳細ページを指す通常のリンクを維持し、interestforを使用してpopoverプレビューに関連付けます。interest遅延により誤操作によるアクティブ化を削減し、サポートされている環境では宣言的な動作がポインタとフォーカスをカバーします。非対応ブラウザでもリンクが失われることはなく、最小限のJavaScriptポリフィルでプレビューを追加できます。プレビューデータは非同期で読み込めますが、ナビゲーションをブロックしてはなりません。非表示化はフォーカスとEscapeキーのセマンティクスを尊重し、reduced motion設定ではアニメーションを削除します。」
ステップバイステップの解決策
構造的には、リンクまたはボタンがinterest invokerであり、ターゲットは安定したidとpopoverを持ちます。invokerのinterestfor値はそのidを参照します。ターゲットがpopoverである場合、プラットフォームはそれをトップレイヤーに配置し、popoverのライフサイクル動作を適用します。ターゲットは、アプリケーションがinterestイベントをリッスンした後に表示する通常の要素にすることもできます。
遅延を設けることで、リンク上をポインタがすばやく通過した際に多数のリクエストが開始されるのを防ぎます。interest-delay-startとinterest-delay-end、または同等のアプリケーションスロットリングを使用し、最初にスケルトンを表示して、キャッシュキーによって取得します。関心がinvokerから離れたり、ターゲットpopoverに入ったり、別のリンクに移動したりした場合は、未完了の処理をキャンセルし、最新の意図を優先します。
キーボードとタッチ操作はホバーに依存できません。リンクにフォーカスを当てると同じプレビューが表示され、Escapeキーで閉じ、Tabキーの順序で詳細ページに到達できるようにする必要があります。タッチ操作では、最初のタップでプレビューを表示し、2回目のタップで遷移するか、別のプレビューコントロールを提供しながら直接遷移することができます。ジェスチャーの競合を避けるために明確なルールを1つ選択してください。
アクセシビリティには、読み取り可能なターゲット名、正しい関係性、および状態のフィードバックが必要です。プレビューが補足情報である場合、フォーカスをpopover内に強制的に移動させないでください。インタラクティブなコントロールが含まれている場合は、明確なフォーカス進入および復帰パスを定義します。スクリーンリーダーのユーザーは、プレビューの読み込みが失敗した場合でも、詳細ページに直接アクセスできる必要があります。
機能検出とフォールバックにより、コアパスが保護されます。interestforまたはPopover APIがない場合、リンクは正常にナビゲートし、プレビューはクリックして開く動作に劣化させるか、省略することができます。ポリフィルは、すべてのトップレイヤー、フォーカス、およびセキュリティの境界を再実装するのではなく、表示動作のみを追加する必要があります。サポート率、プレビュー表示率、読み込み失敗、およびナビゲーションコンバージョンを測定します。
優れた回答の例
リンクをコアナビゲーションとし、interest invokerをオプションのプレビューレイヤーとします。interestforは安定したidを参照し、ターゲットはpopoverを使用します。プラットフォームがポインタ/フォーカスの関心を処理し、遅延とキャッシュがリクエストを制御します。キーボードフォーカスが機能し、Escapeキーで閉じ、タッチ操作は明示的なタップルールに従います。非対応ブラウザでも通常のリンクは維持され、プレビューの失敗は補足レイヤーにのみ影響し、詳細ページへのアクセスには影響しません。
よくある間違い
- 症状 → mouseenterのみをリッスンする。失敗する理由 → キーボード、タッチ、および支援技術でトリガーできない。修正方法 → ナビゲーションを維持しながら、関心とフォーカスを中心に据える。
- 症状 → プレビューが表示されたらすぐにフォーカスを移動する。失敗する理由 → リンクを読んでいるユーザーの邪魔になる。修正方法 → インタラクティブなコントロールと明示的なルールが必要とする場合にのみフォーカスを移動する。
- 症状 → ホバーごとにフェッチを行う。失敗する理由 → 高速なポインタ通過がリクエストの嵐を引き起こす。修正方法 → 遅延、キャンセル、キャッシュ、および最新の意図を優先する処理を使用する。
- 症状 → 非対応環境でリンクをブロックする。失敗する理由 → 実験的なAPIがコアコンテンツの依存関係になってしまう。修正方法 → 通常のリンクを無条件のフォールバックとして維持する。
フォローアップの質問と回答
なぜプレビューターゲットにpopoverが常に必要というわけではないのですか？
interestforはinvokerを通常のターゲットに関連付けることができ、その後アプリケーションコードがinterestイベントをリッスンして表示を制御します。popoverはプラットフォームのトップレイヤーと非表示化のセマンティクスを提供します。ネイティブのライフサイクル動作と軽量な宣言的制御が有用かどうかに基づいて選択してください。
プレビューが別のリンクを覆い隠すのをどのように防ぎますか？
ターゲットに安定した配置と衝突ルールを設定し、離れる際には終了遅延を使用し、popover内に入る動作を関心の継続として扱います。高速な切り替えの際は、古いリクエストをキャンセルし、古いターゲットを閉じ、最新のinvokerの結果のみをコミットします。
プレビューの読み込みが失敗した場合はどうすべきですか？
プレビュー内に再試行可能な短い状態を表示し、直接の詳細リンクを提供します。エラーはページの主要なコンテンツの外にとどめます。失敗の理由とレイテンシを記録し、制限時間を超過した場合はプレビューのアニメーションをスキップするか直接ナビゲートします。