Checklist

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

<tui-checklist>
  <header class="tui-checklist__head">
    <h3 class="tui-checklist__title" id="pre-t">Before you fly</h3>
    <span class="tui-lamp"></span>
    <output class="tui-checklist__count" aria-live="polite"></output>
  </header>
  <ul class="tui-checklist__list" aria-labelledby="pre-t">
    <li class="tui-checklist__group">
      <label class="tui-checklist__row">
        <input class="tui-check" type="checkbox">
        <span class="tui-checklist__label">Cockpit</span>
        <span class="tui-checklist__sub"></span>
      </label>
      <ul class="tui-checklist__list">
        <li><label class="tui-checklist__row">
          <input class="tui-check" type="checkbox" name="check" value="fuel" checked>
          <span class="tui-checklist__label">Fuel</span>
        </label></li>
        …
      </ul>
    </li>
    <li><label class="tui-checklist__row">…Walk-round…</label></li>
  </ul>
</tui-checklist>

import '/kit/kit.mjs';   // defines <tui-checklist>

const list = document.querySelector('tui-checklist');
list.values;                                      // ['fuel', 'flaps', 'weather-brief']
list.addEventListener('tui-checklist', (e) => {
  e.detail.done;                                  // 3
  e.detail.total;                                 // 7: items, not groups
  e.detail.values;
});

// Items post under their own name; groups have none:
new FormData(form).getAll('check');

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

• Every item is a real checkbox in a label, so it is named, toggled by Space and posted by a form without any of this being reinvented.
• A group with some items done is indeterminate, which the browser reports as mixed, and it carries aria-checked="mixed" as well; a screen reader says “mixed” where a sighted reader sees the half-sunk key.
• The half-sunk key has a bar printed on it, so it reads without colour or depth in either finish. A finished item is struck through in ink, not faded.
• The list is one Tab stop with the arrow keys inside it, so a long checklist is one press of Tab to pass; right and left arrows step into and out of a group.
• The count, “3 of 7”, is a polite live region; the lamp beside it is only a second signal for “all done”.
• Pressing a group that is already all done clears it. Pressing one with some done ticks them all: the same as any checkbox that is not ticked.

The check is the kit’s own: an 18px key that sinks when ticked, in a row 40px tall so a finger finds it. This part adds two things to it: a state between the two, drawn as the key sunk halfway with a 2px bar across it, and the logic that makes a group the sum of its items. checklistState is that sum, pure and tested, and the element runs it from the leaves up after every change, so groups nested three deep stay right. A pressed group writes its state down to everything under it. The roving Tab stop is the element’s too; the boxes are still native inputs, so a form, a label and a screen reader all behave as they do for a checkbox anywhere else.