@jtakeit/kit 0.6.0 → 0.7.0

package/README.md

@@ -54,9 +54,17 @@ Next export `dangerouslySetInnerHTML`; in a script, a template literal.
 
 The markup comes wrapped in `<jtk-booking>`, and the element wires the form
 when it reaches the document — on load, and when the panel places it later.
-A form written by hand is wired too, as long as it keeps the `data-*` hooks
-and the input `name`s of the rendered one: `wireAll()` walks the document at
-load and again on the panel's `fl:placed`.
+
+**Or write the markup yourself**, in the site's design. The element finds
+everything by a hook — a `data-*` attribute or an input's `name`, never a
+class — so a form rebuilt in any markup works as long as it keeps them. The
+list, with what each is for and which may be left out, is
+`@jtakeit/kit/booking/hooks` (`ALWAYS`, `ASKED`, `SAID`); `bookingForm(props)`
+gives the facts to write it from — the words, the services in their runs with
+«45 min · CHF 95», the days, and the `<form>`'s attributes to spread on it.
+`@jtakeit/astro`'s `BookingForm.astro` is such a form, written out, and the
+quickest start: copy it and design it. `wireAll()` walks the document at load
+and again on the panel's `fl:placed`, so a bare form is wired too.
 
 **By default the form arrives dressed** — two steps, the day as a week of
 seven that never offers yesterday, the times by the part of the day, a drawn
@@ -67,10 +75,14 @@ switched on by `renderBookingForm`'s `ui`, `false` for the plain form). Pass
 `open` (the days the business opens) and each resource's `does` for the week
 and the greying to know.
 
-**The look** is the site's to give. `@jtakeit/kit/booking.css` makes the form
-legible and nothing more; `field`, `field__input`, `booking__slot`,
-`booking__submit` are names to restyle with the site's own fields and
-buttons. Keep the `[hidden]` rule.
+**The look** is the site's to give. `@jtakeit/kit/booking.css` makes
+`renderBookingForm`'s markup legible and nothing more; restyle it with the
+site's own fields and buttons. The rules the behaviour needs — `[hidden]`,
+which step shows, the native control under a drawn one — are put on the page
+by the element, not by the stylesheet. What the element draws itself carries
+`booking__*` classes (`booking__slot`, `booking__day`, `booking__part`, the
+steps, the drawn choice) with its state in ARIA: chosen is
+`aria-pressed="true"`.
 
 Under `base` — a site served from a path, which every preview is — pass
 `api` as your generator writes a root-relative address, so the form posts to

package/booking.css

@@ -15,9 +15,9 @@
 .booking__times { border: 0; padding: 0; margin: 0; }
 .booking__services { border: 0; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
 .booking__run { display: grid; gap: 0.35rem; }
-.booking__run-title { margin: 0.5rem 0 0.15rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
+.booking__run-title { margin: 0.5rem 0 0.15rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--booking-quiet); }
 .booking__service { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: baseline; padding: 0.45rem 0; border-block-end: 1px solid var(--line, #e5e1d8); cursor: pointer; }
-.booking__service-meta { font-size: 0.85em; opacity: 0.7; white-space: nowrap; }
+.booking__service-meta { font-size: 0.85em; color: var(--booking-quiet); white-space: nowrap; }
 .booking__total { margin: 0.25rem 0 0; font-weight: 600; }
 .booking__slots { display: flex; flex-wrap: wrap; gap: 0.4rem; }
 .booking__slot {
@@ -25,7 +25,7 @@
   border: 1px solid var(--color-line, currentColor); background: transparent; color: inherit; cursor: pointer;
 }
 .booking__slot.is-chosen { background: var(--color-ink, #111); color: var(--color-bg, #fff); border-color: var(--color-ink, #111); }
-.booking__hint, .booking__note { margin: 0; opacity: 0.75; }
+.booking__hint, .booking__note { margin: 0; color: var(--booking-quiet); }
 .booking__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin: 0; }
 .booking__done-line { font-weight: 600; margin: 0; }
 .booking__done-when { margin: 0; }
@@ -35,7 +35,7 @@
 .booking > * { min-width: 0; }
 .booking__ends { margin: 0.35rem 0 0; }
 .booking__service.is-off { opacity: 0.5; cursor: default; }
-.booking__service-off { font-size: 0.8em; opacity: 0.75; }
+.booking__service-off { font-size: 0.8em; color: var(--booking-quiet); }
 /* the native control stays for the form; the drawn one is what is seen */
 .booking .is-replaced { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
 /* the week of days */
@@ -45,7 +45,7 @@
   font: inherit; color: inherit; background: transparent; border: 1px solid var(--color-line, currentColor); border-radius: var(--radius-sm, 0.5rem); cursor: pointer;
 }
 .booking__day { display: grid; gap: 0.1rem; padding: 0.4rem 0.1rem; text-align: center; line-height: 1.2; }
-.booking__day-wd { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
+.booking__day-wd { font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em; color: var(--booking-quiet); }
 .booking__day:disabled, .booking__days-arrow:disabled { opacity: 0.35; cursor: default; }
 .booking__day.is-chosen { background: var(--color-ink, #111); color: var(--color-bg, #fff); border-color: var(--color-ink, #111); }
 .booking__days-arrow { padding: 0.3rem 0.6rem; }
@@ -53,21 +53,21 @@
 .booking__parts { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0 0 0.5rem; }
 .booking__part { padding: 0.3rem 0.7rem; border-radius: 999px; }
 .booking__part.is-current { background: var(--color-ink, #111); color: var(--color-bg, #fff); border-color: var(--color-ink, #111); }
-.booking__part-n { font-size: 0.8em; opacity: 0.75; margin-left: 0.35rem; }
+.booking__part-n { font-size: 0.8em; color: var(--booking-quiet); margin-left: 0.35rem; }
 /* the two steps */
-.booking__stepper { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; opacity: 0.75; }
+.booking__stepper { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; color: var(--booking-quiet); }
 .booking__step { display: inline-flex; align-items: center; gap: 0.4rem; }
 .booking__step-n { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1px solid currentColor; border-radius: 999px; font-size: 0.8em; }
-.booking__step.is-current { opacity: 1; font-weight: 600; }
+.booking__step.is-current { color: inherit; color: var(--ink, currentColor); font-weight: 600; }
 .booking__step.is-current .booking__step-n, .booking__step.is-done .booking__step-n { background: var(--color-ink, #111); color: var(--color-bg, #fff); border-color: var(--color-ink, #111); }
 .booking[data-stage='1'] > [data-step='2'], .booking[data-stage='2'] > [data-step='1'] { display: none; }
 .booking[data-stage='done'] > .booking__stepper, .booking[data-stage='done'] > .booking__summary, .booking[data-stage='done'] > .booking__need, .booking[data-stage='done'] > .booking__next { display: none; }
 .booking__next { padding: 0.6rem 1.2rem; }
 .booking__need { margin: 0; color: var(--color-danger, #b3261e); }
 .booking__summary { display: grid; gap: 0.6rem; padding: 0.9rem 1rem; border: 1px solid var(--line, #e5e1d8); border-radius: var(--radius-sm, 0.5rem); }
-.booking__summary-label { margin: 0; font-size: 0.75em; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
+.booking__summary-label { margin: 0; font-size: 0.75em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--booking-quiet); }
 .booking__summary-list { display: grid; gap: 0.4rem; margin: 0; }
-.booking__summary-row dt { font-size: 0.8em; opacity: 0.7; }
+.booking__summary-row dt { font-size: 0.8em; color: var(--booking-quiet); }
 .booking__summary-row dd { margin: 0; }
 .booking__back { justify-self: start; padding: 0.3rem 0.8rem; border-radius: 999px; }
 /* the drawn choice of whom */
@@ -84,6 +84,19 @@
 .booking__keep-link { flex: 1; min-width: 12rem; font: inherit; }
 .booking__keep-copy, .booking__keep-open { display: inline-flex; align-items: center; padding: 0.45rem 0.8rem; text-decoration: none; }
 
+/* Words for a screen reader alone — the month a day button is in, «copied»
+   — and a focus ring for a site that has none of its own: the lowest
+   specificity there is, so any ring the site draws wins. */
+.booking__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+:where(.booking :focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
+
+/* The quiet text of the form — a duration, a hint, a weekday — in its own
+   colour, never by opacity: opacity on a colour already quiet read 2.9:1 on
+   white and 1.9:1 on a dark panel (WCAG 1.4.3, 12 October 2026). The site's
+   quiet ink where it has one, otherwise the text's own colour. A disabled
+   control keeps its opacity: WCAG asks no contrast of it. */
+.booking { --booking-quiet: var(--ink-quiet, currentColor); }
+
 /* `hidden` means hidden, whatever the element's class says: every state here
    is shown and hidden by the attribute, and a class that sets `display` would
    otherwise win (an agent's rehearsal, 30 September 2026). */

package/elements/booking-ui.js

@@ -64,6 +64,9 @@ export function weekStrip(input, options) {
   const max = parseDay(input.max) ?? new Date(floor.getFullYear(), floor.getMonth() + 2, floor.getDate());
   const monthName = new Intl.DateTimeFormat(options.lang, { month: 'long', year: 'numeric' });
   const weekday = new Intl.DateTimeFormat(options.lang, { weekday: 'short' });
+  // The month, for a screen reader: «Mon 12» read alone is a day of no
+  // month, and a week that runs from one month into the next has two.
+  const month = new Intl.DateTimeFormat(options.lang, { month: 'long' });
   const plus = (d, n) => { const out = new Date(d); out.setDate(out.getDate() + n); return out; };
   const choosable = (d) => d >= floor && d <= max && open.has(DAY_NAMES[(d.getDay() + 6) % 7]);
 
@@ -72,6 +75,7 @@ export function weekStrip(input, options) {
   root.setAttribute('role', 'group');
   root.setAttribute('aria-label', input.labels?.[0]?.textContent?.trim() || options.words.day || 'Day');
   input.classList.add('is-replaced');
+  input.dataset.replaced = '';
   input.setAttribute('aria-hidden', 'true');
   input.tabIndex = -1;
   input.insertAdjacentElement('afterend', root);
@@ -96,10 +100,19 @@ export function weekStrip(input, options) {
         ${week.map((d) => {
           const value = ymd(d);
           const ok = choosable(d);
-          return `<button type="button" class="booking__day${value === chosen ? ' is-chosen' : ''}" data-day="${value}"${ok ? '' : ' disabled'} aria-pressed="${value === chosen}"><span class="booking__day-wd">${weekday.format(d)}</span><span class="booking__day-n">${d.getDate()}</span></button>`;
+          return `<button type="button" class="booking__day${value === chosen ? ' is-chosen' : ''}" data-day="${value}"${ok ? '' : ' disabled'} aria-pressed="${value === chosen}"><span class="booking__day-wd">${weekday.format(d)}</span> <span class="booking__day-n">${d.getDate()}</span><span class="booking__sr"> ${month.format(d)}</span></button>`;
         }).join('')}
       </div>`;
   }
+  // A redraw replaces the buttons, and the one that had the focus with them:
+  // a keyboard was left on the page's top after every press (WCAG 2.4.3,
+  // 12 October 2026). The same button, or the arrow beside a disabled one,
+  // takes it back.
+  const refocus = (selector) => {
+    const again = /** @type {HTMLButtonElement | null} */ (root.querySelector(selector));
+    const to = again && !again.disabled ? again : /** @type {HTMLButtonElement | null} */ (root.querySelector('[data-go]:not(:disabled), [data-day]:not(:disabled)'));
+    to?.focus();
+  };
   root.addEventListener('click', (event) => {
     const target = event.target instanceof Element ? event.target : null;
     const arrow = target?.closest('[data-go]');
@@ -107,16 +120,28 @@ export function weekStrip(input, options) {
       start = plus(start, Number(arrow.dataset.go));
       if (start < floor) start = new Date(floor);
       draw();
+      refocus(`[data-go="${arrow.dataset.go}"]`);
       return;
     }
     const dayButton = target?.closest('[data-day]');
     if (dayButton instanceof HTMLButtonElement && !dayButton.disabled) {
-      input.value = dayButton.dataset.day ?? '';
+      const value = dayButton.dataset.day ?? '';
+      input.value = value;
       input.dispatchEvent(new Event('change', { bubbles: true }));
       draw();
+      refocus(`[data-day="${value}"]`);
     }
   });
-  input.addEventListener('change', draw);
+  input.addEventListener('change', () => {
+    const had = root.contains(document.activeElement) ? /** @type {HTMLElement} */ (document.activeElement).dataset : null;
+    draw();
+    if (had?.day) refocus(`[data-day="${had.day}"]`);
+  });
+  // The label still names the hidden input; a press on it goes to the days.
+  input.labels?.[0]?.addEventListener('click', (event) => {
+    event.preventDefault();
+    refocus('[data-day][aria-pressed="true"]');
+  });
   draw();
 }
 
@@ -134,7 +159,10 @@ export function partsOfDay(form, words) {
   slots.dataset.parts = '1';
   const tabs = document.createElement('div');
   tabs.className = 'booking__parts';
-  tabs.setAttribute('role', 'tablist');
+  // Pressed buttons in a group, not tabs: a tablist promises arrow keys and
+  // panels, and this has neither — the times under it are the fieldset's.
+  tabs.setAttribute('role', 'group');
+  if (words.time) tabs.setAttribute('aria-label', words.time);
   tabs.hidden = true;
   slots.insertAdjacentElement('beforebegin', tabs);
   const timeOf = (pill) => to24((pill.textContent ?? '').trim()).slice(0, 5);
@@ -144,26 +172,26 @@ export function partsOfDay(form, words) {
   let current = '';
 
   const show = () => {
-    for (const pill of /** @type {NodeListOf<HTMLElement>} */ (slots.querySelectorAll('.booking__slot'))) {
+    for (const pill of /** @type {NodeListOf<HTMLElement>} */ (slots.querySelectorAll('[data-slot]'))) {
       pill.hidden = current !== '' && parts.get(pill) !== current;
     }
     for (const tab of /** @type {NodeListOf<HTMLElement>} */ (tabs.querySelectorAll('.booking__part'))) {
       tab.classList.toggle('is-current', tab.dataset.part === current);
-      tab.setAttribute('aria-selected', String(tab.dataset.part === current));
+      tab.setAttribute('aria-pressed', String(tab.dataset.part === current));
     }
   };
   const sort = () => {
-    const pills = /** @type {HTMLElement[]} */ ([...slots.querySelectorAll('.booking__slot')]);
+    const pills = /** @type {HTMLElement[]} */ ([...slots.querySelectorAll('[data-slot]')]);
     // A time on the pill is the platform's clock in the site's language;
     // the hour read off it on 24 hours whatever that clock says.
     const sorted = partsOf(pills.map(hourOf));
     pills.forEach((pill, i) => parts.set(pill, sorted[i]));
     const have = new Set(sorted);
-    const chosen = pills.find((pill) => pill.classList.contains('is-chosen'));
+    const chosen = pills.find((pill) => pill.getAttribute('aria-pressed') === 'true');
     tabs.innerHTML = PARTS.filter((part) => have.has(part))
       .map((part) => {
         const own = pills.filter((pill) => parts.get(pill) === part).map(timeOf);
-        return `<button type="button" class="booking__part" role="tab" data-part="${part}">${words[part] ?? part}<span class="booking__part-n">${own[0]}–${own[own.length - 1]}</span></button>`;
+        return `<button type="button" class="booking__part" data-part="${part}">${words[part] ?? part}<span class="booking__part-n">${own[0]}–${own[own.length - 1]}</span></button>`;
       })
       .join('');
     tabs.hidden = have.size < 2;
@@ -193,21 +221,30 @@ export function partsOfDay(form, words) {
  * @param {string} lang
  */
 export function twoSteps(form, words, lang) {
+  // A scroll the visitor did not ask for glides only for one who has not
+  // asked for less motion.
+  const smooth = () => (matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth');
   if (form.dataset.steps === '1') return;
   form.dataset.steps = '1';
   const firstHalf = new Set(['service', 'resource', 'day', 'back', 'hours', 'party', 'quantity', 'class']);
-  for (const child of /** @type {HTMLElement[]} */ ([...form.children])) {
-    const control = child.querySelector('input, select, textarea');
+  // The pieces sorted into the steps: every field by its hook, wherever the
+  // site's markup put it — in a grid, in two columns, in a card. A form of an
+  // older kit marked no fields, and its children are the pieces.
+  const marked = /** @type {HTMLElement[]} */ ([...form.querySelectorAll('[data-field], [data-times], [data-challenge], [data-submit]')]);
+  const pieces = marked.some((el) => el.matches('[data-field]')) ? marked : /** @type {HTMLElement[]} */ ([...form.children]);
+  for (const piece of pieces) {
+    const control = piece.matches('input, select, textarea') ? piece : piece.querySelector('input, select, textarea');
     const name = control instanceof HTMLInputElement || control instanceof HTMLSelectElement || control instanceof HTMLTextAreaElement ? control.name : '';
-    const first = child.matches('[data-times]') || firstHalf.has(name) || child.tagName === 'NOSCRIPT' || child.matches('[data-done]');
-    child.dataset.step = first ? '1' : '2';
+    const first = piece.matches('[data-times]') || firstHalf.has(name) || piece.tagName === 'NOSCRIPT';
+    piece.dataset.step = first ? '1' : '2';
   }
   for (const el of form.querySelectorAll('[data-done], [data-booking-error]')) /** @type {HTMLElement} */ (el).dataset.step = 'both';
 
   const stepper = document.createElement('ol');
   stepper.className = 'booking__stepper';
+  stepper.dataset.stepUi = '';
   stepper.innerHTML = [words.stepWhat ?? 'What and when', words.stepWho ?? 'Who is coming']
-    .map((name, i) => `<li class="booking__step" data-at="${i + 1}"><span class="booking__step-n">${i + 1}</span>${name}</li>`)
+    .map((name, i) => `<li class="booking__step" data-at="${i + 1}" tabindex="-1"><span class="booking__step-n">${i + 1}</span>${name}</li>`)
     .join('');
   form.prepend(stepper);
 
@@ -215,10 +252,14 @@ export function twoSteps(form, words, lang) {
   next.type = 'button';
   next.className = 'booking__next';
   next.dataset.step = '1';
+  next.dataset.stepUi = '';
   next.textContent = words.next ?? 'Continue';
   const need = document.createElement('p');
   need.className = 'booking__need';
   need.dataset.step = '1';
+  need.dataset.stepUi = '';
+  // Said as it appears, not only drawn in red.
+  need.setAttribute('role', 'alert');
   need.hidden = true;
   need.textContent = words.needAll ?? 'Pick a service, a day and a time first.';
   const times = form.querySelector('[data-times]');
@@ -228,17 +269,21 @@ export function twoSteps(form, words, lang) {
   const summary = document.createElement('div');
   summary.className = 'booking__summary';
   summary.dataset.step = '2';
-  form.insertBefore(summary, form.querySelector('[data-step="2"]'));
+  summary.dataset.stepUi = '';
+  // Before the first piece of the second step, in whatever holds it.
+  const firstOfTwo = form.querySelector('[data-step="2"]');
+  if (firstOfTwo?.parentElement) firstOfTwo.parentElement.insertBefore(summary, firstOfTwo);
+  else form.append(summary);
 
   const chosen = () => {
     const names = /** @type {HTMLInputElement[]} */ ([...form.querySelectorAll('input[name=service]:checked')])
-      .map((box) => box.closest('.booking__service')?.querySelector('.booking__service-name')?.textContent?.trim() ?? box.value);
+      .map((box) => box.closest('[data-service-row], .booking__service, label')?.querySelector('[data-service-name], .booking__service-name')?.textContent?.trim() ?? box.value);
     const single = /** @type {HTMLSelectElement | null} */ (form.querySelector('select[name=service]'));
     if (single) names.push(single.options[single.selectedIndex]?.textContent?.trim() ?? '');
     const who = /** @type {HTMLSelectElement | null} */ (form.querySelector('select[name=resource]'));
     const dayValue = /** @type {HTMLInputElement | null} */ (form.querySelector('input[name=day]'))?.value ?? '';
     const dayDate = parseDay(dayValue);
-    const slot = /** @type {HTMLElement | null} */ (form.querySelector('.booking__slot.is-chosen'));
+    const slot = /** @type {HTMLElement | null} */ (form.querySelector('[data-slot][aria-pressed="true"]'));
     const ends = /** @type {HTMLElement | null} */ (form.querySelector('[data-ends]'));
     return {
       services: names.filter(Boolean),
@@ -259,6 +304,11 @@ export function twoSteps(form, words, lang) {
     for (const step of /** @type {NodeListOf<HTMLElement>} */ (stepper.querySelectorAll('.booking__step'))) {
       step.classList.toggle('is-current', step.dataset.at === to);
       step.classList.toggle('is-done', to === 'done' || Number(step.dataset.at) < Number(to));
+      // The step's state as an attribute too, so a site styles a step behind
+      // without a class of the kit's: `data-state="done|current|ahead"`.
+      step.dataset.state = step.dataset.at === to ? 'current' : to === 'done' || Number(step.dataset.at) < Number(to) ? 'done' : 'ahead';
+      if (step.dataset.at === to) step.setAttribute('aria-current', 'step');
+      else step.removeAttribute('aria-current');
     }
     if (to === '2') {
       const c = chosen();
@@ -273,15 +323,25 @@ export function twoSteps(form, words, lang) {
         </dl>
         <button type="button" class="booking__back">${words.change ?? 'Change'}</button>`;
       summary.querySelector('.booking__back')?.addEventListener('click', () => stage('1'));
-      /** @type {HTMLInputElement | null} */ (form.querySelector('input[name=name]'))?.focus({ preventScroll: true });
     }
-    if (moved && to !== 'done') form.scrollIntoView({ block: 'start', behavior: 'smooth' });
+    // A move to another step takes the focus to that step's name, so a
+    // screen reader says where it is and the next Tab is the step's first
+    // control. Only a move: a field changed on the second step redraws the
+    // summary and leaves the focus where the visitor is — it went back to
+    // the name on every Tab out of it (WCAG 2.4.3, 12 October 2026). The
+    // answer takes the focus itself (the element's `done`).
+    if (moved && to !== 'done') {
+      /** @type {HTMLElement | null} */ (stepper.querySelector('.booking__step.is-current'))?.focus({ preventScroll: true });
+      form.scrollIntoView({ block: 'start', behavior: smooth() });
+    }
   };
 
   next.addEventListener('click', () => {
     const c = chosen();
     const ready = c.services.length > 0 && /** @type {HTMLInputElement | null} */ (form.querySelector('input[name=day]'))?.value && c.time;
     need.hidden = Boolean(ready);
+    // Written again each time, so a second press is said a second time.
+    if (!ready) need.textContent = words.needAll ?? 'Pick a service, a day and a time first.';
     if (ready) stage('2');
   });
   form.addEventListener('change', () => {
@@ -292,7 +352,7 @@ export function twoSteps(form, words, lang) {
     const settle = () => {
       if (done.hidden || form.dataset.stage === 'done') return;
       stage('done');
-      form.scrollIntoView({ block: 'start', behavior: 'smooth' });
+      form.scrollIntoView({ block: 'start', behavior: smooth() });
     };
     new MutationObserver(settle).observe(done, { attributes: true, attributeFilter: ['hidden'] });
     settle();
@@ -324,15 +384,22 @@ export function drawnSelect(select) {
   list.hidden = true;
   root.append(trigger, list);
   select.classList.add('is-replaced');
+  select.dataset.replaced = '';
   select.setAttribute('aria-hidden', 'true');
   select.tabIndex = -1;
   select.insertAdjacentElement('afterend', root);
   const label = select.labels?.[0];
-  if (label) trigger.setAttribute('aria-label', label.textContent?.trim() ?? '');
+  // A press on the label goes to the drawn control, not the hidden one.
+  label?.addEventListener('click', (event) => { event.preventDefault(); trigger.focus(); });
+  if (label) list.setAttribute('aria-label', label.textContent?.trim() ?? '');
 
   const draw = () => {
     const current = select.options[select.selectedIndex];
     trigger.innerHTML = `<span class="booking__dd-value">${current?.textContent ?? ''}</span><span class="booking__dd-mark" aria-hidden="true">▾</span>`;
+    // Named by the label and the value both: the label alone hid what is
+    // chosen, and broke the rule that a control's name holds the words drawn
+    // on it (WCAG 2.5.3) — a voice user says what they see.
+    if (label) trigger.setAttribute('aria-label', `${label.textContent?.trim() ?? ''}: ${current?.textContent?.trim() ?? ''}`);
     list.innerHTML = [...select.options]
       .map((o) => `<button type="button" class="booking__dd-option${o.selected ? ' is-chosen' : ''}" role="option" aria-selected="${o.selected}" data-value="${o.value.replace(/"/g, '&quot;')}"${o.disabled ? ' disabled' : ''}>${o.textContent}</button>`)
       .join('');
@@ -365,6 +432,9 @@ export function drawnSelect(select) {
   document.addEventListener('click', (event) => {
     if (!list.hidden && event.target instanceof Node && !root.contains(event.target)) open(false);
   });
+  root.addEventListener('focusout', (event) => {
+    if (!list.hidden && !(event.relatedTarget instanceof Node && root.contains(event.relatedTarget))) open(false);
+  });
   new MutationObserver(draw).observe(select, { childList: true, subtree: true, attributes: true });
   select.addEventListener('change', draw);
   draw();