feat(ui): WebUI modernization PR7 — mobile layout + WCAG accessibility pass#115
Closed
jkyberneees wants to merge 1 commit into
Closed
feat(ui): WebUI modernization PR7 — mobile layout + WCAG accessibility pass#115jkyberneees wants to merge 1 commit into
jkyberneees wants to merge 1 commit into
Conversation
…y pass Accessibility (desktop visuals unchanged): - Landmarks: <header> topbar, <nav aria-label="Sessions"> sidebar, <main> chat column; #messages is now role="log" aria-live="polite" aria-relevant="additions". - Visually-hidden #sr-status live region + announce() helper; announces connection state, system/error messages, approval shown/answered (with risk class), session loaded/renamed/deleted. - Dialog semantics: shortcuts + confirm overlays get role="dialog" aria-modal="true" aria-labelledby; focus moves in on open (data-autofocus), returns on close, Tab cycles within (openDialog/ closeDialog/focus trap in utils.js); Escape closes via the same helper. - Keyboard activation: role="button" tabindex="0" + Enter/Space for .tb-header, .thinking-toggle, .tb-result-more, .collapse-toggle, .es-hints spans, .chip-remove; aria-expanded tracked on disclosure toggles and the hamburger. - :focus-visible ring now covers [tabindex]/[role="button"] (the dead [onclick] selector was removed); shortcuts dialog documents @ completion navigation. Mobile (all inside @media (max-width: 767px), except 100dvh): - #app uses 100dvh with 100vh fallback; grid rows go auto so the topbar can grow to two rows — model picker + custom-model input wrap to a second row inside .top-controls, theme/cancel stay on row one. - Sidebar becomes an over-top drawer (top:0, z-index 30) so the taller topbar never clips it. - ≥40px touch targets via padding/min-size: hamburger, theme, cancel, new-session, session row actions, attach, scroll-bottom, approval action buttons. - Approval card full-width minus margins; toast wraps at 92vw instead of overflowing; completion popup verified full-width of input row.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
odek | c3991d2 | Commit Preview URL Branch Preview URL |
Jul 26 2026, 01:49 PM |
Contributor
Author
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Final PR of the WebUI modernization roadmap — Phase 4: mobile layout + WCAG accessibility pass. Stacked on #114 (
feat/webui-modernization-6). Desktop visuals are unchanged; all layout changes are inside the mobile breakpoint.Accessibility (WCAG 2.2 AA)
<header>topbar,<nav aria-label="Sessions">sidebar,<main>chat column;#messagesis nowrole="log" aria-live="polite".#sr-statuslive region +announce()helper covering connection state, errors, approvals (shown with risk class, plus the decision), session loaded/renamed/deleted.role="dialog" aria-modal="true" aria-labelledby, with focus-in on open, focus-return on close, and a Tab focus trap (openDialog/closeDialoghelpers)..tb-header/.thinking-toggle/.tb-result-more/.collapse-toggle/.es-hints/.chip-removeare nowrole="button" tabindex="0"(witharia-expandedwhere applicable), activated by Enter/Space through the existing#messagesdelegation..sa-detailsdeliberately stays click-only (a button role would make SRs read the whole content region as the label — noted for a future toggle affordance on.sa-top).[tabindex]/[role="button"]; the dead[onclick]:focus-visibleselector is gone.Mobile (≤767px only)
#appuses100dvh(with100vhfallback) — no more mobile-chrome clipping.calc(100% - 16px)); toast wraps at92vwinstead of overflowing.Verification
node --checkall 13 UI JS files ✅;node --test: 26 pass, 0 fail ✅go build,go vet, fullcmd/odeksuite ✅role="log"/role="dialog"present in served HTML; no inline handlers anywhere, so the PR6 CSP (script-src 'self') holds ✅This completes the modernization roadmap: #109 → #110 → #111 → #112 → #113 → #114 → this PR. Merge in stack order.