@jungherz-de/glasskit-elements 1.19.2 → 1.21.0

package/src/components/feedback/glk-popover.js

@@ -10,9 +10,9 @@ class GlkPopover extends GlkElement {
   render() {
     this._anchor = this.createElement('div', ['glass-popover-anchor']);
 
-    const triggerSlot = document.createElement('slot');
-    triggerSlot.setAttribute('name', 'trigger');
-    this._anchor.appendChild(triggerSlot);
+    this._triggerSlot = document.createElement('slot');
+    this._triggerSlot.setAttribute('name', 'trigger');
+    this._anchor.appendChild(this._triggerSlot);
 
     this._popover = this.createElement('div', ['glass-popover']);
     this._applyPlacement();
@@ -36,7 +36,23 @@ class GlkPopover extends GlkElement {
     }
   }
 
+  /**
+   * The trigger says whether the popover is open. It lives in the light DOM,
+   * so aria-expanded goes on it directly; <glk-button> and <glk-pill> hand
+   * it on to their native button. Runs again when the trigger is swapped.
+   */
+  _applyExpanded() {
+    const open = String(this.getBoolAttr('open'));
+    for (const trigger of this._triggerSlot.assignedElements()) {
+      trigger.setAttribute('aria-expanded', open);
+    }
+  }
+
   setupEvents() {
+    this._onSlotChange = () => this._applyExpanded();
+    this._triggerSlot.addEventListener('slotchange', this._onSlotChange);
+    this._applyExpanded();
+
     // Toggle when the slotted trigger is clicked.
     this._onTriggerClick = (e) => {
       const path = e.composedPath();
@@ -68,6 +84,7 @@ class GlkPopover extends GlkElement {
   }
 
   teardownEvents() {
+    this._triggerSlot?.removeEventListener('slotchange', this._onSlotChange);
     this.removeEventListener('click', this._onTriggerClick);
     document.removeEventListener('click', this._onDocClick);
     document.removeEventListener('keydown', this._onKeydown);
@@ -79,6 +96,7 @@ class GlkPopover extends GlkElement {
       case 'open': {
         const isOpen = this.getBoolAttr('open');
         this._popover.classList.toggle('is-open', isOpen);
+        this._applyExpanded();
         this.emit(isOpen ? 'glk-open' : 'glk-close');
         break;
       }

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

@@ -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' });

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-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);