Sonarist project

Sonarist / Design system

Documentation v1.0.0 · Work in progress · UI prototype with separate server foundations

Design system contents

Accessibility

Keyboard, focus and semantics

Preserve native control behavior while documenting incomplete custom-control semantics.

On this page

Control findings

Control findings
FamilyImplementedGap / next check
Buttons/selects/checkboxesNative keyboard interaction and labels in many contextsValidate all phone-only icon names.
DialogshowModal, Escape and close buttonNo title/description association; tall forms can clip header/footer at constrained height.
EmailAddressFieldArrow keys, Enter, Escape and listboxNo aria-activedescendant; active index is visual.
MultiEmailAddressFieldEnter first option, Backspace last chip, EscapeNo arrow navigation; options do not express active choice.
Queue/subnavNative disclosure and linksNo roving menu model; Escape return focus absent.
Conversation filterEscape restores summary focusMobile summary hides Filter text without accessible name.
Participant/merge selectionButtons with visible checksNo aria-pressed/radio semantics.
Composer shortcutVisible ⌘ + Enter hintNo matching keydown handler.

Release verification

  • Tab through header, open menu and selection without pointer use.
  • Open/close each dialog from its actual entry point and inspect return focus.
  • Ensure popup focus is not hidden behind stacked messages or internal scrollers.
  • Test recipient choice with a screen reader, including selected and active options.
  • Verify a short viewport and 200% zoom retain all essential controls.

Source references

Source references
FileResponsibility
components/ui/dialog.tsxModal behavior
components/ui/email-address-field.tsxCombobox handlers
components/ui/multi-email-address-field.tsxRecipient keys
components/inbox/thread-participants.tsxSelection controls

Examples from the app

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.

Email · Component detail · Light · Desktop · 1792 × 832 px
Email · Component detail · Light · Desktop · Results · 988 × 278 px
Email · Component detail · Light · Desktop · Selected · 1792 × 832 px
Recipients · Component detail · Light · Desktop · 1792 × 832 px
Recipients · Component detail · Light · Desktop · Results · 988 × 266 px
Recipients · Component detail · Light · Desktop · Selected · 1792 × 832 px
Participant Editor · Component detail · Light · Desktop · Add · 1152 × 840 px

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