26 lines
1.1 KiB
Markdown
26 lines
1.1 KiB
Markdown
# 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
|