# 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