@boostdev/design-system-components 2.8.0 → 2.11.0

package/src/web-components/interaction/form/bds-checkbox-group.spec.ts

@@ -52,4 +52,103 @@ describe('bds-checkbox-group', () => {
     expect(message?.textContent?.trim()).toBe('Select all that apply');
     cleanup(el);
   });
+
+  it('propagates disabled to slotted bds-checkbox elements', async () => {
+    const el = await fixture(
+      '<bds-checkbox-group label="Interests" disabled>' +
+        '<bds-checkbox value="sports">Sports</bds-checkbox>' +
+        '<bds-checkbox value="music">Music</bds-checkbox>' +
+        '</bds-checkbox-group>',
+    ) as BdsCheckboxGroup;
+    await Promise.resolve();
+    const checkboxes = Array.from(el.querySelectorAll('bds-checkbox'));
+    expect(checkboxes.every(checkbox => checkbox.hasAttribute('disabled'))).toBe(true);
+    cleanup(el);
+  });
+
+  it('removes propagated disabled from slotted bds-checkbox elements when re-enabled, keeping individually-disabled ones', async () => {
+    const el = await fixture(
+      '<bds-checkbox-group label="Interests" disabled>' +
+        '<bds-checkbox value="sports">Sports</bds-checkbox>' +
+        '<bds-checkbox value="music" disabled>Music</bds-checkbox>' +
+        '</bds-checkbox-group>',
+    ) as BdsCheckboxGroup;
+    await Promise.resolve();
+
+    el.disabled = false;
+    await el.updateComplete;
+    await Promise.resolve();
+
+    const [sports, music] = Array.from(el.querySelectorAll('bds-checkbox'));
+    expect(sports.hasAttribute('disabled')).toBe(false);
+    expect(music.hasAttribute('disabled')).toBe(true);
+    cleanup(el);
+  });
+
+  it('propagates disabled to a bds-checkbox slotted in after the group is already disabled', async () => {
+    const el = await fixture('<bds-checkbox-group label="Interests" disabled></bds-checkbox-group>') as BdsCheckboxGroup;
+    const checkbox = document.createElement('bds-checkbox');
+    checkbox.setAttribute('value', 'sports');
+    el.appendChild(checkbox);
+    // slotchange fires asynchronously; allow a microtask.
+    await new Promise(r => requestAnimationFrame(() => r(null)));
+    expect(checkbox.hasAttribute('disabled')).toBe(true);
+    cleanup(el);
+  });
+
+  it('exposes a visually-hidden "(required)" text alternative instead of aria-required on the fieldset', async () => {
+    const el = await fixture('<bds-checkbox-group label="Test" required></bds-checkbox-group>');
+    const fieldset = el.shadowRoot!.querySelector('fieldset')!;
+    // aria-required is not supported ARIA on role=group (which is what a bare
+    // <fieldset> maps to) — assert it is never set.
+    expect(fieldset.hasAttribute('aria-required')).toBe(false);
+    const requiredLabel = el.shadowRoot!.querySelector('.requiredLabel');
+    expect(requiredLabel?.textContent?.trim()).toBe('(required)');
+    cleanup(el);
+  });
+
+  it('omits the required text alternative when not required', async () => {
+    const el = await fixture('<bds-checkbox-group label="Test"></bds-checkbox-group>');
+    expect(el.shadowRoot!.querySelector('.requiredLabel')).toBeNull();
+    cleanup(el);
+  });
+
+  it('wires aria-describedby on the fieldset to the error message id', async () => {
+    const el = await fixture('<bds-checkbox-group label="Test" error="Select at least one"></bds-checkbox-group>');
+    const fieldset = el.shadowRoot!.querySelector('fieldset')!;
+    const message = el.shadowRoot!.querySelector('.message--error')!;
+    expect(fieldset.getAttribute('aria-describedby')).toBe(message.id);
+    cleanup(el);
+  });
+
+  it('wires aria-describedby on the fieldset to the hint message id', async () => {
+    const el = await fixture('<bds-checkbox-group label="Test" hint="Select all that apply"></bds-checkbox-group>');
+    const fieldset = el.shadowRoot!.querySelector('fieldset')!;
+    const message = el.shadowRoot!.querySelector('.message--hint')!;
+    expect(fieldset.getAttribute('aria-describedby')).toBe(message.id);
+    cleanup(el);
+  });
+
+  it('omits aria-describedby on the fieldset when there is no error or hint', async () => {
+    const el = await fixture('<bds-checkbox-group label="Test"></bds-checkbox-group>');
+    const fieldset = el.shadowRoot!.querySelector('fieldset')!;
+    expect(fieldset.hasAttribute('aria-describedby')).toBe(false);
+    cleanup(el);
+  });
+
+  it('uses medium font-weight token for the legend (not semibold)', () => {
+    const styles = BdsCheckboxGroup.styles.toString();
+    expect(styles).toContain('--bds-font_weight--medium');
+    expect(styles).not.toContain('--bds-font_weight--semibold');
+  });
+
+  it('uses the on-bg error color token for the error message (not the raw error token)', () => {
+    const styles = BdsCheckboxGroup.styles.toString();
+    expect(styles).toContain('--bds-color_error_on-bg');
+  });
+
+  it('applies :host([disabled]) visual styling for the group', () => {
+    const styles = BdsCheckboxGroup.styles.toString();
+    expect(styles).toContain(':host([disabled])');
+  });
 });

package/src/web-components/interaction/form/bds-checkbox-group.ts

@@ -1,15 +1,28 @@
-import { LitElement, css, html } from 'lit';
+import { LitElement, css, html, nothing } from 'lit';
 
 /**
  * `<bds-checkbox-group>` — groups related checkboxes with a shared label.
  *
  * Renders a `<fieldset>` with a `<legend>` for accessible grouping.
+ * Propagates `disabled` to slotted `<bds-checkbox>` elements — a shadow-DOM
+ * `<fieldset disabled>` has no effect on slotted light-DOM content on its
+ * own, so the group attribute is explicitly applied to (and removed from)
+ * each child. A checkbox individually marked `disabled` in markup stays
+ * disabled even after the group re-enables.
+ *
+ * `required` is surfaced to assistive tech via a visually-hidden "(required)"
+ * text alternative in the legend rather than `aria-required` on the fieldset —
+ * `aria-required` is only a supported property on the `checkbox`, `combobox`,
+ * `gridcell`, `listbox`, `radiogroup`, `spinbutton`, `textbox` and `tree`
+ * roles; a bare `<fieldset>` maps to the generic `group` role, which does not
+ * support it (there is no ARIA `checkboxgroup` role), so the attribute would
+ * be silently ignored by assistive tech.
  *
  * Attributes:
  *   label    — visible group label (rendered as `<legend>`)
  *   error    — error message shown below items
  *   hint     — hint text shown below items
- *   disabled — disables the entire fieldset
+ *   disabled — disables the entire fieldset and all slotted `<bds-checkbox>` elements
  *   required — marks the group as required
  *
  * Slots:
@@ -23,10 +36,25 @@ import { LitElement, css, html } from 'lit';
  */
 export class BdsCheckboxGroup extends LitElement {
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
     }
 
+    :host([disabled]) .legend,
+    :host([disabled]) .message {
+      opacity: 0.5;
+    }
+
     fieldset {
       border: none;
       margin: 0;
@@ -36,7 +64,7 @@ export class BdsCheckboxGroup extends LitElement {
     .legend {
       font-size: var(--bds-font_size--body--s);
       font-family: var(--bds-font_family--body);
-      font-weight: var(--bds-font_weight--semibold);
+      font-weight: var(--bds-font_weight--medium);
       color: var(--bds-color_on-bg);
       margin-block-end: var(--bds-space_xs);
     }
@@ -46,6 +74,22 @@ export class BdsCheckboxGroup extends LitElement {
       margin-inline-start: var(--bds-space_xxxs);
     }
 
+    /* Visually hidden but still exposed to assistive tech — carries the
+       "required" state into the fieldset's accessible name, since the
+       visible asterisk above is aria-hidden and aria-required is not
+       supported ARIA on a fieldset (role=group). */
+    .requiredLabel {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
+
     .items {
       display: flex;
       flex-direction: column;
@@ -59,7 +103,7 @@ export class BdsCheckboxGroup extends LitElement {
     }
 
     .message--error {
-      color: var(--bds-color_error);
+      color: var(--bds-color_error_on-bg);
     }
 
     .message--hint {
@@ -82,6 +126,8 @@ export class BdsCheckboxGroup extends LitElement {
   declare disabled: boolean;
   declare required: boolean;
 
+  private readonly _uid = Math.random().toString(36).slice(2, 8);
+
   constructor() {
     super();
     this.label = '';
@@ -89,20 +135,60 @@ export class BdsCheckboxGroup extends LitElement {
     this.required = false;
   }
 
+  /**
+   * Propagates `disabled` to slotted `<bds-checkbox>` elements. Only checkboxes
+   * that were enabled before the group disabled them are re-enabled when the
+   * group re-enables — a checkbox individually marked `disabled` in markup
+   * stays disabled.
+   */
+  private _propagateDisabled = () => {
+    this.querySelectorAll('bds-checkbox').forEach(checkbox => {
+      const el = checkbox as HTMLElement;
+      if (this.disabled) {
+        if (!el.hasAttribute('disabled')) {
+          el.setAttribute('data-bds-group-disabled', '');
+        }
+        el.setAttribute('disabled', '');
+      } else if (el.hasAttribute('data-bds-group-disabled')) {
+        el.removeAttribute('disabled');
+        el.removeAttribute('data-bds-group-disabled');
+      }
+    });
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Propagate after slot content has been parsed
+    Promise.resolve().then(this._propagateDisabled);
+  }
+
+  updated(changed: Map<string, unknown>) {
+    super.updated(changed);
+    if (changed.has('disabled')) {
+      this._propagateDisabled();
+    }
+  }
+
   render() {
+    const errorId = `bds-checkbox-group-${this._uid}-error`;
+    const hintId = `bds-checkbox-group-${this._uid}-hint`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(' ') || undefined;
+
     return html`
-      <fieldset ?disabled=${this.disabled}>
+      <fieldset ?disabled=${this.disabled} aria-describedby=${describedBy ?? nothing}>
         <legend class="legend">
           ${this.label}
-          ${this.required ? html`<span class="required" aria-hidden="true"> *</span>` : ''}
+          ${this.required
+            ? html`<span class="required" aria-hidden="true"> *</span> <span class="requiredLabel">(required)</span>`
+            : ''}
         </legend>
         <div class="items">
-          <slot></slot>
+          <slot @slotchange=${this._propagateDisabled}></slot>
         </div>
         ${this.error
-          ? html`<p class="message message--error" role="alert">${this.error}</p>`
+          ? html`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>`
           : this.hint
-            ? html`<p class="message message--hint">${this.hint}</p>`
+            ? html`<p id=${hintId} class="message message--hint">${this.hint}</p>`
             : ''}
       </fieldset>
     `;

package/src/web-components/interaction/form/bds-checkbox.spec.ts

@@ -60,4 +60,59 @@ describe('bds-checkbox', () => {
   it('is form-associated', () => {
     expect(BdsCheckbox.formAssociated).toBe(true);
   });
+
+  it('recomputes required validity when checked changes (not just when required changes)', async () => {
+    const setValidity = vi.fn();
+    const spy = vi
+      .spyOn(HTMLElement.prototype, 'attachInternals')
+      .mockReturnValue({ setValidity, setFormValue: vi.fn() } as unknown as ElementInternals);
+
+    const el = await fixture('<bds-checkbox name="agree" required>Accept</bds-checkbox>') as BdsCheckbox;
+    // Initial connect already reports invalid (required + unchecked) — clear that call.
+    setValidity.mockClear();
+
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.checked = true;
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    await el.updateComplete;
+
+    expect(setValidity).toHaveBeenLastCalledWith({});
+
+    spy.mockRestore();
+    cleanup(el);
+  });
+
+  it('reports invalid when a required checkbox becomes unchecked again', async () => {
+    const setValidity = vi.fn();
+    const spy = vi
+      .spyOn(HTMLElement.prototype, 'attachInternals')
+      .mockReturnValue({ setValidity, setFormValue: vi.fn() } as unknown as ElementInternals);
+
+    const el = await fixture('<bds-checkbox name="agree" required checked>Accept</bds-checkbox>') as BdsCheckbox;
+    setValidity.mockClear();
+
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.checked = false;
+    input.dispatchEvent(new Event('change', { bubbles: true }));
+    await el.updateComplete;
+
+    expect(setValidity).toHaveBeenLastCalledWith({ valueMissing: true }, 'Required');
+
+    spy.mockRestore();
+    cleanup(el);
+  });
+
+  it('sets aria-invalid on the input when error attribute is set', async () => {
+    const el = await fixture('<bds-checkbox name="agree" error>Accept</bds-checkbox>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    cleanup(el);
+  });
+
+  it('aria-invalid is false by default', async () => {
+    const el = await fixture('<bds-checkbox name="agree">Accept</bds-checkbox>');
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.getAttribute('aria-invalid')).toBe('false');
+    cleanup(el);
+  });
 });

package/src/web-components/interaction/form/bds-checkbox.ts

@@ -13,6 +13,7 @@ import { LitElement, css, html } from 'lit';
  *   checked  — boolean; whether the checkbox is checked
  *   required — boolean
  *   disabled — boolean
+ *   error    — boolean; puts the checkbox in an error state (border colour + aria-invalid)
  *
  * Slots:
  *   (default) — label text
@@ -27,10 +28,20 @@ export class BdsCheckbox extends LitElement {
   static formAssociated = true;
 
   static styles = css`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: inline-flex;
       align-items: flex-start;
-      gap: var(--bds-space_xs);
+      gap: var(--checkbox_gap, var(--bds-space_m));
       cursor: pointer;
       font-size: var(--bds-font_size--body);
       font-family: var(--bds-font_family--body);
@@ -45,16 +56,18 @@ export class BdsCheckbox extends LitElement {
 
     .input {
       --inputSize: calc(var(--bds-space_s) * 2);
-      margin-block-start: 0.25em;
+      margin-block-start: var(--checkbox_offset, 0.25em);
       inline-size: var(--inputSize);
       block-size: var(--inputSize);
       flex-shrink: 0;
-      --bdc_color: var(--checkbox_border-color, currentcolor);
+      /* --checkbox_border-color is a deprecated alias — prefer --checkbox_color (matches React) */
+      color: var(--checkbox_color, var(--checkbox_border-color, var(--bds-color_on-bg)));
+      --bdc_color: currentcolor;
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--checkbox_shadow, var(--bdc-outline_shadow));
-      border: none;
+      border: var(--checkbox_border, none);
       appearance: none;
       background-color: var(--checkbox_color_bg, var(--bds-color_bg));
       cursor: pointer;
@@ -79,11 +92,19 @@ export class BdsCheckbox extends LitElement {
       transform: rotate(45deg);
     }
 
+    .input:focus {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
     .input:focus-visible {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
     }
 
+    :host([error]) .input {
+      --bdc_color: var(--bdc_color--error);
+    }
+
     label {
       cursor: pointer;
       flex: 1;
@@ -96,6 +117,7 @@ export class BdsCheckbox extends LitElement {
     checked:  { type: Boolean, reflect: true },
     required: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
+    error:    { type: Boolean, reflect: true },
   };
 
   declare name: string;
@@ -103,6 +125,7 @@ export class BdsCheckbox extends LitElement {
   declare checked: boolean;
   declare required: boolean;
   declare disabled: boolean;
+  declare error: boolean;
 
   private _internals!: ElementInternals;
   private readonly _uid = Math.random().toString(36).slice(2, 8);
@@ -115,6 +138,7 @@ export class BdsCheckbox extends LitElement {
     this.checked = false;
     this.required = false;
     this.disabled = false;
+    this.error = false;
   }
 
   updated(changed: Map<string, unknown>) {
@@ -122,7 +146,7 @@ export class BdsCheckbox extends LitElement {
     if (changed.has('checked') || changed.has('value')) {
       this._internals.setFormValue?.(this.checked ? this.value : null);
     }
-    if (changed.has('required')) {
+    if (changed.has('required') || changed.has('checked')) {
       if (this.required && !this.checked) {
         this._internals.setValidity?.({ valueMissing: true }, 'Required');
       } else {
@@ -150,6 +174,7 @@ export class BdsCheckbox extends LitElement {
         .checked=${this.checked}
         ?required=${this.required}
         ?disabled=${this.disabled}
+        aria-invalid=${this.error ? 'true' : 'false'}
         @change=${this._handleChange}
       />
       <label for=${id}><slot></slot></label>

package/src/web-components/interaction/form/bds-combobox.spec.ts

@@ -114,4 +114,83 @@ describe('bds-combobox', () => {
   it('is form-associated', () => {
     expect(BdsCombobox.formAssociated).toBe(true);
   });
+
+  it('associates a visible label with the input via for/id', async () => {
+    const el = await fixture(`<bds-combobox name="country" label="Country" options='${OPTIONS}'></bds-combobox>`);
+    const label = el.shadowRoot!.querySelector<HTMLLabelElement>('label')!;
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(label).not.toBeNull();
+    expect(label.textContent).toBe('Country');
+    expect(label.getAttribute('for')).toBe(input.id);
+    cleanup(el);
+  });
+
+  it('renders no label when the label attribute is unset', async () => {
+    const el = await fixture(`<bds-combobox name="country" options='${OPTIONS}'></bds-combobox>`);
+    expect(el.shadowRoot!.querySelector('label')).toBeNull();
+    cleanup(el);
+  });
+
+  it('sets aria-controls on the input pointing at the listbox id', async () => {
+    const el = await fixture(`<bds-combobox name="country" options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.dispatchEvent(new Event('focus'));
+    await el.updateComplete;
+    const listbox = el.shadowRoot!.querySelector('[role="listbox"]')!;
+    expect(input.getAttribute('aria-controls')).toBe(listbox.id);
+    cleanup(el);
+  });
+
+  it('sets autocomplete="off" on the input', async () => {
+    const el = await fixture(`<bds-combobox name="country" options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    expect(input.getAttribute('autocomplete')).toBe('off');
+    cleanup(el);
+  });
+
+  it('updates aria-activedescendant to the focused option id while navigating', async () => {
+    const el = await fixture(`<bds-combobox name="country" options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.dispatchEvent(new Event('focus'));
+    await el.updateComplete;
+    expect(input.hasAttribute('aria-activedescendant')).toBe(false);
+
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    await el.updateComplete;
+    const options = Array.from(el.shadowRoot!.querySelectorAll('[role="option"]'));
+    const focusedOption = options.find(o => o.className.includes('--focused'))!;
+    expect(focusedOption).not.toBeUndefined();
+    expect(input.getAttribute('aria-activedescendant')).toBe(focusedOption.id);
+    cleanup(el);
+  });
+
+  it('gives the no-results item role="presentation" so it is not exposed as an option', async () => {
+    const el = await fixture(`<bds-combobox name="country" options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    input.value = 'zzz';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+    const noResults = el.shadowRoot!.querySelector('.no-results')!;
+    expect(noResults.getAttribute('role')).toBe('presentation');
+    cleanup(el);
+  });
+
+  it('sets aria-invalid and wires the error message via aria-describedby', async () => {
+    const el = await fixture(`<bds-combobox name="country" error="Required field" options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const error = el.shadowRoot!.querySelector('.message--error')!;
+    expect(input.getAttribute('aria-invalid')).toBe('true');
+    expect(error.getAttribute('role')).toBe('alert');
+    expect(input.getAttribute('aria-describedby')).toBe(error.id);
+    cleanup(el);
+  });
+
+  it('wires the hint message via aria-describedby when there is no error', async () => {
+    const el = await fixture(`<bds-combobox name="country" hint="Pick a country" options='${OPTIONS}'></bds-combobox>`);
+    const input = el.shadowRoot!.querySelector<HTMLInputElement>('input')!;
+    const hint = el.shadowRoot!.querySelector('.message--hint')!;
+    expect(input.getAttribute('aria-invalid')).toBe('false');
+    expect(input.getAttribute('aria-describedby')).toBe(hint.id);
+    cleanup(el);
+  });
 });