Design system contents

Accessibility

Status, validation and announcements

Make local simulation, pending work and real acknowledgement distinguishable.

On this page

Feedback findings

Feedback findings
UICurrent behaviorRequired distinction
AI failurerole=alert messageA draft failed; no message was sent.
Draft savedTimer after 500msLocal fingerprint only, not persistence.
Toast3200ms message in approle=status is present; duration and assistive-technology announcement still need review.
Delivery failurePersistent banner + RetryRetry changes local status only.
Settings saveClose + toastSome callbacks do not mutate records at all.
Email form validationPresence checks / simple regexInvalid/duplicate/suppressed recipients need server validation.

Guidance for implementation

  • Keep failure explanation near the task and preserve draft content.
  • Use aria-live/status for background acknowledgements when appropriate, without announcing every keystroke.
  • Associate field errors with controls using aria-describedby and aria-invalid.
  • Keep a durable history for consequential send, merge and permission changes.
  • Avoid claiming success before provider/server confirmation.

Source references

Source references
FileResponsibility
components/helpdesk-app.tsxTransient toast
components/inbox/composer.tsxDraft/error states
components/views/settings-editors.tsxSave callbacks

Interface examples

Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.

Composer Error · Component detail · Light · Desktop · 1792 × 758 px
Composer Error · Component detail · Light · Desktop · Error · 1792 × 844 px
Failed Thread · Screen · Light · Desktop · 2880 × 2000 px
Toast · Component detail · Light · Desktop · 692 × 96 px

Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0