goon_plugin/docs/instructions-audit.md

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