a11y: Speed Playback Selection should be Select Element

[jeryj]

I noticed the speed playback selection is a button that spawn a list of other buttons for speed selection:

<div class="waveform-speed">
  <button class="speed-btn" aria-label="Playback speed" aria-haspopup="true" aria-expanded="false">
    <span class="speed-value">1x</span>
  </button>
  <div class="speed-menu" style="display: none;">
    <button class="speed-option" data-rate="0.5">0.5x</button><button class="speed-option" data-rate="0.75">0.75x</button><button class="speed-option active" data-rate="1">1x</button>...
  </div>
</div>

Using a styled <select /> dropdown would be more accessible and simplify the code, as keyboard interactions and screen reader announcements would be handled by default by the browser.

[arraypress]

Thanks for pushing on this, @jeryj — a11y feedback is always welcome, and you're right that the old menu wasn't a complete keyboard/screen-reader experience.

We're going to keep it a custom control rather than a native <select>, though. The tradeoff: a <select>'s open options list is rendered by the OS and can't be styled cross-browser, which breaks the player's monochrome design — and that visual consistency is a core goal here.

Instead we've made the custom control a proper ARIA menu, so it's keyboard- and screen-reader-complete without the native element:

• role="menu" on the popup, role="menuitemradio" + aria-checked on each rate
• aria-haspopup="menu" / aria-expanded on the trigger
• Full keyboard nav: ↑ / ↓, Home / End, Enter / Space to select, Esc to close; ↓ / ↑ opens from the trigger
• Focus moves into the menu on open (to the current rate) and back to the trigger on close/select

Shipping in @arraypress/waveform-player@1.19.1. Appreciate you keeping us honest 🙏

[jeryj]

That works too :) Thanks for the fast follow-up!