@origostudio/origo-design 0.0.35 → 0.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@origostudio/origo-design",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "license": "MIT",
   "repository": {
     "type": "git",

package/packages/angular-renderer/CHANGELOG.md

@@ -1,3 +1,24 @@
+## 0.0.37 (2026-09-24)
+
+### 🚀 Features
+
+- implement switch and chip form primitives in angular-renderer ([2067756](https://github.com/OrigoStudio/origo-design/commit/2067756))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
+## 0.0.36 (2026-09-23)
+
+### 🚀 Features
+
+- **angular-renderer:** add primitive UI components and their unit tests ([e2418b1](https://github.com/OrigoStudio/origo-design/commit/e2418b1))
+- implement primitive UI components and accessibility tests for angular-renderer ([c584dad](https://github.com/OrigoStudio/origo-design/commit/c584dad))
+
+### ❤️ Thank You
+
+- Hardik Patel @hardikpatelse
+
 ## 0.0.35 (2026-09-22)
 
 ### 🚀 Features

package/packages/angular-renderer/package.json

@@ -1,13 +1,13 @@
 {
   "name": "angular-renderer",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "private": true,
   "type": "commonjs",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@origo/core": "0.0.35",
-    "@origo/design-tokens": "0.0.35",
+    "@origo/core": "0.0.37",
+    "@origo/design-tokens": "0.0.37",
     "tslib": "^2.3.0",
     "@axe-core/playwright": "^4.13.0",
     "@playwright/test": "^1.36.0"

package/packages/angular-renderer/src/components/primitives/button/button.component.ts

@@ -28,6 +28,7 @@ export interface ButtonProps {
   encapsulation: ViewEncapsulation.ShadowDom,
   host: {
     '[class.origo-button]': 'true',
+    '[attr.data-testid]': 'contract().id ?? ""',
   },
 })
 export class ButtonComponent implements OrigoAdapter<ButtonProps> {
@@ -46,10 +47,18 @@ export class ButtonComponent implements OrigoAdapter<ButtonProps> {
     const type = this.contract().props?.type;
     return type === 'button' || type === 'submit' || type === 'reset' ? type : 'button';
   });
-  computedAriaLabel = computed(() => this.contract().props?.['aria-label'] as string | undefined);
-  computedAriaDescribedBy = computed(
-    () => this.contract().props?.['aria-describedby'] as string | undefined
-  );
+  computedAriaLabel = computed(() => {
+    const label = this.contract().props?.['aria-label'];
+    return label !== undefined && label !== null && String(label).trim() !== ''
+      ? String(label)
+      : undefined;
+  });
+  computedAriaDescribedBy = computed(() => {
+    const desc = this.contract().props?.['aria-describedby'];
+    return desc !== undefined && desc !== null && String(desc).trim() !== ''
+      ? String(desc)
+      : undefined;
+  });
 
   action = output<void>();
 

package/packages/angular-renderer/src/components/primitives/checkbox/checkbox.component.html

@@ -5,6 +5,7 @@
     [disabled]="computedDisabled()"
     [required]="computedRequired()"
     [attr.aria-label]="computedAriaLabel()"
+    [attr.aria-describedby]="computedAriaDescribedBy()"
     (change)="onChange($event)"
     [checked]="checked()"
   />

package/packages/angular-renderer/src/components/primitives/checkbox/checkbox.component.ts

@@ -18,6 +18,7 @@ export interface CheckboxProps {
   label?: string;
   disabled?: boolean;
   'aria-label'?: string;
+  'aria-describedby'?: string;
   required?: boolean;
 }
 
@@ -30,7 +31,7 @@ export interface CheckboxProps {
   encapsulation: ViewEncapsulation.ShadowDom,
   host: {
     '[class.origo-checkbox]': 'true',
-    '[attr.data-testid]': 'contract().id',
+    '[attr.data-testid]': 'contract().id ?? ""',
   },
 })
 export class CheckboxComponent implements OrigoAdapter<CheckboxProps> {
@@ -50,7 +51,15 @@ export class CheckboxComponent implements OrigoAdapter<CheckboxProps> {
   computedRequired = computed(() => !!this.contract().props?.required);
   computedAriaLabel = computed(() => {
     const label = this.contract().props?.['aria-label'];
-    return label !== undefined && label !== null ? String(label) : undefined;
+    return label !== undefined && label !== null && String(label).trim() !== ''
+      ? String(label)
+      : undefined;
+  });
+  computedAriaDescribedBy = computed(() => {
+    const desc = this.contract().props?.['aria-describedby'];
+    return desc !== undefined && desc !== null && String(desc).trim() !== ''
+      ? String(desc)
+      : undefined;
   });
 
   private experienceAdapter = inject(WebExperienceAdapterService);

package/packages/angular-renderer/src/components/primitives/chip/chip.component.html

@@ -0,0 +1,12 @@
+<button
+  type="button"
+  [id]="contract().id"
+  [disabled]="computedDisabled()"
+  [class.origo-chip--selected]="selected()"
+  [attr.aria-pressed]="selected().toString()"
+  [attr.aria-label]="computedAriaLabel() ?? undefined"
+  [attr.aria-describedby]="computedAriaDescribedBy() ?? undefined"
+  (click)="onClick()"
+>
+  <span class="chip-label">{{ computedLabel() }}</span>
+</button>

package/packages/angular-renderer/src/components/primitives/chip/chip.component.scss

@@ -0,0 +1,40 @@
+:host {
+  display: inline-block;
+}
+
+button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding-inline: var(--origo-spacing-container-padding, 12px);
+  padding-block: var(--origo-spacing-container-padding-block, 6px);
+  border-radius: var(--origo-radius-chip, 16px);
+  border: var(--origo-border-width, 1px) solid var(--origo-color-border, #cccccc);
+  background-color: var(--origo-color-surface-variant, #f5f5f5);
+  color: var(--origo-color-text-primary, #333333);
+  font-family: var(--origo-typography-button-font-family, inherit);
+  font-size: var(--origo-typography-button-font-size, 0.875rem);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+
+  &:hover:not(:disabled) {
+    background-color: var(--origo-color-surface-variant-hover, #ebebeb);
+  }
+
+  &.origo-chip--selected {
+    background-color: var(--origo-color-accent, #005fcc);
+    color: var(--origo-color-on-accent, #ffffff);
+    border-color: var(--origo-color-accent, #005fcc);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--origo-color-focus, #005fcc);
+    outline-offset: 2px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: var(--origo-opacity-disabled, 0.5);
+  }
+}

package/packages/angular-renderer/src/components/primitives/chip/chip.component.ts

@@ -0,0 +1,85 @@
+import {
+  Component,
+  input,
+  model,
+  computed,
+  ChangeDetectionStrategy,
+  ViewEncapsulation,
+  inject,
+  effect,
+  untracked,
+} from '@angular/core';
+import { InteractionContract } from '@origo/core';
+import { OrigoAdapter, coerceContractProps } from '../../../adapters/web/adapter';
+import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
+
+export interface ChipProps {
+  selected?: boolean;
+  label?: string;
+  disabled?: boolean;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+@Component({
+  selector: 'origo-chip',
+  standalone: true,
+  templateUrl: './chip.component.html',
+  styleUrls: ['./chip.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.ShadowDom,
+  host: {
+    '[class.origo-chip]': 'true',
+    '[attr.data-testid]': 'contract().id ?? ""',
+  },
+})
+export class ChipComponent implements OrigoAdapter<ChipProps> {
+  static readonly contractSchema: Record<
+    string,
+    'string' | 'number' | 'boolean' | 'object' | 'array'
+  > = {
+    selected: 'boolean',
+    label: 'string',
+    disabled: 'boolean',
+  };
+  static readonly strictContract = false;
+
+  contract = input.required<InteractionContract<ChipProps>>();
+  selected = model<boolean>(false);
+
+  computedLabel = computed(() => this.contract().props?.label ?? '');
+  computedDisabled = computed(() => !!this.contract().props?.disabled);
+  computedAriaLabel = computed(() => {
+    const v = this.contract().props?.['aria-label'];
+    return v !== undefined && v !== null && String(v).trim() !== '' ? String(v) : undefined;
+  });
+  computedAriaDescribedBy = computed(() => {
+    const v = this.contract().props?.['aria-describedby'];
+    return v !== undefined && v !== null && String(v).trim() !== '' ? String(v) : undefined;
+  });
+
+  private experienceAdapter = inject(WebExperienceAdapterService);
+
+  constructor() {
+    effect(() => {
+      const props = this.contract().props;
+      const coerced = props
+        ? coerceContractProps<Record<string, any>>(props, ChipComponent.contractSchema)
+        : {};
+      const contractVal =
+        coerced['selected'] !== undefined ? !!coerced['selected'] : this.selected();
+      untracked(() => {
+        if (contractVal === this.selected()) return;
+        this.selected.set(contractVal);
+      });
+    });
+  }
+
+  onClick() {
+    if (this.computedDisabled() || !this.contract().id) return;
+
+    const nextSelected = !this.selected();
+    this.selected.set(nextSelected);
+    this.experienceAdapter.updateState(this.contract().id, 'selected', nextSelected);
+  }
+}

package/packages/angular-renderer/src/components/primitives/form-field/form-field.component.ts

@@ -16,6 +16,8 @@ export interface FormFieldProps {
   error?: string;
   hint?: string;
   required?: boolean;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
 }
 
 @Component({
@@ -29,7 +31,10 @@ export interface FormFieldProps {
   host: {
     '[class.origo-form-field]': 'true',
     '[class.has-error]': '!!computedError()',
-    '[attr.data-testid]': 'contract().id',
+    '[attr.data-testid]': 'contract().id ?? ""',
+    '[attr.role]': 'computedAriaLabel() ? "group" : null',
+    '[attr.aria-label]': 'computedAriaLabel()',
+    '[attr.aria-describedby]': 'computedAriaDescribedBy()',
   },
 })
 export class FormFieldComponent implements OrigoAdapter<FormFieldProps>, ContainerComponent {
@@ -49,6 +54,18 @@ export class FormFieldComponent implements OrigoAdapter<FormFieldProps>, Contain
   computedError = computed(() => this.contract().props?.error);
   computedHint = computed(() => this.contract().props?.hint);
   computedRequired = computed(() => !!this.contract().props?.required);
+  computedAriaLabel = computed(() => {
+    const label = this.contract().props?.['aria-label'];
+    return label !== undefined && label !== null && String(label).trim() !== ''
+      ? String(label)
+      : undefined;
+  });
+  computedAriaDescribedBy = computed(() => {
+    const desc = this.contract().props?.['aria-describedby'];
+    return desc !== undefined && desc !== null && String(desc).trim() !== ''
+      ? String(desc)
+      : undefined;
+  });
 
   labelContract = computed<InteractionContract<LabelProps>>(() => {
     const parentId = this.contract().id;

package/packages/angular-renderer/src/components/primitives/hbox/hbox.component.ts

@@ -14,6 +14,8 @@ export interface HBoxProps {
   gap?: number | string;
   alignment?: 'start' | 'center' | 'end' | 'stretch';
   padding?: number | string;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
 }
 
 @Component({
@@ -25,11 +27,13 @@ export interface HBoxProps {
   encapsulation: ViewEncapsulation.ShadowDom,
   host: {
     '[class.origo-hbox]': 'true',
-    '[attr.data-testid]': 'contract().id',
+    '[attr.data-testid]': 'contract().id ?? ""',
     '[style.gap]': 'computedGap()',
     '[style.align-items]': 'computedAlignment()',
     '[style.padding-inline]': 'computedPadding()',
     '[style.padding-block]': 'computedPadding()',
+    '[attr.aria-label]': 'computedAriaLabel()',
+    '[attr.aria-describedby]': 'computedAriaDescribedBy()',
   },
 })
 export class HBoxComponent implements OrigoAdapter<HBoxProps>, ContainerComponent {
@@ -73,4 +77,17 @@ export class HBoxComponent implements OrigoAdapter<HBoxProps>, ContainerComponen
     const num = Number(padding);
     return !isNaN(num) ? `${num}px` : String(padding);
   });
+
+  computedAriaLabel = computed(() => {
+    const label = this.contract().props?.['aria-label'];
+    return label !== undefined && label !== null && String(label).trim() !== ''
+      ? String(label)
+      : undefined;
+  });
+  computedAriaDescribedBy = computed(() => {
+    const desc = this.contract().props?.['aria-describedby'];
+    return desc !== undefined && desc !== null && String(desc).trim() !== ''
+      ? String(desc)
+      : undefined;
+  });
 }

package/packages/angular-renderer/src/components/primitives/label/label.component.html

@@ -1,4 +1,8 @@
-<label [attr.for]="computedFor()" [attr.aria-label]="computedAriaLabel()">
+<label
+  [attr.for]="computedFor()"
+  [attr.aria-label]="computedAriaLabel()"
+  [attr.aria-describedby]="computedAriaDescribedBy()"
+>
   {{ computedText() }}
   @if (computedRequired()) {
     <span class="required-indicator" aria-hidden="true">*</span>

package/packages/angular-renderer/src/components/primitives/label/label.component.ts

@@ -13,6 +13,7 @@ export interface LabelProps {
   for?: string;
   required?: boolean;
   'aria-label'?: string;
+  'aria-describedby'?: string;
 }
 
 @Component({
@@ -24,7 +25,7 @@ export interface LabelProps {
   encapsulation: ViewEncapsulation.ShadowDom,
   host: {
     '[class.origo-label]': 'true',
-    '[attr.data-testid]': 'contract().id',
+    '[attr.data-testid]': 'contract().id ?? ""',
   },
 })
 export class LabelComponent implements OrigoAdapter<LabelProps> {
@@ -45,6 +46,14 @@ export class LabelComponent implements OrigoAdapter<LabelProps> {
   computedRequired = computed(() => !!this.contract().props?.required);
   computedAriaLabel = computed(() => {
     const label = this.contract().props?.['aria-label'];
-    return label !== undefined && label !== null ? String(label) : undefined;
+    return label !== undefined && label !== null && String(label).trim() !== ''
+      ? String(label)
+      : undefined;
+  });
+  computedAriaDescribedBy = computed(() => {
+    const desc = this.contract().props?.['aria-describedby'];
+    return desc !== undefined && desc !== null && String(desc).trim() !== ''
+      ? String(desc)
+      : undefined;
   });
 }

package/packages/angular-renderer/src/components/primitives/primitives.a11y.pw.ts

@@ -13,7 +13,7 @@ test.describe('Primitives Accessibility', () => {
         <script>
           const host = document.getElementById('host');
           const shadow = host.attachShadow({mode: 'open'});
-          shadow.innerHTML = '<button class="origo-button" aria-label="Accessible Button">Click Me</button>';
+          shadow.innerHTML = '<button class="origo-button" aria-label="Accessible Button">Click Me</button><button class="origo-button" aria-label="Disabled Button" disabled>Disabled</button>';
         </script>
       </main>
     `);
@@ -31,7 +31,7 @@ test.describe('Primitives Accessibility', () => {
         <script>
           const host = document.getElementById('host');
           const shadow = host.attachShadow({mode: 'open'});
-          shadow.innerHTML = '<label for="test-input">Test Input</label><input id="test-input" type="text" class="origo-text-input" placeholder="Enter text" />';
+          shadow.innerHTML = '<label for="test-input">Test Input</label><input id="test-input" type="text" class="origo-text-input" placeholder="Enter text" /><label for="test-input-disabled">Test Input Disabled</label><input id="test-input-disabled" type="text" class="origo-text-input" placeholder="Disabled text" disabled />';
         </script>
       </main>
     `);
@@ -49,7 +49,7 @@ test.describe('Primitives Accessibility', () => {
         <script>
           const host = document.getElementById('host');
           const shadow = host.attachShadow({mode: 'open'});
-          shadow.innerHTML = '<label for="test-select">Test Select</label><select id="test-select" class="origo-select"><option value="1">One</option></select>';
+          shadow.innerHTML = '<label for="test-select">Test Select</label><select id="test-select" class="origo-select"><option value="1">One</option></select><label for="test-select-disabled">Test Select Disabled</label><select id="test-select-disabled" class="origo-select" disabled><option value="1">One</option></select>';
         </script>
       </main>
     `);
@@ -66,7 +66,7 @@ test.describe('Primitives Accessibility', () => {
         <script>
           const host = document.getElementById('host');
           const shadow = host.attachShadow({mode: 'open'});
-          shadow.innerHTML = '<input type="checkbox" id="test-check" class="origo-checkbox" /><label for="test-check">Test Checkbox</label>';
+          shadow.innerHTML = '<input type="checkbox" id="test-check" class="origo-checkbox" /><label for="test-check">Test Checkbox</label><input type="checkbox" id="test-check-disabled" class="origo-checkbox" disabled /><label for="test-check-disabled">Disabled Checkbox</label>';
         </script>
       </main>
     `);
@@ -83,7 +83,7 @@ test.describe('Primitives Accessibility', () => {
         <script>
           const host = document.getElementById('host');
           const shadow = host.attachShadow({mode: 'open'});
-          shadow.innerHTML = '<fieldset class="origo-radio-group"><legend>Radio Group</legend><input type="radio" id="radio-1" name="rg" value="1" /><label for="radio-1">One</label></fieldset>';
+          shadow.innerHTML = '<fieldset class="origo-radio-group"><legend>Radio Group</legend><input type="radio" id="radio-1" name="rg" value="1" /><label for="radio-1">One</label></fieldset><fieldset class="origo-radio-group" disabled><legend>Disabled Radio Group</legend><input type="radio" id="radio-2" name="rg2" value="2" disabled /><label for="radio-2">Two</label></fieldset>';
         </script>
       </main>
     `);
@@ -100,7 +100,7 @@ test.describe('Primitives Accessibility', () => {
         <script>
           const host = document.getElementById('host');
           const shadow = host.attachShadow({mode: 'open'});
-          shadow.innerHTML = '<label for="test-textarea">Test Textarea</label><textarea id="test-textarea" class="origo-textarea"></textarea>';
+          shadow.innerHTML = '<label for="test-textarea">Test Textarea</label><textarea id="test-textarea" class="origo-textarea"></textarea><label for="test-textarea-disabled">Disabled Textarea</label><textarea id="test-textarea-disabled" class="origo-textarea" disabled></textarea>';
         </script>
       </main>
     `);
@@ -260,4 +260,123 @@ test.describe('Primitives Accessibility', () => {
     const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
     expect(accessibilityScanResults.violations).toEqual([]);
   });
+  test('VBox should not have any automatically detectable accessibility issues', async ({
+    page,
+  }) => {
+    await page.setContent(`
+      <main>
+        <div id="host"></div>
+        <script>
+          const host = document.getElementById('host');
+          const shadow = host.attachShadow({mode: 'open'});
+          shadow.innerHTML = '<div class="origo-vbox" style="display: flex; flex-direction: column; gap: 10px;"><div>Item 1</div></div>';
+        </script>
+      </main>
+    `);
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+  // Story 9.5 — Switch primitive
+  test('Switch should not have any automatically detectable accessibility issues (default)', async ({
+    page,
+  }) => {
+    await page.setContent(`
+      <main>
+        <div id="host"></div>
+        <script>
+          const host = document.getElementById('host');
+          const shadow = host.attachShadow({mode: 'open'});
+          shadow.innerHTML = '<label><input type="checkbox" role="switch" aria-checked="false" /> Notifications</label>';
+        </script>
+      </main>
+    `);
+    const accessibilityScanResults = await new AxeBuilder({ page }).include('#host').analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test('Switch should not have any automatically detectable accessibility issues (checked)', async ({
+    page,
+  }) => {
+    await page.setContent(`
+      <main>
+        <div id="host"></div>
+        <script>
+          const host = document.getElementById('host');
+          const shadow = host.attachShadow({mode: 'open'});
+          shadow.innerHTML = '<label><input type="checkbox" role="switch" aria-checked="true" checked /> Notifications</label>';
+        </script>
+      </main>
+    `);
+    const accessibilityScanResults = await new AxeBuilder({ page }).include('#host').analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test('Switch should not have any automatically detectable accessibility issues (disabled)', async ({
+    page,
+  }) => {
+    await page.setContent(`
+      <main>
+        <div id="host"></div>
+        <script>
+          const host = document.getElementById('host');
+          const shadow = host.attachShadow({mode: 'open'});
+          shadow.innerHTML = '<label><input type="checkbox" role="switch" aria-checked="false" disabled /> Notifications</label>';
+        </script>
+      </main>
+    `);
+    const accessibilityScanResults = await new AxeBuilder({ page }).include('#host').analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  // Story 9.5 — Chip primitive
+  test('Chip should not have any automatically detectable accessibility issues (default)', async ({
+    page,
+  }) => {
+    await page.setContent(`
+      <main>
+        <div id="host"></div>
+        <script>
+          const host = document.getElementById('host');
+          const shadow = host.attachShadow({mode: 'open'});
+          shadow.innerHTML = '<button type="button" class="origo-chip" aria-pressed="false">Angular</button>';
+        </script>
+      </main>
+    `);
+    const accessibilityScanResults = await new AxeBuilder({ page }).include('#host').analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test('Chip should not have any automatically detectable accessibility issues (selected)', async ({
+    page,
+  }) => {
+    await page.setContent(`
+      <main>
+        <div id="host"></div>
+        <script>
+          const host = document.getElementById('host');
+          const shadow = host.attachShadow({mode: 'open'});
+          shadow.innerHTML = '<button type="button" class="origo-chip origo-chip--selected" aria-pressed="true">Angular</button>';
+        </script>
+      </main>
+    `);
+    const accessibilityScanResults = await new AxeBuilder({ page }).include('#host').analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test('Chip should not have any automatically detectable accessibility issues (disabled)', async ({
+    page,
+  }) => {
+    await page.setContent(`
+      <main>
+        <div id="host"></div>
+        <script>
+          const host = document.getElementById('host');
+          const shadow = host.attachShadow({mode: 'open'});
+          shadow.innerHTML = '<button type="button" class="origo-chip" aria-pressed="false" disabled>Angular</button>';
+        </script>
+      </main>
+    `);
+    const accessibilityScanResults = await new AxeBuilder({ page }).include('#host').analyze();
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
 });

package/packages/angular-renderer/src/components/primitives/radio-group/radio-group.component.html

@@ -1,4 +1,4 @@
-<fieldset [disabled]="computedDisabled()" [attr.aria-label]="computedAriaLabel()">
+<fieldset [disabled]="computedDisabled()" [attr.aria-describedby]="computedAriaDescribedBy()">
   <legend class="visually-hidden">{{ computedAriaLabel() ?? 'Radio Group' }}</legend>
 
   <div class="radio-options">

package/packages/angular-renderer/src/components/primitives/radio-group/radio-group.component.ts

@@ -8,9 +8,7 @@ import {
   inject,
   effect,
   untracked,
-  SecurityContext,
 } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
 import { InteractionContract } from '@origo/core';
 import { OrigoAdapter } from '../../../adapters/web/adapter';
 import { WebExperienceAdapterService } from '../../../adapters/web/experience-adapter.service';
@@ -20,6 +18,7 @@ export interface RadioGroupProps {
   value?: string;
   disabled?: boolean;
   'aria-label'?: string;
+  'aria-describedby'?: string;
   required?: boolean;
 }
 
@@ -32,7 +31,7 @@ export interface RadioGroupProps {
   encapsulation: ViewEncapsulation.ShadowDom,
   host: {
     '[class.origo-radio-group]': 'true',
-    '[attr.data-testid]': 'contract().id',
+    '[attr.data-testid]': 'contract().id ?? ""',
   },
 })
 export class RadioGroupComponent implements OrigoAdapter<RadioGroupProps> {
@@ -55,11 +54,18 @@ export class RadioGroupComponent implements OrigoAdapter<RadioGroupProps> {
   computedRequired = computed(() => !!this.contract().props?.required);
   computedAriaLabel = computed(() => {
     const label = this.contract().props?.['aria-label'];
-    return label !== undefined && label !== null ? String(label) : undefined;
+    return label !== undefined && label !== null && String(label).trim() !== ''
+      ? String(label)
+      : undefined;
+  });
+  computedAriaDescribedBy = computed(() => {
+    const desc = this.contract().props?.['aria-describedby'];
+    return desc !== undefined && desc !== null && String(desc).trim() !== ''
+      ? String(desc)
+      : undefined;
   });
 
   private experienceAdapter = inject(WebExperienceAdapterService);
-  private sanitizer = inject(DomSanitizer);
 
   constructor() {
     effect(() => {
@@ -78,8 +84,7 @@ export class RadioGroupComponent implements OrigoAdapter<RadioGroupProps> {
     if (!target || !target.checked || this.computedDisabled()) return;
 
     const rawValue = target.value;
-    const sanitizedValue =
-      this.sanitizer.sanitize(SecurityContext.HTML, rawValue) || rawValue || '';
+    const sanitizedValue = String(rawValue);
 
     this.value.set(sanitizedValue);
     this.experienceAdapter.updateState(this.contract().id, 'value', sanitizedValue);

package/packages/angular-renderer/src/components/primitives/switch/switch.component.html

@@ -0,0 +1,16 @@
+<label [for]="contract().id" [class.disabled]="computedDisabled()">
+  <input
+    type="checkbox"
+    role="switch"
+    [id]="contract().id"
+    [checked]="checked()"
+    [disabled]="computedDisabled()"
+    [attr.aria-checked]="checked().toString()"
+    [attr.aria-label]="computedAriaLabel() ?? undefined"
+    [attr.aria-describedby]="computedAriaDescribedBy() ?? undefined"
+    (change)="onChange($event)"
+  />
+  @if (computedLabel()) {
+    <span class="label-text">{{ computedLabel() }}</span>
+  }
+</label>