Skip to content

Make the time display, visualizer and doublesize button keyboard operable - #1373

Open
captbaritone wants to merge 2 commits into
masterfrom
a11y-main-window-controls
Open

captbaritone wants to merge 2 commits into
masterfrom
a11y-main-window-controls

Conversation

@captbaritone

@captbaritone captbaritone commented Oct 12, 2026 •

Copy link
Copy Markdown
Owner

Builds on #1365 (merged), which makes WinampButtons with an onClick into focusable role="button" elements.

Three more main-window actions were mouse-only:

Control Action Change
Time display (#time) Toggle elapsed/remaining time Now a WinampButton named "Toggle Remaining Time", with aria-pressed
Visualizer (<canvas id="visualizer">) Cycle visualizer style role="button", tabIndex={0}, named "Change Visualizer Style", Enter/Space activates
Clutter bar D (#button-d) Toggle doublesize mode role="button", tabIndex={0}, aria-pressed, Enter/Space activates (keeps its existing title)
  • The visualizer can't be a WinampButton because it's a <canvas>.
  • The D button toggles on pointerup, not click, so an onClick would make a mouse click toggle twice.
  • Both therefore use a new exported handleActivationKey(e, activate) helper. It's Make Webamp's buttons keyboard and screen reader operable #1365's Enter/Space logic pulled out of WinampButton, which now uses it too.
  • The other clutter bar buttons are left alone. O opens the options menu (covered by the menus work), and A, I and V have no handlers in Webamp, so there's no action to expose.
  • Rendering is unchanged. The elements and classes are the same, and no skin CSS targets winamp-active on #time.

Testing

  • New mainWindowControls.test.tsx:
    • Space on the time display flips aria-pressed.
    • Enter on D toggles doublesize mode, so aria-pressed and .selected update.
  • The visualizer isn't unit-tested because jsdom has no canvas. Its key handling is the shared helper, which the WinampButton tests already cover.
  • tsc, eslint, prettier --check and vitest run (218 passed) pass locally.

@github-actions

github-actions Bot commented Oct 12, 2026 •

Copy link
Copy Markdown

Size Change: +153 B (+0.03%)

Total Size: 491 kB

📦 View Changed
Filename Size Change
packages/webamp/built/webamp.bundle.min.js 298 kB +76 B (+0.03%)
packages/webamp/built/webamp.lazy-bundle.min.js 192 kB +77 B (+0.04%)

compressed-size-action

@captbaritone
captbaritone force-pushed the a11y-main-window-controls branch from 68708c0 to c6b3feb Compare October 12, 2026 19:29
@captbaritone
captbaritone changed the base branch from a11y-buttons to master October 12, 2026 19:29
@captbaritone
captbaritone force-pushed the a11y-main-window-controls branch 3 times, most recently from 4c4a975 to d773822 Compare October 15, 2026 16:59
@netlify

netlify Bot commented Oct 15, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for tourmaline-kringle-c98715 ready!

Name Link
🔨 Latest commit 58f2494
🔍 Latest deploy log https://app.netlify.com/projects/tourmaline-kringle-c98715/deploys/6ad10b07c06af392d0cfc8e7
😎 Deploy Preview https://deploy-preview-1373--tourmaline-kringle-c98715.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

…able

- Time display (toggles elapsed/remaining): render as a WinampButton named
  "Toggle Remaining Time" with aria-pressed.
- Visualizer canvas (cycles visualizer style): role="button", tabIndex=0,
  named "Change Visualizer Style", activated with Enter/Space.
- Clutter bar D (doublesize): role="button", tabIndex=0, aria-pressed, and
  Enter/Space handling. It toggles on pointerup rather than click, so it can't
  rely on WinampButton's click-based activation.

Extract WinampButton's Enter/Space handling into an exported
handleActivationKey helper so the canvas and clutter bar button can share it.
@captbaritone
captbaritone force-pushed the a11y-main-window-controls branch from d773822 to 58f2494 Compare October 15, 2026 17:19

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant