angular-shared-ui-kit

Standard IDs

ID	Severity	What it checks
SUI-001	P1	Modal/dialog opened via raw MatDialog/CDK Overlay reimplemented per feature instead of a shared DialogService
SUI-002	P2	Toast/snackbar calls are ad-hoc per feature with inconsistent styling and no queuing/dedup policy
SUI-003	P1	Destructive action (delete/cancel/discard) has no shared confirmation-dialog component gating it
SUI-004	P1	Dialog/toast component has no accessibility contract — no focus trap on open, no aria-live announcement

---

Check A — Dialogs reimplemented per feature (SUI-001)

Detection

Grep feature components for direct MatDialog.open(SomeCustomComponent, {...}) calls with bespoke width/panelClass/data-passing conventions repeated across features. Confirm a single shared DialogService in the UI-kit library wraps MatDialog with a consistent API (typed open<TResult>(component, data), consistent width/backdrop/close behavior) so every feature gets the same dialog affordances for free instead of reinventing them.

BAD — every feature configures MatDialog by hand, inconsistently

// orders feature
this.dialog.open(EditOrderComponent, { width: '600px', data: order, disableClose: true });

// invoices feature — different width, different close behavior, same intent
this.dialog.open(EditInvoiceComponent, { width: '50vw', data: invoice });

GOOD — one shared DialogService, consistent defaults, typed result

// libs/shared-ui/src/lib/dialog/dialog.service.ts
@Injectable({ providedIn: 'root' })
export class DialogService {
  private readonly dialog = inject(MatDialog);

  open<TResult, TData = unknown>(component: ComponentType<unknown>, data?: TData): Observable<TResult | undefined> {
    return this.dialog.open(component, {
      width: '600px',
      disableClose: true,
      autoFocus: 'first-tabbable',
      data,
    }).afterClosed();
  }
}

// any feature
this.dialogService.open<Order>(EditOrderComponent, order).subscribe(result => { ... });