① SPA クライアントルーティング 対応済み
history.pushState / popstate · DOM 全入れ替えルート遷移で reload せずに <main> を丸ごと差し替え。MutationObserver で新コンテンツに自動再適用(当初の懸念は実機で否定)。
各カードは、ウィジェットが現場で遭遇する ページ構成(アーキテクチャ) を 1 つずつ再現した実機デモです。 既存の a11y-training / screen-reader-lab は「機能」を見せるもの。こちらは「どの種類のページで widget 自体が正しく動くか」を検証します。 各ページに観測パネルを内蔵し、widget がやるべきこと・既知のギャップを明示します。
ルート遷移で reload せずに <main> を丸ごと差し替え。MutationObserver で新コンテンツに自動再適用(当初の懸念は実機で否定)。
サーバー描画済み DOM の上で、JS が遅れて文言や属性を差し替える。DOMContentLoaded 後の boot と MutationObserver の挙動を確認。
スクロールで後から DOM 追加。追加要素にコントラスト/フォント拡大が効くか、遅延 GIF の凍結が漏れないか(naturalWidth>0 問題)を観測。
iframe 内のコンテンツに widget が届かないことを実証。same-origin / cross-origin それぞれの境界を可視化。
デモを開く →querySelectorAll が shadow root を貫通しない。web component 内のテキストにコントラスト/フォント拡大が効かないことを実証。
埋め込み PDF は widget の対象外。read-aloud / コントラストが PDF ビューアに届かないことを示し、screen-reader (PDF compatible) との差を明確化。
デモを開く →「アニメーション停止」が CSS animation には効くが、canvas/WebGL の rAF ループには効かないことを実証。SVG SMIL は pauseAnimations() で停止可能。
body 入れ替えで #siteforce-root が一旦破棄されるが、survival observer が自動再マウント(B2 修正)。手動 Siteforce.boot() 不要。
widget は @media print { :host { display:none } } を持ち、印刷時に UI が紙面に出ない(B1 修正)。
panel は LTR 前提で角が不自然に。text-align:left !important が RTL 本文を破壊。ロケールに RTL 言語なし。
フォーム本文は widget 対象。カード入力は決済 iframe 内(別オリジン)で対象外。funnel・フォーカス管理を壊さないことが要件。
デモを開く →大 DOM のチャンク処理漏れ、ソートのキーボード操作との競合、アプリ modal と widget パネルのフォーカストラップ競合を観測。
デモを開く →head 読み込み(body 未生成)でも throw せず起動(B3 修正)。async/注入で currentScript=null でも data-key を解決。
フレームワークが出力するネストした shadow root内のテキストは貫通不可。Light DOM / slotted のみ効く。⑤ より実戦的。
デモを開く →テーマのカラープリセット(低コントラスト既定値)+ wp-block ネスト。通常 DOM なので widget が効くはず(制約ではない)。
デモを開く →コンテンツが canvas/WebGL ピクセルに描画 → テキストノード無し → recolor/読み上げ対象外。HTML 凡例のみ届く。
デモを開く →Chromium/WebKit ベースなので boot するはず。自動切替スライド追従は観測可、long-running メモリ・touch 操作は未検証。
デモを開く →