Theme post code blocks + a11y fixes (impeccable audit) #25

Merged
archvillainette merged 2 commits from impeccable-audit into main 2026-07-16 14:44:39 +00:00
Owner

Code blocks in posts rendered with the markdown plugin's default light highlight.js theme — white blocks on the dark ledger. This adds dark velvet pre/code styling and a Westgate-toned syntax palette (gold keywords, ledger-ink titles, muted green strings) for post content and the composer preview.

Also picks up the quick wins from an impeccable audit:

  • Visible focus ring on the mobile drawer search (input had outline: 0 with no replacement)
  • Input placeholder contrast raised to pass WCAG 4.5:1; tagsinput placeholder reuses the token instead of $gray-500
  • prefers-reduced-motion block zeroing transitions/animations (there were none before)
  • Fixed a stray </li> closing a <div> in quick-search-results.tpl

🤖 Generated with Claude Code

Code blocks in posts rendered with the markdown plugin's default light highlight.js theme — white blocks on the dark ledger. This adds dark velvet pre/code styling and a Westgate-toned syntax palette (gold keywords, ledger-ink titles, muted green strings) for post content and the composer preview. Also picks up the quick wins from an impeccable audit: - Visible focus ring on the mobile drawer search (input had `outline: 0` with no replacement) - Input placeholder contrast raised to pass WCAG 4.5:1; tagsinput placeholder reuses the token instead of `$gray-500` - `prefers-reduced-motion` block zeroing transitions/animations (there were none before) - Fixed a stray `</li>` closing a `<div>` in `quick-search-results.tpl` 🤖 Generated with [Claude Code](https://claude.com/claude-code)
archvillainette added 1 commit 2026-07-16 13:25:16 +00:00
- Dark velvet pre/code styling + Westgate hljs syntax palette for post
  content and composer preview (markdown plugin's light hljs theme was
  rendering white blocks)
- Visible focus ring on mobile drawer search (was outline: 0 with no
  replacement)
- Placeholder contrast raised to pass 4.5:1; tagsinput placeholder now
  reuses the token instead of $gray-500
- prefers-reduced-motion block zeroing transitions/animations
- Fix stray </li> closing a <div> in quick-search-results.tpl

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
archvillainette added 1 commit 2026-07-16 13:40:56 +00:00
- Token sweep: exact-value gold literals now use --wg-border /
  --wg-border-soft / --wg-focus
- Topbar: drop invalid role="menuitem" (no parent role="menu")
- topics_list: topic-select icons get role="checkbox", tabindex,
  aria-label; client.js makes them keyboard-operable and syncs
  aria-checked
- category.tpl: copy-handle link gets an accessible name, "View
  Original" moved to i18n, external-link icon aria-hidden, stretched
  link inside aria-hidden alert removed from tab order
- Footer: all copy moved to [[westgate:footer.*]] keys; year injected
  via filter:middleware.renderFooter instead of hard-coded 2026
- client.js: batch table measurements before writes (no interleaved
  reflow), .catch on the category class map so search results never
  hang, category selector match uses fw-bold class instead of inline
  style
- Forced-colors focus fallback: transparent outline alongside the
  box-shadow focus ring
- DESIGN.md: real radius scale (3/4/6/8px), code-block palette,
  motion & modes section, placeholder alpha

Verified against the sow-nodebb dev container: themed code blocks
render in posts, footer i18n + year, checkbox roles in served HTML.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
archvillainette scheduled this pull request to auto merge when all checks succeed 2026-07-16 14:42:14 +00:00
xtul approved these changes 2026-07-16 14:44:37 +00:00
archvillainette merged commit c3851107ab into main 2026-07-16 14:44:39 +00:00
archvillainette deleted branch impeccable-audit 2026-07-16 14:44:40 +00:00
Sign in to join this conversation.