Toggle key

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<!-- Words, with a lamp that lights while the key is down -->
<button class="tui-key tui-toggle-key" type="button" data-toggle-key aria-pressed="false">
  <span class="tui-lamp" data-lamp="amber" aria-hidden="true"></span>Mute
</button>

<!-- A glyph alone: the name is the same up or down, aria-pressed says which -->
<button class="tui-key tui-key--icon tui-toggle-key" type="button" data-toggle-key aria-pressed="true" aria-label="Favourite">
  <svg class="tui-icon" …></svg>
</button>

<!-- Without data-toggle-key you keep aria-pressed yourself, as a framework would -->
<button class="tui-key tui-toggle-key" type="button" aria-pressed="true">Pinned</button>

import { toggleKey } from '/kit/kit.mjs';

const mute = document.querySelector('#mute');
mute.addEventListener('tui-toggle-key-change', (e) => {
  channel.muted = e.detail.pressed;           // true while the key is down
});

toggleKey(mute, true);   // latch it from code
toggleKey(mute);         // flip it

Needs kit.css and kit.mjs. How to install the kit.

• It is a native <button> with aria-pressed, read as “Mute, toggle button, pressed”, and it works with Space and Enter.
• The state is the cap sunk below the plate and the lamp lit, and it is also in aria-pressed, so colour is never the only sign of it.
• The name stays the same up or down. A key that says “Mute” in both states is read right; one that changes to “Unmute” would be read as “Unmute, pressed”.
• A key that shows only a glyph is named with aria-label, and its glyph is hidden from a screen reader.
• On a phone the cap is 44px tall. The 70ms press is switched off under reduced motion; the state does not depend on it.

There is almost nothing new under it. The kit’s key already sinks below the plate when it is pressed, and a pressed button is drawn the same way; this part only gives that latched look a meaning, one state kept. The lamp is the kit’s lamp, left unlit in the cap and lit by the key’s own pressed state, so it follows every finish and both volumes with no rule of its own. The script is one listener on the page that flips aria-pressed for any key that asks for it, so keys added later work without being wired.