Label each window as a group for assistive technology

[captbaritone]

Every window wraps its contents in FocusTarget, a tabIndex={-1} container that tracks which window is focused. This gives that element role="group" and an accessible name:

Window	Name
main	"Main window"
equalizer	"Equalizer"
playlist	"Playlist"
milkdrop	"Milkdrop"

Screen readers announce the group when focus enters a window, so users know which window a control belongs to. That matters because several windows have a "Close" or "Toggle Windowshade Mode" button. It also lets embedders' tests scope role-based queries to a window, for example:

within(getByRole("group", { name: "Equalizer" })).getByRole("button", { name: "Close" })

Known gap: the playlist window in shade mode renders PlaylistShade without a FocusTarget, so it isn't labelled. Wrapping it would change its layout and focus handling, so I've left it for a follow-up.

Testing

• New FocusTarget.test.tsx checks the role and name for each window id.
• tsc, eslint, prettier --check and vitest run pass locally.

[netlify]

✅ Deploy Preview for tourmaline-kringle-c98715 ready!

Name	Link
🔨 Latest commit	0ac366e
🔍 Latest deploy log	https://app.netlify.com/projects/tourmaline-kringle-c98715/deploys/6ad10b17b160895569911434
😎 Deploy Preview	https://deploy-preview-1374--tourmaline-kringle-c98715.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Size Change: +112 B (+0.02%)

Total Size: 491 kB

📦 View Changed

Filename	Size	Change
packages/webamp/built/webamp.bundle.min.js	298 kB	+58 B (+0.02%)
packages/webamp/built/webamp.lazy-bundle.min.js	192 kB	+54 B (+0.03%)

_{compressed-size-action}