@jungherz-de/glasskit-elements 1.19.1 → 1.20.0

package/src/components/forms/glk-calendar.js

@@ -7,7 +7,7 @@ import { isoDate, parseIso, addDays, parseJsonObject, resolveLocale, formatters,
 //             today), value (YYYY-MM-DD), today (YYYY-MM-DD), min, max
 //             (YYYY-MM-DD; days outside cannot be picked), marks (JSON
 //             {date: tone | [tone, …]}, up to three dots), locale (default
-//             the browser language), week-start (0 = Sunday … 6 = Saturday;
+//             the page language, else the browser's), week-start (0 = Sunday … 6 = Saturday;
 //             default from the locale, Monday where the browser cannot say),
 //             label (aria-label of the day group), prev-label / next-label
 //             (names of the nav buttons, English by default)
@@ -45,6 +45,9 @@ class GlkCalendar extends GlkFormElement {
     return ['month', 'value', 'today', 'min', 'max', 'marks', 'locale', 'week-start', 'label', 'prev-label', 'next-label'];
   }
 
+  // Delegated focus would land on the month arrow, not on the chosen day.
+  static get delegatesFocus() { return false; }
+
   render() {
     this._root = this.createElement('div', ['glass-calendar'], { part: 'calendar' });
     const head = this.createElement('div', ['glass-calendar__head'], { part: 'head' });
@@ -65,7 +68,7 @@ class GlkCalendar extends GlkFormElement {
   get _todayIso() { return this.getAttribute('today') || isoDate(new Date()); }
 
   _build() {
-    const locale = resolveLocale(this.getAttribute('locale'));
+    const locale = resolveLocale(this.getAttribute('locale'), this);
     const f = formatters(locale);
     const month = this.month;
     const first = parseIso(month);
@@ -242,7 +245,7 @@ class GlkCalendar extends GlkFormElement {
   get marks() { return parseJsonObject(this.getAttribute('marks')); }
   set marks(v) { this.setAttribute('marks', typeof v === 'string' ? v : JSON.stringify(v ?? {})); }
 
-  get locale() { return resolveLocale(this.getAttribute('locale')); }
+  get locale() { return resolveLocale(this.getAttribute('locale'), this); }
   set locale(v) {
     if (v) this.setAttribute('locale', v);
     else this.removeAttribute('locale');

package/src/components/forms/glk-checkbox.js

@@ -1,12 +1,14 @@
-import { GlkFormElement } from '../../base.js';
+import { GlkFormElement, checkControlSheet, forwardHostClicks } from '../../base.js';
 
 const CHECKMARK_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>`;
 
 class GlkCheckbox extends GlkFormElement {
   static get observedAttributes() {
-    return ['checked', 'disabled', 'label', 'name', 'value'];
+    return ['checked', 'disabled', 'label', 'name', 'value', 'required'];
   }
 
+  static get hostStyles() { return checkControlSheet; }
+
   render() {
     const label = this.createElement('label', ['glass-checkbox']);
 
@@ -29,6 +31,7 @@ class GlkCheckbox extends GlkFormElement {
 
     if (this.getBoolAttr('checked')) this._input.checked = true;
     if (this.getBoolAttr('disabled')) this._input.disabled = true;
+    if (this.getBoolAttr('required')) this._input.required = true;
 
     this._defaultChecked = this.getBoolAttr('checked');
     this._wrapper.appendChild(label);
@@ -45,10 +48,12 @@ class GlkCheckbox extends GlkFormElement {
       this.dispatchEvent(new Event('change', { bubbles: true }));
     };
     this._input.addEventListener('change', this._onChange);
+    this._unforwardClicks = forwardHostClicks(this, () => this._input);
   }
 
   teardownEvents() {
     this._input?.removeEventListener('change', this._onChange);
+    this._unforwardClicks?.();
   }
 
   onAttributeChanged(name) {
@@ -68,9 +73,14 @@ class GlkCheckbox extends GlkFormElement {
       case 'name':
         this._input.setAttribute('name', this.getAttribute('name') || '');
         break;
+      case 'required':
+        this._input.required = this.getBoolAttr('required');
+        break;
     }
   }
 
+  get _validityField() { return this._input; }
+
   _syncFormValue() {
     const val = this.getAttribute('value') || 'on';
     this.setFormValue(this._input.checked ? val : null);

package/src/components/forms/glk-input.js

@@ -14,12 +14,15 @@ class GlkInput extends GlkFormElement {
   render() {
     const group = this.createElement('div', ['glass-input-group']);
 
-    // Label
-    this._labelEl = this.createElement('label', ['glass-label']);
+    // Label — tied to the field by id, which only has to be unique inside
+    // this shadow root. That gives the field its accessible name, and a click
+    // on the label text focuses it.
+    this._labelEl = this.createElement('label', ['glass-label'], { for: 'field' });
     this._labelEl.textContent = this.getAttribute('label') || '';
 
     // Input
     this._input = this.createElement('input', this._computeInputClasses(), {
+      id: 'field',
       type: this.getAttribute('type') || 'text'
     });
 
@@ -36,8 +39,8 @@ class GlkInput extends GlkFormElement {
     if (this.getBoolAttr('required')) this._input.required = true;
     for (const attr of FORWARDED) this._forward(attr);
 
-    // Hint
-    this._hintEl = this.createElement('span', this._computeHintClasses());
+    // Hint — read out with the field as its description
+    this._hintEl = this.createElement('span', this._computeHintClasses(), { id: 'hint' });
     this._hintEl.textContent = this.getAttribute('hint') || '';
 
     group.appendChild(this._labelEl);
@@ -47,6 +50,7 @@ class GlkInput extends GlkFormElement {
     this._group = group;
     this._wrapper.appendChild(group);
 
+    this._applyDescription();
     this._syncFormValue();
   }
 
@@ -84,12 +88,14 @@ class GlkInput extends GlkFormElement {
       case 'error':
         this._input.className = this._computeInputClasses().join(' ');
         this._hintEl.className = this._computeHintClasses().join(' ');
+        this._applyDescription();
         break;
       case 'hint':
         this._hintEl.textContent = this.getAttribute('hint') || '';
         if (this.getAttribute('hint') && !this._hintEl.parentNode) {
           this._group.appendChild(this._hintEl);
         }
+        this._applyDescription();
         break;
       case 'disabled':
         this._input.disabled = this.getBoolAttr('disabled');
@@ -109,6 +115,19 @@ class GlkInput extends GlkFormElement {
     }
   }
 
+  /**
+   * The hint describes the field; with `error` set it is the error message
+   * and the field is marked invalid. Server-side errors arrive this way, so
+   * `error` stays a marker for assistive technology and does not block the
+   * form — only the field's own constraints (required, pattern …) do.
+   */
+  _applyDescription() {
+    if (this.getAttribute('hint')) this._input.setAttribute('aria-describedby', 'hint');
+    else this._input.removeAttribute('aria-describedby');
+    if (this.getBoolAttr('error')) this._input.setAttribute('aria-invalid', 'true');
+    else this._input.removeAttribute('aria-invalid');
+  }
+
   _forward(attr) {
     const value = this.getAttribute(attr);
     if (value === null) this._input.removeAttribute(attr);
@@ -127,6 +146,8 @@ class GlkInput extends GlkFormElement {
     return classes;
   }
 
+  get _validityField() { return this._input; }
+
   _syncFormValue() {
     this.setFormValue(this._input.value);
   }

package/src/components/forms/glk-radio.js

@@ -1,4 +1,4 @@
-import { GlkFormElement } from '../../base.js';
+import { GlkFormElement, checkControlSheet, forwardHostClicks } from '../../base.js';
 
 // ── Grouping ──
 // Every <glk-radio> keeps its <input type="radio"> in its own shadow root, and
@@ -29,9 +29,11 @@ function syncGroupTabIndex(group) {
 
 class GlkRadio extends GlkFormElement {
   static get observedAttributes() {
-    return ['checked', 'disabled', 'label', 'name', 'value'];
+    return ['checked', 'disabled', 'label', 'name', 'value', 'required'];
   }
 
+  static get hostStyles() { return checkControlSheet; }
+
   render() {
     const label = this.createElement('label', ['glass-radio']);
 
@@ -86,11 +88,13 @@ class GlkRadio extends GlkFormElement {
 
     this._input.addEventListener('change', this._onChange);
     this._input.addEventListener('keydown', this._onKeyDown);
+    this._unforwardClicks = forwardHostClicks(this, () => this._input);
   }
 
   teardownEvents() {
     this._input?.removeEventListener('change', this._onChange);
     this._input?.removeEventListener('keydown', this._onKeyDown);
+    this._unforwardClicks?.();
   }
 
   /** Shared by user change and arrow-key selection, so both look identical. */
@@ -125,6 +129,26 @@ class GlkRadio extends GlkFormElement {
     }
   }
 
+  get _validityField() { return this._input; }
+
+  /**
+   * Radios are missing a value as a group: one required radio makes the
+   * whole group required, and any checked one satisfies it. Each input here
+   * sits alone in its shadow root, so the group's verdict is worked out across
+   * the elements and handed to every member. The inner input carries
+   * `required` only while the group lacks a value — that way it produces the
+   * browser's own message for it.
+   */
+  syncValidity() {
+    const group = this._group();
+    const missing = group.some(el => el.hasAttribute('required')) && !group.some(el => el.checked);
+    for (const el of group) {
+      if (!el._input) continue;            // not rendered yet; syncs when it is
+      el._input.required = missing;
+      super.syncValidity.call(el);
+    }
+  }
+
   onAttributeChanged(name) {
     if (this._syncing) return;
     if (!this._input) return;

package/src/components/forms/glk-range.js

@@ -10,7 +10,8 @@ class GlkRange extends GlkFormElement {
 
     const header = this.createElement('div', ['glass-range-header']);
 
-    this._labelEl = this.createElement('label', []);
+    // Tied to the slider by an id that only has to be unique in this shadow root.
+    this._labelEl = this.createElement('label', [], { for: 'field' });
     this._labelEl.textContent = this.getAttribute('label') || '';
 
     this._valueEl = this.createElement('span', ['glass-range-value']);
@@ -19,6 +20,7 @@ class GlkRange extends GlkFormElement {
     header.appendChild(this._valueEl);
 
     this._input = this.createElement('input', ['glass-range'], {
+      id: 'field',
       type: 'range',
       min: this.getAttribute('min') || '0',
       max: this.getAttribute('max') || '100',

package/src/components/forms/glk-search.js

@@ -4,7 +4,7 @@ const SEARCH_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" s
 
 class GlkSearch extends GlkFormElement {
   static get observedAttributes() {
-    return ['placeholder', 'name', 'value', 'disabled'];
+    return ['placeholder', 'name', 'value', 'disabled', 'label'];
   }
 
   render() {
@@ -20,6 +20,10 @@ class GlkSearch extends GlkFormElement {
     const placeholder = this.getAttribute('placeholder');
     if (placeholder) this._input.setAttribute('placeholder', placeholder);
 
+    // The search field has no visible label; `label` names it for assistive
+    // technology. Without it the placeholder is all a screen reader can say.
+    this._applyLabel();
+
     const name = this.getAttribute('name');
     if (name) this._input.setAttribute('name', name);
 
@@ -64,9 +68,18 @@ class GlkSearch extends GlkFormElement {
       case 'disabled':
         this._input.disabled = this.getBoolAttr('disabled');
         break;
+      case 'label':
+        this._applyLabel();
+        break;
     }
   }
 
+  _applyLabel() {
+    const label = this.getAttribute('label');
+    if (label) this._input.setAttribute('aria-label', label);
+    else this._input.removeAttribute('aria-label');
+  }
+
   _syncFormValue() {
     this.setFormValue(this._input.value);
   }

package/src/components/forms/glk-segmented.js

@@ -39,6 +39,10 @@ function parseList(json) {
 class GlkSegmented extends GlkFormElement {
   static get observedAttributes() { return ['options', 'value', 'full', 'overflow', 'label']; }
 
+  // A row of buttons with one tab stop: delegated focus would land on the
+  // first button, not the chosen one.
+  static get delegatesFocus() { return false; }
+
   render() {
     this._group = this.createElement('div', ['glass-segmented'], { role: 'group', part: 'group' });
     this._wrapper.appendChild(this._group);

package/src/components/forms/glk-select.js

@@ -10,10 +10,11 @@ class GlkSelect extends GlkFormElement {
   render() {
     const group = this.createElement('div', ['glass-input-group']);
 
-    this._labelEl = this.createElement('label', ['glass-label']);
+    // Tied to the field by an id that only has to be unique in this shadow root.
+    this._labelEl = this.createElement('label', ['glass-label'], { for: 'field' });
     this._labelEl.textContent = this.getAttribute('label') || '';
 
-    this._select = this.createElement('select', ['glass-select']);
+    this._select = this.createElement('select', ['glass-select'], { id: 'field' });
 
     const name = this.getAttribute('name');
     if (name) this._select.setAttribute('name', name);
@@ -101,9 +102,14 @@ class GlkSelect extends GlkFormElement {
         this._applyValue(this.getAttribute('value'));
         this._syncFormValue();
         break;
+      case 'required':
+        this._select.required = this.getBoolAttr('required');
+        break;
     }
   }
 
+  get _validityField() { return this._select; }
+
   _syncFormValue() {
     this.setFormValue(this._select.value);
   }

package/src/components/forms/glk-textarea.js

@@ -8,10 +8,11 @@ class GlkTextarea extends GlkFormElement {
   render() {
     const group = this.createElement('div', ['glass-input-group']);
 
-    this._labelEl = this.createElement('label', ['glass-label']);
+    // Tied to the field by an id that only has to be unique in this shadow root.
+    this._labelEl = this.createElement('label', ['glass-label'], { for: 'field' });
     this._labelEl.textContent = this.getAttribute('label') || '';
 
-    this._textarea = this.createElement('textarea', ['glass-textarea']);
+    this._textarea = this.createElement('textarea', ['glass-textarea'], { id: 'field' });
     const placeholder = this.getAttribute('placeholder');
     if (placeholder) this._textarea.setAttribute('placeholder', placeholder);
 
@@ -69,9 +70,14 @@ class GlkTextarea extends GlkFormElement {
         this._textarea.value = this.getAttribute('value') || '';
         this._syncFormValue();
         break;
+      case 'required':
+        this._textarea.required = this.getBoolAttr('required');
+        break;
     }
   }
 
+  get _validityField() { return this._textarea; }
+
   _syncFormValue() {
     this.setFormValue(this._textarea.value);
   }

package/src/components/forms/glk-toggle.js

@@ -1,15 +1,22 @@
-import { GlkFormElement } from '../../base.js';
+import { GlkFormElement, checkControlSheet, forwardHostClicks } from '../../base.js';
 
 class GlkToggle extends GlkFormElement {
   static get observedAttributes() {
-    return ['checked', 'disabled', 'label', 'name', 'value'];
+    return ['checked', 'disabled', 'label', 'name', 'value', 'required'];
   }
 
+  static get hostStyles() { return checkControlSheet; }
+
   render() {
     const label = this.createElement('label', ['glass-toggle']);
 
+    // The native checkbox is the switch: role, checked state and name (from
+    // the label around it) all sit on one control. The host has no role of
+    // its own — it used to carry role="switch" as well, and screen readers met
+    // a switch with a checkbox inside.
     this._input = this.createElement('input', ['glass-toggle__input'], {
-      type: 'checkbox'
+      type: 'checkbox',
+      role: 'switch'
     });
 
     const name = this.getAttribute('name');
@@ -28,14 +35,12 @@ class GlkToggle extends GlkFormElement {
 
     if (this.getBoolAttr('checked')) this._input.checked = true;
     if (this.getBoolAttr('disabled')) this._input.disabled = true;
+    if (this.getBoolAttr('required')) this._input.required = true;
 
     this._defaultChecked = this.getBoolAttr('checked');
     this._wrapper.appendChild(label);
 
     this._syncFormValue();
-    this.setAttribute('role', 'switch');
-    this.setAttribute('aria-checked', String(this._input.checked));
-    if (this.getBoolAttr('disabled')) this.setAttribute('aria-disabled', 'true');
   }
 
   setupEvents() {
@@ -43,16 +48,17 @@ class GlkToggle extends GlkFormElement {
       this._syncing = true;
       this.setBoolAttr('checked', this._input.checked);
       this._syncing = false;
-      this.setAttribute('aria-checked', String(this._input.checked));
       this._syncFormValue();
       this.emit('glk-change', { checked: this._input.checked });
       this.dispatchEvent(new Event('change', { bubbles: true }));
     };
     this._input.addEventListener('change', this._onChange);
+    this._unforwardClicks = forwardHostClicks(this, () => this._input);
   }
 
   teardownEvents() {
     this._input?.removeEventListener('change', this._onChange);
+    this._unforwardClicks?.();
   }
 
   onAttributeChanged(name) {
@@ -61,12 +67,10 @@ class GlkToggle extends GlkFormElement {
     switch (name) {
       case 'checked':
         this._input.checked = this.getBoolAttr('checked');
-        this.setAttribute('aria-checked', String(this._input.checked));
         this._syncFormValue();
         break;
       case 'disabled':
         this._input.disabled = this.getBoolAttr('disabled');
-        this.setAttribute('aria-disabled', String(this.getBoolAttr('disabled')));
         break;
       case 'label':
         this._labelEl.textContent = this.getAttribute('label') || '';
@@ -74,9 +78,14 @@ class GlkToggle extends GlkFormElement {
       case 'name':
         this._input.setAttribute('name', this.getAttribute('name') || '');
         break;
+      case 'required':
+        this._input.required = this.getBoolAttr('required');
+        break;
     }
   }
 
+  get _validityField() { return this._input; }
+
   _syncFormValue() {
     const val = this.getAttribute('value') || 'on';
     this.setFormValue(this._input.checked ? val : null);
@@ -85,7 +94,6 @@ class GlkToggle extends GlkFormElement {
   resetValue() {
     this._input.checked = this._defaultChecked;
     this.setBoolAttr('checked', this._defaultChecked);
-    this.setAttribute('aria-checked', String(this._defaultChecked));
     this._syncFormValue();
   }
 
@@ -100,7 +108,6 @@ class GlkToggle extends GlkFormElement {
   set checked(v) {
     if (this._input) this._input.checked = v;
     this.setBoolAttr('checked', v);
-    this.setAttribute('aria-checked', String(v));
     this._syncFormValue();
   }
 

package/src/components/navigation/glk-date-strip.js

@@ -8,7 +8,8 @@ import { revealCentered } from '../../reveal.js';
 // Attributes: start (YYYY-MM-DD, default today), days (count, default 7),
 //             value (YYYY-MM-DD), today (YYYY-MM-DD, default the browser's
 //             day), marks (JSON {date: tone | {tone, disabled}}), locale
-//             (default the browser language), label (aria-label of the group)
+//             (default the page language, else the browser's), label
+//             (aria-label of the group)
 // Properties: value, marks (object or JSON text), locale, label
 // Event:      glk-change { value } — only on a change made by the user
 // Part:       strip
@@ -41,7 +42,7 @@ class GlkDateStrip extends GlkElement {
   }
 
   _build() {
-    const f = formatters(resolveLocale(this.getAttribute('locale')));
+    const f = formatters(resolveLocale(this.getAttribute('locale'), this));
     const marks = parseJsonObject(this.getAttribute('marks'));
     const start = parseIso(this.getAttribute('start')) ?? new Date();
     const today = this.getAttribute('today') || isoDate(new Date());
@@ -153,7 +154,7 @@ class GlkDateStrip extends GlkElement {
   get marks() { return parseJsonObject(this.getAttribute('marks')); }
   set marks(v) { this.setAttribute('marks', typeof v === 'string' ? v : JSON.stringify(v ?? {})); }
 
-  get locale() { return resolveLocale(this.getAttribute('locale')); }
+  get locale() { return resolveLocale(this.getAttribute('locale'), this); }
   set locale(v) {
     if (v) this.setAttribute('locale', v);
     else this.removeAttribute('locale');

package/src/components/navigation/glk-pill.js

@@ -1,8 +1,12 @@
 import { GlkElement } from '../../base.js';
 
+// Handed down to the native button, which is what assistive technology reads —
+// <glk-popover> sets aria-expanded on its trigger.
+const FORWARDED_ARIA = ['aria-expanded', 'aria-haspopup', 'aria-pressed'];
+
 class GlkPill extends GlkElement {
   static get observedAttributes() {
-    return ['label', 'disabled'];
+    return ['label', 'disabled', ...FORWARDED_ARIA];
   }
 
   render() {
@@ -12,6 +16,7 @@ class GlkPill extends GlkElement {
 
     const ariaLabel = this.getAttribute('label');
     if (ariaLabel) this._btn.setAttribute('aria-label', ariaLabel);
+    for (const attr of FORWARDED_ARIA) this._forward(attr);
 
     // Slotted content (SVG icons, text)
     this._btn.appendChild(document.createElement('slot'));
@@ -40,8 +45,16 @@ class GlkPill extends GlkElement {
       case 'disabled':
         this._btn.disabled = this.getBoolAttr('disabled');
         break;
+      default:
+        if (FORWARDED_ARIA.includes(name)) this._forward(name);
     }
   }
+
+  _forward(attr) {
+    const value = this.getAttribute(attr);
+    if (value === null) this._btn.removeAttribute(attr);
+    else this._btn.setAttribute(attr, value);
+  }
 }
 
 customElements.define('glk-pill', GlkPill);

package/src/dates.js

@@ -1,8 +1,8 @@
 // Date helpers shared by <glk-date-strip> and <glk-calendar>. Everything
 // works on local calendar days — a date is "YYYY-MM-DD" in the element API
 // and a local Date inside — so a day never shifts across midnight the way a
-// UTC timestamp would. Names come from Intl, keyed by the element's locale
-// attribute or the browser language.
+// UTC timestamp would. Names come from Intl, in the language resolveLocale()
+// finds for the element.
 
 export const pad = n => String(n).padStart(2, '0');
 
@@ -30,8 +30,29 @@ export function parseJsonObject(text) {
   }
 }
 
-export function resolveLocale(attr) {
-  return attr || (typeof navigator !== 'undefined' && navigator.language) || 'en';
+/**
+ * The language to name days and months in: the element's locale attribute;
+ * else the language of the page around it — the lang of the nearest
+ * ancestor, looked up across shadow roots through their hosts, so
+ * <html lang="de"> reaches an element inside another component's shadow
+ * tree and a <section lang="en"> in a German page stays English; else the
+ * browser's; else English. An empty lang means "unknown" in HTML and falls
+ * through to the browser's language. (Since 1.19.2 — before, the browser's
+ * language came right after the attribute.)
+ */
+export function resolveLocale(attr, el) {
+  if (attr) return attr;
+  for (let node = el; node; ) {
+    const tagged = node.closest?.('[lang]');
+    if (tagged) {
+      const lang = tagged.getAttribute('lang').trim();
+      if (lang) return lang;
+      break;
+    }
+    const root = node.getRootNode?.();
+    node = typeof ShadowRoot !== 'undefined' && root instanceof ShadowRoot ? root.host : null;
+  }
+  return (typeof navigator !== 'undefined' && navigator.language) || 'en';
 }
 
 // Intl formatters are cheap to keep and not to make; one set per locale.