23. User Interface, Interaction, and Accessibility

The file owns the viewport. Permanent UI consists of the platform window frame, one compact document bar, one compact tab surface where space permits, and renderer controls that appear only when the active capability requires them. There is no sidebar, dashboard, project tree, ribbon, status-panel stack, promotional content, or persistent metadata region.

The BrandBuilder AppFrame and its environment bridge own the web shell's safe-area, display-cutout, orientation, text-scale, menu, and on-screen-keyboard geometry. Product controls remain within that single shell boundary. Windows browser geometry checks and Android API 24 and API 36 WebView checks exercise the resulting layout without replacing the document-owned viewport.

At 1280 by 800 with drawers closed, document content occupies at least 90 percent of client-area pixels. The combined desktop document and tab bars remain at or below 72 pixels. Icons use 16- or 18-pixel artwork inside minimum 32-pixel desktop targets. Android touch targets meet a 48-density-independent-pixel minimum without enlarging the visible icon.

Desktop tabs expose full accessible names, dirty state, close state, and position. Phone layouts expose active title, tab count, open, information, and overflow actions; the tab sheet supports search only when overflow exists. Renderer controls may collapse into overflow before reducing the document below its minimum area.

Keyboard navigation follows platform conventions and maintains a visible focus indicator. Screen readers receive semantic headings, landmarks, tab roles, progress state, error summaries, metadata groups, page counts, and renderer command names. Dynamic updates use restrained live regions and never announce every keystroke or scroll event.

Mermaid rendered/source mode, fit, zoom, reset, pan, search, stale-preview state, diagnostics, and metadata are exposed through renderer-contextual controls. Generated SVG cannot trap sequential focus. Diagram labels remain searchable, authored accessible titles and descriptions are preserved, and every successful unannotated diagram receives a fallback label and source route.

Color meets WCAG 2.2 AA contrast. The application honors system light/dark theme, high-contrast or forced-colors behavior where available, reduced motion, text scaling, and browser zoom. Motion is limited to state continuity and remains below 200 ms; no essential information depends on animation or color alone.

The initial language is US English. All user-visible strings, dates, units, plurals, and shortcuts use localization-ready resources. File names and metadata values are never translated.