feat: add user instructions to viewer popup
This commit is contained in:
1 parent
c366f0b8c4
commit
97abaf42d9
9 files changed
+462
No files matched your search
@@ -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
|
||||
Reference in new issue
Block a user