feat(web): responsive design, accessibility, and UI polish (ATB-32) (#49)

WIP! A BB-style forum, on the ATmosphere! We're still working... we'll be back soon when we have something to show off!

node typescript hono htmx atproto

* docs: add design doc for responsive, accessibility, and UI polish (ATB-32)

Covers CSS completion for ~20 unstyled classes, mobile-first responsive
breakpoints, WCAG AA accessibility baseline, error/loading/empty state
audit, and visual polish. Deferred axe-core testing to ATB-34.

* docs: add implementation plan for responsive/a11y/polish (ATB-32)

16-task plan covering CSS completion, responsive breakpoints, accessibility
(skip link, ARIA, semantic HTML), 404 page, and visual polish. TDD for
JSX changes, CSS-only for styling tasks.

* style(web): add CSS for forms, login form, char counter, and success banner (ATB-32)

* style(web): add CSS for post cards, breadcrumbs, topic rows, and locked banner (ATB-32)

* style(web): enhance error, empty, and loading state CSS with error page styles (ATB-32)

* style(web): add mobile-first responsive breakpoints with token overrides (ATB-32)

* feat(web): add skip link, favicon, focus styles, and mobile hamburger nav (ATB-32)

- Add skip-to-content link as first body element with off-screen positioning
- Add main landmark id="main-content" for skip link target
- Add :focus-visible outline styles for keyboard navigation
- Create SVG favicon with atBB branding
- Extract NavContent helper component for DRY desktop/mobile nav
- Add CSS-only hamburger menu using details/summary for mobile
- Add desktop-nav / mobile-nav with responsive show/hide
- Add tests for all new accessibility and mobile nav features

* feat(web): add ARIA attributes to forms, dialog, and live regions (ATB-32)

* feat(web): convert breadcrumbs to nav/ol, post cards to article elements (ATB-32)

* feat(web): add 404 page with neobrutal styling and catch-all route (ATB-32)

* style(web): add smooth transitions and hover polish to interactive elements (ATB-32)

* docs: mark Phase 4 complete and update ATB-32 design status

All Phase 4 web UI items now tracked with completion notes:
- Compose (ATB-30), Login (ATB-30), Admin panel (ATB-24)
- Responsive design (ATB-32) — final done gate for Phase 4
- Category view deferred (boards hierarchy replaced it)

* fix(web): address code review feedback on ATB-32 PR

- Add production-path tests for 404 page (auth, unauth, AppView down)
- Replace aria-live on reply-list with sr-only status element using
hx-swap-oob to announce reply count instead of full card content
- Re-throw programming errors in getSession/getSessionWithPermissions
catch blocks (import isProgrammingError from errors.ts)
- Differentiate nav aria-labels (Main navigation vs Mobile navigation)
- Harden test assertions: skip link position check, nav aria-label
coverage, exact count assertions for duplication detection

authored by

Malpercio and committed by

GitHub 1 month ago 939b361e 5ae38d77

+2579 -81

17 changed files

expand all

apps

web

public

static

css

theme.css

favicon.svg

src

layouts

__tests__

base.test.tsx

base.tsx

lib

__tests__

session.test.ts

session.ts

routes

__tests__

not-found.test.tsx

boards.tsx

index.ts

new-topic.tsx

not-found.tsx

topics.tsx

styles

presets

neobrutal-light.ts

docs

atproto-forum-plan.md

plans

2026-02-20-responsive-a11y-polish-design.md

2026-02-20-responsive-a11y-polish-plan.md

+591 -2

apps/web/public/static/css/theme.css

··· 26 26 a { 27 27 color: var(--color-primary); 28 28 text-decoration: underline; 29 + transition: color 0.15s ease; 29 30 } 30 31 31 32 a:hover { ··· 56 57 background: none; 57 58 } 58 59 60 + /* ─── Skip Link ────────────────────────────────────────────────────────── */ 61 + 62 + .skip-link { 63 + position: absolute; 64 + left: -9999px; 65 + top: auto; 66 + width: 1px; 67 + height: 1px; 68 + overflow: hidden; 69 + z-index: 1000; 70 + } 71 + 72 + .skip-link:focus { 73 + position: fixed; 74 + top: var(--space-sm); 75 + left: var(--space-sm); 76 + width: auto; 77 + height: auto; 78 + padding: var(--space-sm) var(--space-md); 79 + background-color: var(--color-primary); 80 + color: var(--color-surface); 81 + font-weight: var(--font-weight-bold); 82 + border: var(--border-width) solid var(--color-border); 83 + box-shadow: var(--button-shadow); 84 + text-decoration: none; 85 + z-index: 1000; 86 + } 87 + 88 + /* ─── Screen Reader Only ───────────────────────────────────────────────── */ 89 + 90 + .sr-only { 91 + position: absolute; 92 + width: 1px; 93 + height: 1px; 94 + padding: 0; 95 + margin: -1px; 96 + overflow: hidden; 97 + clip: rect(0, 0, 0, 0); 98 + white-space: nowrap; 99 + border: 0; 100 + } 101 + 102 + /* ─── Focus Styles ─────────────────────────────────────────────────────── */ 103 + 104 + :focus-visible { 105 + outline: 3px solid var(--color-primary); 106 + outline-offset: 2px; 107 + } 108 + 109 + :focus:not(:focus-visible) { 110 + outline: none; 111 + } 112 + 59 113 /* ─── Layout ────────────────────────────────────────────────────────────── */ 60 114 61 115 .site-header { ··· 82 136 font-size: var(--font-size-lg); 83 137 color: var(--color-text); 84 138 text-decoration: none; 139 + transition: color 0.15s ease; 85 140 } 86 141 87 142 .site-header__title:hover { ··· 94 149 gap: var(--space-md); 95 150 } 96 151 152 + .site-header__handle { 153 + font-weight: var(--font-weight-bold); 154 + font-size: var(--font-size-sm); 155 + } 156 + 157 + .site-header__logout-form { 158 + display: inline; 159 + } 160 + 161 + .site-header__logout-btn { 162 + cursor: pointer; 163 + background: none; 164 + border: none; 165 + color: var(--color-text-muted); 166 + font-family: var(--font-body); 167 + font-size: var(--font-size-sm); 168 + padding: var(--space-xs) var(--space-sm); 169 + text-decoration: underline; 170 + transition: color 0.15s ease; 171 + } 172 + 173 + .site-header__logout-btn:hover { 174 + color: var(--color-danger); 175 + } 176 + 177 + .site-header__login-link { 178 + font-weight: var(--font-weight-bold); 179 + } 180 + 97 181 .content-container { 98 182 max-width: var(--content-width); 99 183 margin: 0 auto; ··· 108 192 border-top: var(--border-width) solid var(--color-border); 109 193 } 110 194 195 + /* ─── Mobile Navigation ────────────────────────────────────────────────── */ 196 + 197 + .mobile-nav { 198 + display: block; 199 + position: relative; 200 + } 201 + 202 + .mobile-nav__toggle { 203 + cursor: pointer; 204 + font-size: var(--font-size-lg); 205 + list-style: none; 206 + padding: var(--space-xs) var(--space-sm); 207 + min-width: 44px; 208 + min-height: 44px; 209 + display: flex; 210 + align-items: center; 211 + justify-content: center; 212 + background: none; 213 + border: none; 214 + } 215 + 216 + .mobile-nav__toggle::-webkit-details-marker { 217 + display: none; 218 + } 219 + 220 + .mobile-nav__menu { 221 + position: absolute; 222 + right: 0; 223 + top: 100%; 224 + background-color: var(--color-surface); 225 + border: var(--border-width) solid var(--color-border); 226 + box-shadow: var(--card-shadow); 227 + padding: var(--space-md); 228 + min-width: 200px; 229 + z-index: 100; 230 + display: flex; 231 + flex-direction: column; 232 + gap: var(--space-sm); 233 + } 234 + 235 + .desktop-nav { 236 + display: none; 237 + align-items: center; 238 + gap: var(--space-md); 239 + } 240 + 111 241 /* ─── Card ──────────────────────────────────────────────────────────────── */ 112 242 113 243 .card { ··· 116 246 border-radius: var(--card-radius); 117 247 box-shadow: var(--card-shadow); 118 248 padding: var(--space-md); 249 + transition: transform 0.15s ease, box-shadow 0.15s ease; 119 250 } 120 251 121 252 /* ─── Button ────────────────────────────────────────────────────────────── */ ··· 193 324 .error-display { 194 325 background-color: var(--color-surface); 195 326 border: var(--border-width) solid var(--color-danger); 327 + border-left-width: calc(var(--border-width) * 3); 196 328 border-radius: var(--radius); 197 - padding: var(--space-md); 329 + padding: var(--space-lg); 198 330 color: var(--color-danger); 199 331 } 200 332 333 + .error-display__message { 334 + font-weight: var(--font-weight-bold); 335 + font-size: var(--font-size-lg); 336 + margin-bottom: var(--space-xs); 337 + } 338 + 339 + .error-display__detail { 340 + color: var(--color-text-muted); 341 + font-size: var(--font-size-sm); 342 + } 343 + 201 344 /* ─── Empty State ───────────────────────────────────────────────────────── */ 202 345 203 346 .empty-state { 204 347 text-align: center; 205 348 padding: var(--space-xl) var(--space-md); 206 349 color: var(--color-text-muted); 350 + border: var(--border-width) dashed var(--color-border); 351 + margin: var(--space-md) 0; 352 + } 353 + 354 + .empty-state p { 355 + font-size: var(--font-size-lg); 356 + margin-bottom: var(--space-sm); 357 + } 358 + 359 + .empty-state__action { 360 + margin-top: var(--space-md); 207 361 } 208 362 209 363 /* ─── Loading State (HTMX indicator) ───────────────────────────────────── */ ··· 211 365 .loading-state { 212 366 opacity: 0; 213 367 transition: opacity 0.2s ease; 368 + text-align: center; 369 + padding: var(--space-md); 370 + color: var(--color-text-muted); 214 371 } 215 372 216 373 .loading-state.htmx-request { 217 374 opacity: 1; 218 375 } 219 376 377 + .htmx-indicator { 378 + opacity: 0; 379 + transition: opacity 0.2s ease; 380 + } 381 + 382 + .htmx-request .htmx-indicator, 383 + .htmx-request.htmx-indicator { 384 + opacity: 1; 385 + } 386 + 387 + /* ─── Error Page ────────────────────────────────────────────────────────── */ 388 + 389 + .error-page { 390 + text-align: center; 391 + padding: var(--space-xl) var(--space-md); 392 + } 393 + 394 + .error-page__code { 395 + font-family: var(--font-heading); 396 + font-size: 6rem; 397 + font-weight: var(--font-weight-bold); 398 + line-height: 1; 399 + color: var(--color-primary); 400 + margin-bottom: var(--space-sm); 401 + } 402 + 403 + .error-page__title { 404 + font-size: var(--font-size-xl); 405 + margin-bottom: var(--space-sm); 406 + } 407 + 408 + .error-page__message { 409 + color: var(--color-text-muted); 410 + font-size: var(--font-size-base); 411 + margin-bottom: var(--space-lg); 412 + } 413 + 220 414 /* ─── Homepage ──────────────────────────────────────────────────────────── */ 221 415 222 416 .category-section { ··· 244 438 245 439 .board-card:hover .card { 246 440 transform: translate(-2px, -2px); 247 - box-shadow: 8px 8px 0 var(--color-shadow); 441 + box-shadow: calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0 var(--color-shadow); 248 442 } 249 443 250 444 .board-card__name { ··· 259 453 font-size: var(--font-size-sm); 260 454 } 261 455 456 + /* ─── Forms ─────────────────────────────────────────────────────────────── */ 457 + 458 + .form-group { 459 + display: flex; 460 + flex-direction: column; 461 + gap: var(--space-xs); 462 + margin-bottom: var(--space-md); 463 + } 464 + 465 + .form-group label { 466 + font-weight: var(--font-weight-bold); 467 + font-size: var(--font-size-sm); 468 + } 469 + 470 + .form-group input, 471 + .form-group textarea, 472 + .form-group select { 473 + border: var(--input-border); 474 + border-radius: var(--input-radius); 475 + padding: var(--space-sm) var(--space-md); 476 + font-family: var(--font-body); 477 + font-size: var(--font-size-base); 478 + background-color: var(--color-surface); 479 + color: var(--color-text); 480 + min-height: 44px; 481 + } 482 + 483 + .form-group textarea { 484 + min-height: 120px; 485 + resize: vertical; 486 + } 487 + 488 + .form-actions { 489 + display: flex; 490 + flex-direction: row; 491 + gap: var(--space-sm); 492 + margin-top: var(--space-md); 493 + } 494 + 495 + .form-error { 496 + color: var(--color-danger); 497 + font-size: var(--font-size-sm); 498 + font-weight: var(--font-weight-bold); 499 + margin: var(--space-xs) 0; 500 + } 501 + 502 + .char-count { 503 + font-size: var(--font-size-sm); 504 + color: var(--color-text-muted); 505 + } 506 + 507 + .char-count[data-over="true"] { 508 + color: var(--color-danger); 509 + font-weight: var(--font-weight-bold); 510 + } 511 + 512 + .success-banner { 513 + background-color: var(--color-success); 514 + color: var(--color-surface); 515 + padding: var(--space-sm) var(--space-md); 516 + margin-bottom: var(--space-md); 517 + font-weight: var(--font-weight-bold); 518 + border: var(--border-width) solid var(--color-border); 519 + } 520 + 521 + /* ─── Login Form ────────────────────────────────────────────────────────── */ 522 + 523 + .login-form { 524 + max-width: 480px; 525 + } 526 + 527 + .login-form__form { 528 + display: flex; 529 + flex-direction: column; 530 + gap: var(--space-md); 531 + } 532 + 533 + .login-form__label { 534 + font-weight: var(--font-weight-bold); 535 + } 536 + 537 + .login-form__input { 538 + border: var(--input-border); 539 + border-radius: var(--input-radius); 540 + padding: var(--space-sm) var(--space-md); 541 + font-family: var(--font-body); 542 + font-size: var(--font-size-base); 543 + background-color: var(--color-surface); 544 + color: var(--color-text); 545 + min-height: 44px; 546 + width: 100%; 547 + box-sizing: border-box; 548 + } 549 + 550 + .login-form__hint { 551 + color: var(--color-text-muted); 552 + font-size: var(--font-size-sm); 553 + } 554 + 555 + .login-form__error { 556 + border: var(--border-width) solid var(--color-danger); 557 + padding: var(--space-sm) var(--space-md); 558 + color: var(--color-danger); 559 + font-weight: var(--font-weight-bold); 560 + } 561 + 562 + .login-form__submit { 563 + cursor: pointer; 564 + display: inline-flex; 565 + align-items: center; 566 + justify-content: center; 567 + gap: var(--space-sm); 568 + font-family: var(--font-body); 569 + font-weight: var(--font-weight-bold); 570 + font-size: var(--font-size-base); 571 + line-height: 1; 572 + border: var(--border-width) solid var(--color-border); 573 + border-radius: var(--button-radius); 574 + padding: var(--space-sm) var(--space-md); 575 + box-shadow: var(--button-shadow); 576 + background-color: var(--color-primary); 577 + color: var(--color-surface); 578 + text-decoration: none; 579 + transition: transform 0.1s ease, box-shadow 0.1s ease; 580 + user-select: none; 581 + } 582 + 583 + .login-form__submit:hover { 584 + transform: translate(var(--btn-press-hover), var(--btn-press-hover)); 585 + box-shadow: var(--btn-press-hover) var(--btn-press-hover) 0 var(--color-shadow); 586 + } 587 + 588 + .login-form__submit:active { 589 + transform: translate(var(--btn-press-active), var(--btn-press-active)); 590 + box-shadow: none; 591 + } 592 + 593 + /* ─── Post Cards ────────────────────────────────────────────────────────── */ 594 + 595 + .post-card { 596 + background-color: var(--color-surface); 597 + border: var(--border-width) solid var(--color-border); 598 + border-left-width: calc(var(--border-width) * 2); 599 + border-left-color: var(--color-primary); 600 + padding: var(--space-md); 601 + margin-bottom: var(--space-md); 602 + transition: transform 0.15s ease, box-shadow 0.15s ease; 603 + } 604 + 605 + .post-card--op { 606 + border-left-width: calc(var(--border-width) * 3); 607 + box-shadow: var(--card-shadow); 608 + } 609 + 610 + .post-card--reply { 611 + box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-shadow); 612 + } 613 + 614 + .post-card__header { 615 + display: flex; 616 + flex-direction: row; 617 + align-items: center; 618 + gap: var(--space-sm); 619 + margin-bottom: var(--space-sm); 620 + flex-wrap: wrap; 621 + } 622 + 623 + .post-card__number { 624 + font-weight: var(--font-weight-bold); 625 + background-color: var(--color-primary); 626 + color: var(--color-surface); 627 + padding: var(--space-xs) var(--space-sm); 628 + min-width: 2em; 629 + text-align: center; 630 + } 631 + 632 + .post-card__author { 633 + font-weight: var(--font-weight-bold); 634 + font-size: var(--font-size-sm); 635 + } 636 + 637 + .post-card__date { 638 + color: var(--color-text-muted); 639 + font-size: var(--font-size-sm); 640 + margin-left: auto; 641 + } 642 + 643 + .post-card__body { 644 + white-space: pre-wrap; 645 + word-break: break-word; 646 + line-height: var(--line-height-body); 647 + } 648 + 649 + /* ─── Breadcrumb ────────────────────────────────────────────────────────── */ 650 + 651 + .breadcrumb { 652 + font-size: var(--font-size-sm); 653 + color: var(--color-text-muted); 654 + margin-bottom: var(--space-md); 655 + } 656 + 657 + .breadcrumb a { 658 + color: var(--color-text-muted); 659 + text-decoration: none; 660 + } 661 + 662 + .breadcrumb a:hover { 663 + color: var(--color-primary); 664 + } 665 + 666 + .breadcrumb ol { 667 + display: flex; 668 + flex-wrap: wrap; 669 + gap: 0; 670 + list-style: none; 671 + padding: 0; 672 + margin: 0; 673 + } 674 + 675 + .breadcrumb li { 676 + display: flex; 677 + align-items: center; 678 + } 679 + 680 + .breadcrumb li + li::before { 681 + content: "/"; 682 + margin: 0 var(--space-sm); 683 + color: var(--color-text-muted); 684 + } 685 + 686 + /* ─── Topic Rows ────────────────────────────────────────────────────────── */ 687 + 688 + .topic-row { 689 + display: flex; 690 + flex-direction: row; 691 + justify-content: space-between; 692 + align-items: baseline; 693 + gap: var(--space-md); 694 + padding: var(--space-md); 695 + border: var(--border-width) solid var(--color-border); 696 + background-color: var(--color-surface); 697 + margin-bottom: var(--space-sm); 698 + transition: transform 0.15s ease, box-shadow 0.15s ease; 699 + } 700 + 701 + .topic-row:hover { 702 + transform: translate(-1px, -1px); 703 + box-shadow: 3px 3px 0 var(--color-shadow); 704 + } 705 + 706 + .topic-row__title { 707 + font-weight: var(--font-weight-bold); 708 + color: var(--color-text); 709 + text-decoration: none; 710 + flex: 1; 711 + overflow: hidden; 712 + text-overflow: ellipsis; 713 + white-space: nowrap; 714 + } 715 + 716 + .topic-row__title:hover { 717 + color: var(--color-primary); 718 + } 719 + 720 + .topic-row__meta { 721 + display: flex; 722 + gap: var(--space-sm); 723 + color: var(--color-text-muted); 724 + font-size: var(--font-size-sm); 725 + white-space: nowrap; 726 + } 727 + 728 + /* ─── Topic Locked Banner ───────────────────────────────────────────────── */ 729 + 730 + .topic-locked-banner { 731 + background-color: var(--color-warning); 732 + color: var(--color-text); 733 + padding: var(--space-sm) var(--space-md); 734 + margin-bottom: var(--space-md); 735 + font-weight: var(--font-weight-bold); 736 + border: var(--border-width) solid var(--color-border); 737 + display: flex; 738 + align-items: center; 739 + gap: var(--space-sm); 740 + } 741 + 742 + .topic-locked-banner__badge { 743 + background-color: var(--color-text); 744 + color: var(--color-warning); 745 + padding: var(--space-xs) var(--space-sm); 746 + font-size: var(--font-size-sm); 747 + text-transform: uppercase; 748 + letter-spacing: 0.05em; 749 + } 750 + 262 751 /* ─── Moderation UI ──────────────────────────────────────────────────────── */ 263 752 264 753 .post-card__mod-actions { ··· 329 818 margin-bottom: var(--space-4); 330 819 font-size: 1.25rem; 331 820 } 821 + 822 + /* ═══════════════════════════════════════════════════════════════════════════ 823 + RESPONSIVE BREAKPOINTS (mobile-first) 824 + Base = mobile (0-767px), tablet = 768px+, desktop = 1024px+ 825 + ═══════════════════════════════════════════════════════════════════════════ */ 826 + 827 + /* ─── Tablet (768px+) ──────────────────────────────────────────────────── */ 828 + 829 + @media (min-width: 768px) { 830 + :root { 831 + --content-width: 720px; 832 + } 833 + 834 + .board-grid { 835 + display: grid; 836 + grid-template-columns: repeat(2, 1fr); 837 + } 838 + 839 + .topic-row { 840 + flex-direction: row; 841 + align-items: baseline; 842 + } 843 + 844 + .topic-row__title { 845 + white-space: nowrap; 846 + overflow: hidden; 847 + text-overflow: ellipsis; 848 + } 849 + 850 + .mobile-nav { 851 + display: none; 852 + } 853 + 854 + .desktop-nav { 855 + display: flex; 856 + } 857 + } 858 + 859 + /* ─── Desktop (1024px+) ───────────────────────────────────────────────── */ 860 + 861 + @media (min-width: 1024px) { 862 + :root { 863 + --content-width: 960px; 864 + --border-width: 3px; 865 + --shadow-offset: 4px; 866 + --button-shadow: 4px 4px 0 var(--color-shadow); 867 + --card-shadow: 6px 6px 0 var(--color-shadow); 868 + --btn-press-hover: 2px; 869 + --btn-press-active: 4px; 870 + --input-border: 3px solid var(--color-border); 871 + } 872 + 873 + .board-grid { 874 + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 875 + } 876 + } 877 + 878 + /* ─── Mobile-specific overrides ────────────────────────────────────────── */ 879 + 880 + @media (max-width: 767px) { 881 + .page-header { 882 + flex-direction: column; 883 + align-items: flex-start; 884 + } 885 + 886 + .topic-row { 887 + flex-direction: column; 888 + gap: var(--space-xs); 889 + } 890 + 891 + .topic-row__title { 892 + white-space: normal; 893 + } 894 + 895 + .topic-row__meta { 896 + flex-wrap: wrap; 897 + } 898 + 899 + .post-card__header { 900 + flex-direction: column; 901 + align-items: flex-start; 902 + gap: var(--space-xs); 903 + } 904 + 905 + .post-card__date { 906 + margin-left: 0; 907 + } 908 + 909 + .login-form { 910 + max-width: 100%; 911 + } 912 + 913 + .desktop-nav { 914 + display: none; 915 + } 916 + 917 + .mobile-nav { 918 + display: block; 919 + } 920 + }

apps/web/public/static/favicon.svg

··· 1 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> 2 + <rect width="32" height="32" fill="#ff5c00" rx="0"/> 3 + <rect x="1" y="1" width="30" height="30" fill="#ff5c00" stroke="#1a1a1a" stroke-width="2" rx="0"/> 4 + <text x="16" y="23" font-family="system-ui, sans-serif" font-size="18" font-weight="700" fill="#ffffff" text-anchor="middle">BB</text> 5 + </svg>

+86

apps/web/src/layouts/__tests__/base.test.tsx

··· 122 122 expect(html).toContain("Log out"); 123 123 }); 124 124 }); 125 + 126 + describe("accessibility", () => { 127 + it("renders skip-to-content link before the site header", async () => { 128 + const res = await app.request("/"); 129 + const html = await res.text(); 130 + expect(html).toContain('class="skip-link"'); 131 + expect(html).toContain('href="#main-content"'); 132 + expect(html).toContain("Skip to main content"); 133 + // Skip link must come before header in DOM order 134 + const skipLinkPos = html.indexOf("skip-link"); 135 + const headerPos = html.indexOf("site-header"); 136 + expect(skipLinkPos).toBeLessThan(headerPos); 137 + }); 138 + 139 + it("renders main element with id for skip link target", async () => { 140 + const res = await app.request("/"); 141 + const html = await res.text(); 142 + expect(html).toContain('id="main-content"'); 143 + }); 144 + 145 + it("desktop nav has aria-label for Main navigation", async () => { 146 + const res = await app.request("/"); 147 + const html = await res.text(); 148 + expect(html).toContain('aria-label="Main navigation"'); 149 + }); 150 + 151 + it("mobile nav has distinct aria-label", async () => { 152 + const res = await app.request("/"); 153 + const html = await res.text(); 154 + expect(html).toContain('aria-label="Mobile navigation"'); 155 + }); 156 + }); 157 + 158 + describe("favicon", () => { 159 + it("includes favicon link in head", async () => { 160 + const res = await app.request("/"); 161 + const html = await res.text(); 162 + expect(html).toContain('rel="icon"'); 163 + expect(html).toContain("favicon.svg"); 164 + }); 165 + }); 166 + 167 + describe("mobile navigation", () => { 168 + it("renders details/summary hamburger menu for mobile", async () => { 169 + const res = await app.request("/"); 170 + const html = await res.text(); 171 + expect(html).toContain("mobile-nav"); 172 + expect(html).toContain("mobile-nav__toggle"); 173 + }); 174 + 175 + it("renders desktop nav separately from mobile nav", async () => { 176 + const res = await app.request("/"); 177 + const html = await res.text(); 178 + expect(html).toContain("desktop-nav"); 179 + }); 180 + 181 + it("hamburger has aria-label for accessibility", async () => { 182 + const res = await app.request("/"); 183 + const html = await res.text(); 184 + expect(html).toContain('aria-label="Menu"'); 185 + }); 186 + 187 + it("mobile nav contains login link when not authenticated", async () => { 188 + const res = await app.request("/"); 189 + const html = await res.text(); 190 + // Both mobile and desktop nav should have "Log in" 191 + const loginMatches = html.match(/Log in/g); 192 + expect(loginMatches!.length).toBe(2); 193 + }); 194 + 195 + it("mobile nav contains auth state when logged in", async () => { 196 + const auth: WebSession = { 197 + authenticated: true, 198 + did: "did:plc:abc123", 199 + handle: "alice.bsky.social", 200 + }; 201 + const authApp = new Hono().get("/", (c) => 202 + c.html(<BaseLayout auth={auth}>content</BaseLayout>) 203 + ); 204 + const res = await authApp.request("/"); 205 + const html = await res.text(); 206 + // Both mobile and desktop nav should have "Log out" 207 + const logoutMatches = html.match(/Log out/g); 208 + expect(logoutMatches!.length).toBe(2); 209 + }); 210 + }); 125 211 });

+36 -20

apps/web/src/layouts/base.tsx

··· 5 5 6 6 const ROOT_CSS = `:root { ${tokensToCss(neobrutalLight)} }`; 7 7 8 + const NavContent: FC<{ auth?: WebSession }> = ({ auth }) => ( 9 + <> 10 + {auth?.authenticated ? ( 11 + <> 12 + <span class="site-header__handle">{auth.handle}</span> 13 + <form action="/logout" method="post" class="site-header__logout-form"> 14 + <button type="submit" class="site-header__logout-btn"> 15 + Log out 16 + </button> 17 + </form> 18 + </> 19 + ) : ( 20 + <a href="/login" class="site-header__login-link"> 21 + Log in 22 + </a> 23 + )} 24 + </> 25 + ); 26 + 8 27 export const BaseLayout: FC< 9 28 PropsWithChildren<{ title?: string; auth?: WebSession }> 10 29 > = (props) => { ··· 23 42 /> 24 43 <link rel="stylesheet" href="/static/css/reset.css" /> 25 44 <link rel="stylesheet" href="/static/css/theme.css" /> 45 + <link rel="icon" type="image/svg+xml" href="/static/favicon.svg" /> 26 46 <script src="https://unpkg.com/htmx.org@2.0.4" defer /> 27 47 </head> 28 48 <body> 49 + <a href="#main-content" class="skip-link"> 50 + Skip to main content 51 + </a> 29 52 <header class="site-header"> 30 53 <div class="site-header__inner"> 31 54 <a href="/" class="site-header__title"> 32 55 atBB Forum 33 56 </a> 34 - <nav class="site-header__nav"> 35 - {auth?.authenticated ? ( 36 - <> 37 - <span class="site-header__handle">{auth.handle}</span> 38 - <form 39 - action="/logout" 40 - method="post" 41 - class="site-header__logout-form" 42 - > 43 - <button type="submit" class="site-header__logout-btn"> 44 - Log out 45 - </button> 46 - </form> 47 - </> 48 - ) : ( 49 - <a href="/login" class="site-header__login-link"> 50 - Log in 51 - </a> 52 - )} 57 + <nav class="desktop-nav" aria-label="Main navigation"> 58 + <NavContent auth={auth} /> 53 59 </nav> 60 + <details class="mobile-nav"> 61 + <summary class="mobile-nav__toggle" aria-label="Menu"> 62 + ☰ 63 + </summary> 64 + <nav class="mobile-nav__menu" aria-label="Mobile navigation"> 65 + <NavContent auth={auth} /> 66 + </nav> 67 + </details> 54 68 </div> 55 69 </header> 56 - <main class="content-container">{props.children}</main> 70 + <main id="main-content" class="content-container"> 71 + {props.children} 72 + </main> 57 73 <footer class="site-footer"> 58 74 <p>Powered by atBB on the ATmosphere</p> 59 75 </footer>

+2 -2

apps/web/src/lib/__tests__/session.test.ts

··· 159 159 160 160 expect(result).toEqual({ authenticated: false }); 161 161 expect(consoleSpy).toHaveBeenCalledWith( 162 - expect.stringContaining("network or unexpected error"), 162 + expect.stringContaining("network error"), 163 163 expect.objectContaining({ error: expect.stringContaining("ECONNREFUSED") }) 164 164 ); 165 165 ··· 250 250 expect(result.authenticated).toBe(true); 251 251 expect(result.permissions.size).toBe(0); 252 252 expect(consoleSpy).toHaveBeenCalledWith( 253 - expect.stringContaining("failed to fetch permissions"), 253 + expect.stringContaining("network error"), 254 254 expect.any(Object) 255 255 ); 256 256 consoleSpy.mockRestore();

+6 -3

apps/web/src/lib/session.ts

··· 1 + import { isProgrammingError } from "./errors.js"; 2 + 1 3 export type WebSession = 2 4 | { authenticated: false } 3 5 | { authenticated: true; did: string; handle: string }; ··· 44 46 45 47 return { authenticated: false }; 46 48 } catch (error) { 49 + if (isProgrammingError(error)) throw error; 47 50 console.error( 48 - "getSession: network or unexpected error — treating as unauthenticated", 51 + "getSession: network error — treating as unauthenticated", 49 52 { 50 53 operation: "GET /api/auth/session", 51 54 error: error instanceof Error ? error.message : String(error), 52 55 } 53 56 ); 54 - // AppView unavailable or network error — treat as unauthenticated 55 57 return { authenticated: false }; 56 58 } 57 59 } ··· 104 106 ); 105 107 } 106 108 } catch (error) { 109 + if (isProgrammingError(error)) throw error; 107 110 console.error( 108 - "getSessionWithPermissions: failed to fetch permissions — continuing with empty permissions", 111 + "getSessionWithPermissions: network error — continuing with empty permissions", 109 112 { 110 113 operation: "GET /api/admin/members/me", 111 114 did: session.did,

+106

apps/web/src/routes/__tests__/not-found.test.tsx

··· 1 + import { describe, it, expect, vi, beforeEach, afterEach } from "vitest"; 2 + import { Hono } from "hono"; 3 + import { createNotFoundRoute } from "../not-found.js"; 4 + 5 + describe("404 Not Found page", () => { 6 + describe("without appviewUrl (fallback path)", () => { 7 + const app = new Hono().route("/", createNotFoundRoute()); 8 + 9 + it("returns 404 status for unmatched routes", async () => { 10 + const res = await app.request("/some-random-page"); 11 + expect(res.status).toBe(404); 12 + }); 13 + 14 + it("renders error page with 404 code", async () => { 15 + const res = await app.request("/nonexistent"); 16 + const html = await res.text(); 17 + expect(html).toContain("404"); 18 + expect(html).toContain("error-page"); 19 + }); 20 + 21 + it("renders a link back to home", async () => { 22 + const res = await app.request("/anything"); 23 + const html = await res.text(); 24 + expect(html).toContain('href="/"'); 25 + }); 26 + 27 + it("renders user-friendly message", async () => { 28 + const res = await app.request("/nope"); 29 + const html = await res.text(); 30 + expect(html).toContain("error-page__message"); 31 + expect(html).toContain("exist"); 32 + }); 33 + }); 34 + 35 + describe("with appviewUrl (production path)", () => { 36 + const mockFetch = vi.fn(); 37 + 38 + beforeEach(() => { 39 + vi.stubGlobal("fetch", mockFetch); 40 + }); 41 + 42 + afterEach(() => { 43 + vi.unstubAllGlobals(); 44 + mockFetch.mockReset(); 45 + }); 46 + 47 + it("shows handle and logout for authenticated user", async () => { 48 + mockFetch.mockResolvedValueOnce({ 49 + ok: true, 50 + json: () => 51 + Promise.resolve({ 52 + authenticated: true, 53 + did: "did:plc:abc", 54 + handle: "alice.bsky.social", 55 + }), 56 + }); 57 + const app = new Hono().route( 58 + "/", 59 + createNotFoundRoute("http://localhost:3000") 60 + ); 61 + const res = await app.request("/missing", { 62 + headers: { cookie: "atbb_session=token" }, 63 + }); 64 + expect(res.status).toBe(404); 65 + const html = await res.text(); 66 + expect(html).toContain("alice.bsky.social"); 67 + expect(html).toContain("Log out"); 68 + expect(html).toContain("error-page"); 69 + }); 70 + 71 + it("shows login link for unauthenticated user", async () => { 72 + mockFetch.mockResolvedValueOnce({ 73 + ok: false, 74 + status: 401, 75 + }); 76 + const app = new Hono().route( 77 + "/", 78 + createNotFoundRoute("http://localhost:3000") 79 + ); 80 + const res = await app.request("/missing", { 81 + headers: { cookie: "atbb_session=expired" }, 82 + }); 83 + expect(res.status).toBe(404); 84 + const html = await res.text(); 85 + expect(html).toContain("Log in"); 86 + expect(html).toContain("error-page"); 87 + }); 88 + 89 + it("still renders 404 when getSession throws (AppView down)", async () => { 90 + mockFetch.mockRejectedValueOnce(new Error("fetch failed")); 91 + const app = new Hono().route( 92 + "/", 93 + createNotFoundRoute("http://localhost:3000") 94 + ); 95 + const res = await app.request("/missing", { 96 + headers: { cookie: "atbb_session=token" }, 97 + }); 98 + expect(res.status).toBe(404); 99 + const html = await res.text(); 100 + expect(html).toContain("error-page"); 101 + expect(html).toContain("404"); 102 + // Falls back to unauthenticated — page still renders 103 + expect(html).toContain("Log in"); 104 + }); 105 + }); 106 + });

+6 -10

apps/web/src/routes/boards.tsx

··· 242 242 243 243 return c.html( 244 244 <BaseLayout title={`${board.name} — atBB Forum`} auth={auth}> 245 - <nav class="breadcrumb"> 246 - <a href="/">Home</a> 247 - {categoryName && ( 248 - <> 249 - {" / "} 250 - <a href="/">{categoryName}</a> 251 - </> 252 - )} 253 - {" / "} 254 - <span>{board.name}</span> 245 + <nav class="breadcrumb" aria-label="Breadcrumb"> 246 + <ol> 247 + <li><a href="/">Home</a></li> 248 + {categoryName && <li><a href="/">{categoryName}</a></li>} 249 + <li><span>{board.name}</span></li> 250 + </ol> 255 251 </nav> 256 252 257 253 <PageHeader

+3 -1

apps/web/src/routes/index.ts

··· 7 7 import { createNewTopicRoutes } from "./new-topic.js"; 8 8 import { createAuthRoutes } from "./auth.js"; 9 9 import { createModActionRoute } from "./mod.js"; 10 + import { createNotFoundRoute } from "./not-found.js"; 10 11 11 12 const config = loadConfig(); 12 13 ··· 17 18 .route("/", createLoginRoutes(config.appviewUrl)) 18 19 .route("/", createNewTopicRoutes(config.appviewUrl)) 19 20 .route("/", createAuthRoutes(config.appviewUrl)) 20 - .route("/", createModActionRoute(config.appviewUrl)); 21 + .route("/", createModActionRoute(config.appviewUrl)) 22 + .route("/", createNotFoundRoute(config.appviewUrl));

+3 -1

apps/web/src/routes/login.tsx

···

+10 -8

apps/web/src/routes/new-topic.tsx

··· 81 81 82 82 return c.html( 83 83 <BaseLayout title="New Topic — atBB Forum" auth={auth}> 84 - <nav class="breadcrumb"> 85 - <a href="/">Home</a> 86 - {" / "} 87 - <a href={`/boards/${board.id}`}>{board.name}</a> 88 - {" / "} 89 - <span>New Topic</span> 84 + <nav class="breadcrumb" aria-label="Breadcrumb"> 85 + <ol> 86 + <li><a href="/">Home</a></li> 87 + <li><a href={`/boards/${board.id}`}>{board.name}</a></li> 88 + <li><span>New Topic</span></li> 89 + </ol> 90 90 </nav> 91 91 92 92 <PageHeader title="New Topic" description={`Posting to ${board.name}`} /> ··· 109 109 rows={8} 110 110 placeholder="What's on your mind?" 111 111 oninput="updateCharCount(this)" 112 + aria-required="true" 113 + aria-describedby="char-count" 112 114 /> 113 - <div id="char-count" class="char-count">300 left</div> 115 + <div id="char-count" class="char-count" aria-live="polite">300 left</div> 114 116 </div> 115 117 116 - <div id="form-error" /> 118 + <div id="form-error" role="alert" /> 117 119 118 120 <div class="form-actions"> 119 121 <button type="submit" class="btn btn-primary">

+24

apps/web/src/routes/not-found.tsx

··· 1 + import { Hono } from "hono"; 2 + import { BaseLayout } from "../layouts/base.js"; 3 + import { getSession } from "../lib/session.js"; 4 + 5 + export function createNotFoundRoute(appviewUrl?: string) { 6 + return new Hono().all("*", async (c) => { 7 + const auth = appviewUrl 8 + ? await getSession(appviewUrl, c.req.header("cookie")) 9 + : { authenticated: false as const }; 10 + return c.html( 11 + <BaseLayout title="Page Not Found — atBB Forum" auth={auth}> 12 + <div class="error-page"> 13 + <div class="error-page__code">404</div> 14 + <h1 class="error-page__title">Page Not Found</h1> 15 + <p class="error-page__message"> 16 + This page doesn't exist or has been removed. 17 + </p> 18 + <a href="/" class="btn btn-primary">Back to Home</a> 19 + </div> 20 + </BaseLayout>, 21 + 404 22 + ); 23 + }); 24 + }

+25 -21

apps/web/src/routes/topics.tsx

··· 116 116 const date = post.createdAt ? timeAgo(new Date(post.createdAt)) : "unknown"; 117 117 const cardClass = isOP ? "post-card post-card--op" : "post-card post-card--reply"; 118 118 return ( 119 - <div class={cardClass} id={`post-${postNumber}`}> 119 + <article class={cardClass} id={`post-${postNumber}`}> 120 120 <div class="post-card__header"> 121 121 <span class="post-card__number">#{postNumber}</span> 122 122 <span class="post-card__author">{handle}</span> ··· 147 147 )} 148 148 </div> 149 149 )} 150 - </div> 150 + </article> 151 151 ); 152 152 } 153 153 154 154 function ModDialog() { 155 155 return ( 156 - <dialog id="mod-dialog" class="mod-dialog"> 156 + <dialog id="mod-dialog" class="mod-dialog" aria-labelledby="mod-dialog-title"> 157 157 <h2 id="mod-dialog-title" class="mod-dialog__title">Confirm Action</h2> 158 158 <form 159 159 hx-post="/mod/action" ··· 170 170 name="reason" 171 171 rows={3} 172 172 placeholder="Reason for this action…" 173 + autofocus 173 174 /> 174 175 </div> 175 176 <div id="mod-dialog-error" /> ··· 232 233 <PostCard key={reply.id} post={reply} postNumber={offset + i + 2} modPerms={modPerms} /> 233 234 ))} 234 235 {hasMore && <LoadMoreButton topicId={topicId} nextOffset={nextOffset} />} 236 + {offset > 0 && ( 237 + <div id="reply-status" class="sr-only" aria-live="polite" hx-swap-oob="true"> 238 + {replies.length} more {replies.length === 1 ? "reply" : "replies"} loaded 239 + </div> 240 + )} 235 241 </> 236 242 ); 237 243 } ··· 383 389 384 390 return c.html( 385 391 <BaseLayout title={`${topicTitle} — atBB Forum`} auth={auth}> 386 - <nav class="breadcrumb"> 387 - <a href="/">Home</a> 388 - {categoryName && categoryId && ( 389 - <> 390 - {" / "} 391 - <a href={`/categories/${categoryId}`}>{categoryName}</a> 392 - </> 393 - )} 394 - {boardName && ( 395 - <> 396 - {" / "} 397 - <a href={`/boards/${topicData.post.boardId}`}>{boardName}</a> 398 - </> 399 - )} 400 - {" / "} 401 - <span>{topicTitle}</span> 392 + <nav class="breadcrumb" aria-label="Breadcrumb"> 393 + <ol> 394 + <li><a href="/">Home</a></li> 395 + {categoryName && categoryId && ( 396 + <li><a href={`/categories/${categoryId}`}>{categoryName}</a></li> 397 + )} 398 + {boardName && ( 399 + <li><a href={`/boards/${topicData.post.boardId}`}>{boardName}</a></li> 400 + )} 401 + <li><span>{topicTitle}</span></li> 402 + </ol> 402 403 </nav> 403 404 404 405 <PageHeader title={topicTitle} /> ··· 437 438 /> 438 439 )} 439 440 </div> 441 + <div id="reply-status" class="sr-only" aria-live="polite"></div> 440 442 441 443 <div id="reply-form-slot"> 442 444 {topicData.locked ? ( ··· 459 461 rows={5} 460 462 placeholder="Write a reply…" 461 463 oninput="updateReplyCharCount(this)" 464 + aria-required="true" 465 + aria-describedby="reply-char-count" 462 466 /> 463 - <div id="reply-char-count" class="char-count">300 left</div> 467 + <div id="reply-char-count" class="char-count" aria-live="polite">300 left</div> 464 468 </div> 465 469 466 - <div id="reply-form-error" /> 470 + <div id="reply-form-error" role="alert" /> 467 471 468 472 <div class="form-actions"> 469 473 <button type="submit" class="btn btn-primary">

+8 -8

apps/web/src/styles/presets/neobrutal-light.ts

··· 35 35 "space-lg": "24px", 36 36 "space-xl": "40px", 37 37 "radius": "0px", 38 - "border-width": "3px", 39 - "shadow-offset": "4px", 40 - "content-width": "960px", 38 + "border-width": "2px", 39 + "shadow-offset": "2px", 40 + "content-width": "100%", 41 41 // Components 42 42 "button-radius": "0px", 43 - "button-shadow": "4px 4px 0 var(--color-shadow)", 43 + "button-shadow": "2px 2px 0 var(--color-shadow)", 44 44 "card-radius": "0px", 45 - "card-shadow": "6px 6px 0 var(--color-shadow)", 46 - "btn-press-hover": "2px", 47 - "btn-press-active": "4px", 45 + "card-shadow": "4px 4px 0 var(--color-shadow)", 46 + "btn-press-hover": "1px", 47 + "btn-press-active": "2px", 48 48 "input-radius": "0px", 49 - "input-border": "3px solid var(--color-border)", 49 + "input-border": "2px solid var(--color-border)", 50 50 "nav-height": "64px", 51 51 };

+9 -5

docs/atproto-forum-plan.md

··· 226 226 - ATB-27 | `apps/web/src/routes/home.tsx` — server-renders forum name/description, categories as section headers, boards as cards with links; two-stage parallel fetch (forum+categories, then per-category boards); error display on network (503) or API (500) failures; 12 integration tests in `home.test.tsx` 227 227 - [x] Board view: topic listing with pagination 228 228 - ATB-28 | `apps/web/src/routes/boards.tsx` — breadcrumb navigation, topic list (truncated 80 chars), HTMX "Load More" pagination; auth-aware "New Topic" button; `timeAgo` relative date utility; `isNotFoundError` error helper; AppView: `GET /api/boards/:id`, `GET /api/categories/:id`, offset/limit pagination on `GET /api/boards/:id/topics`; 20 integration tests in `boards.test.tsx`; 8 AppView tests 229 - - [ ] Category view: paginated topic list, sorted by last reply 229 + - [ ] Category view: paginated topic list, sorted by last reply — **Deferred:** boards hierarchy (ATB-23) replaced per-category pages; boards view serves this purpose 230 230 - [x] Topic view: OP + flat replies, pagination 231 231 - ATB-29 | `apps/web/src/routes/topics.tsx` — OP card (#1) + reply cards (#2, #3, …) with post numbers and `timeAgo` dates; breadcrumb (Home → Category → Board → Topic) with graceful degradation on breadcrumb fetch failures; locked-topic banner + reply-slot gating (unauthenticated/authenticated/locked); HTMX "Load More" with `hx-push-url` for bookmarkable offsets; `?offset=N` bookmark support renders all replies 0→N+pageSize inline; three-stage sequential fetch (topic fatal, board/category non-fatal); 35 integration tests in `topics.test.tsx` 232 - - [ ] Compose: new topic form, reply form 233 - - [ ] Login/logout flow 234 - - [ ] Admin panel: manage categories, view members, mod actions 235 - - [ ] Basic responsive design 232 + - [x] Compose: new topic form, reply form 233 + - ATB-30 | `apps/web/src/routes/new-topic.tsx` — new topic form with board selector, character counter, validation; `apps/web/src/routes/topics.tsx` — inline reply form with HTMX submission; both forms write to AppView API which proxies to user's PDS 234 + - [x] Login/logout flow 235 + - ATB-30 | `apps/web/src/routes/login.tsx` — handle input form; `apps/web/src/routes/auth.tsx` — OAuth callback + session management; BaseLayout shows login/logout based on auth state 236 + - [x] Admin panel: manage categories, view members, mod actions 237 + - ATB-24 | Topic view mod buttons (lock/hide/ban) gated on permissions; `<dialog>` confirmation modal; `POST /mod/action` web proxy route; `getSessionWithPermissions()` for permission-aware rendering 238 + - [x] Basic responsive design 239 + - ATB-32 | Mobile-first responsive breakpoints (375px/768px/1024px), CSS-only hamburger nav via `<details>`/`<summary>`, token overrides for mobile, accessibility improvements (skip link, focus-visible, ARIA attributes, semantic HTML), 404 page, visual polish (transitions, hover states), SVG favicon 236 240 237 241 #### Phase 5: Packaging & Deployment (Week 9–10) 238 242 - [x] Dockerfiles for AppView and Web UI — **Complete:** Multi-stage Dockerfile with Node 22 Alpine, nginx reverse proxy, health checks (ATB-28)

+232

docs/plans/2026-02-20-responsive-a11y-polish-design.md

···

+1427

docs/plans/2026-02-20-responsive-a11y-polish-plan.md

···