feat: add user instructions to viewer popup

This commit is contained in:
robot committed 2026-08-31 03:26:50 +00:00
1 parent c366f0b8c4
commit 97abaf42d9
9 files changed
+462

No files matched your search

+25
View File
@@ -0,0 +1,25 @@
# Instructions UI audit
## Scope
This audit covers the VidPlex popup instructions banner added in `src/viewer/index.html`, `src/viewer/index.css`, and `src/viewer/index.js`.
## What the UI now explains
- How to scan the current page for videos
- How to review clickable results
- How to open the 2x2 viewer
- How to clear and rescan
- A caveat that browser pages, extension pages, and restricted frames may hide videos
## Accessibility checks
- The instructions section uses `role="region"` and an accessible label
- The collapse toggle is wired with `aria-expanded` and `aria-controls`
- The body is hidden with the `hidden` attribute when collapsed
## UX notes
- The panel is visible on mount so first-time users see the steps immediately
- The toggle label changes between “Hide instructions” and “Show instructions”
- The copy intentionally stays short so the popup remains readable in a narrow extension window
## Validation
- Covered by `__tests__/instructions_ui.test.mjs`
- Verified alongside the existing build/test flow in the parent implementation task