Build an accessible rating control for Angular reactive forms

Implement a standalone 1-to-5 rating control that works with Angular reactive forms through ControlValueAccessor. Programmatic form values must update the UI; user interaction must update the form; blur must mark it touched; disabled state must block changes. Use native buttons, an accessible group label, and arrow-key navigation without emitting duplicate changes.

form.setValue(3) -> stars 1..3 appear selected
click star 5     -> form value becomes 5
ArrowLeft on 5   -> value becomes 4
form.disable()   -> controls disabled and no value changes

• Support values 1 through 5 and null for no rating.
• Implement all ControlValueAccessor callbacks including disabled state.
• Call the change callback only for user-originated changes.
• Call the touched callback on blur, not on every model write.
• Use button semantics and an accessible group name.

1. Store the displayed value and disabled state as local signals.
2. Implement model-to-view writeValue without notifying the form.
3. Store the registered change and touched callbacks.
4. Route click and arrow-key interaction through one guarded user-update method.
5. Test programmatic value, click, keyboard, blur, disabled state, and invalid input normalization.

import {Component, forwardRef, signal} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

@Component({
  selector: 'app-rating',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => RatingControl),
    multi: true,
  }],
  template: `
    <div role="group" aria-label="Rating from one to five">
      @for (star of stars; track star) {
        <button type="button"
          [disabled]="disabled()"
          [attr.aria-pressed]="(value() ?? 0) >= star"
          [attr.aria-label]="star + ' stars'"
          (click)="choose(star)"
          (keydown.ArrowLeft)="move(-1, $event)"
          (keydown.ArrowRight)="move(1, $event)"
          (blur)="onTouched()">★</button>
      }
    </div>
  `,
})
export class RatingControl implements ControlValueAccessor {
  readonly stars = [1, 2, 3, 4, 5];
  readonly value = signal<number | null>(null);
  readonly disabled = signal(false);
  private onChange: (value: number | null) => void = () => {};
  onTouched: () => void = () => {};

  writeValue(value: number | null): void {
    this.value.set(value != null && value >= 1 && value <= 5 ? value : null);
  }
  registerOnChange(fn: (value: number | null) => void): void { this.onChange = fn; }
  registerOnTouched(fn: () => void): void { this.onTouched = fn; }
  setDisabledState(value: boolean): void { this.disabled.set(value); }

  choose(value: number): void {
    if (this.disabled()) return;
    this.value.set(value);
    this.onChange(value);
  }
  move(delta: number, event: Event): void {
    if (this.disabled()) return;
    event.preventDefault();
    const next = Math.max(1, Math.min(5, (this.value() ?? 1) + delta));
    this.choose(next);
  }
}

Interaction and updates are O(1); the fixed five-button view has constant rendering cost.

• An unknown external value is normalized to no rating instead of leaving inconsistent UI.
• Arrow keys clamp at the first and fifth value.
• Programmatic writes do not mark the control dirty or emit back to the parent.
• A production version may use a radiogroup pattern if single-selection semantics better fit the design system.

• Call writeValue and verify the registered change callback was not invoked.
• Disable through the parent form and verify click and keys cannot change the value.
• Blur a button and verify the form becomes touched.
• Verify every button has an accessible name and observable selected state.

• Calling onChange inside writeValue creates a feedback loop.
• Ignoring setDisabledState leaves the view interactive while the form is disabled.
• Using clickable spans loses native keyboard and disabled behavior.
• Marking touched on every write confuses validation timing.