src/components/tour/product-tour.tsx renders the tour card with role="dialog" aria-modal="true", but the rest of the page is not actually inert — so assistive tech can still reach the background, contradicting aria-modal.
Current state / why deferred (PR #178): the tour portals into document.body alongside the app's several direct <body> children (there is no single app-root wrapper — <body> itself is the flex column) plus the toast/live-region portals. Inerting "everything but the tour" would risk suppressing those live regions, and there's no clean sibling element to target. Esc-to-dismiss + a Tab focus trap keep the tour keyboard-usable today; the limitation is documented in code.
Recommendation: Introduce a stable app-root wrapper element that is a sibling of the tour/toast portals, and toggle inert on it while the tour is active. Verify (via AT) that the tour's own Next/Back/Skip controls and toasts still work.
Alternatives:
- Render the tour in a native
<dialog> (real modal scope + inerting for free) — but the tour needs a transparent spotlight cutout with click-through, which <dialog>'s backdrop fights; needs rework.
- Inert an explicit allowlist of known app regions (fragile as the layout evolves).
- Drop
aria-modal and rely on the focus trap (honest about the non-modal reality; loses the "background is inert" hint).
Refs: PR #178, finding accessibility-4. The code comment in product-tour.tsx explains the current limitation.
src/components/tour/product-tour.tsxrenders the tour card withrole="dialog" aria-modal="true", but the rest of the page is not actually inert — so assistive tech can still reach the background, contradictingaria-modal.Current state / why deferred (PR #178): the tour portals into
document.bodyalongside the app's several direct<body>children (there is no single app-root wrapper —<body>itself is the flex column) plus the toast/live-region portals. Inerting "everything but the tour" would risk suppressing those live regions, and there's no clean sibling element to target. Esc-to-dismiss + a Tab focus trap keep the tour keyboard-usable today; the limitation is documented in code.Recommendation: Introduce a stable app-root wrapper element that is a sibling of the tour/toast portals, and toggle
inerton it while the tour is active. Verify (via AT) that the tour's own Next/Back/Skip controls and toasts still work.Alternatives:
<dialog>(real modal scope + inerting for free) — but the tour needs a transparent spotlight cutout with click-through, which<dialog>'s backdrop fights; needs rework.aria-modaland rely on the focus trap (honest about the non-modal reality; loses the "background is inert" hint).Refs: PR #178, finding
accessibility-4. The code comment inproduct-tour.tsxexplains the current limitation.