Apply remaining audit fixes; document radii and code palette in DESIGN.md

- 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>
This commit is contained in:
2026-07-16 15:40:52 +02:00
co-authored by Claude Fable 5
parent b91b142448
commit 7add4bf2e6
18 changed files with 160 additions and 91 deletions
@@ -24,7 +24,7 @@
{{{ each categoryItems }}}
<li role="presentation" class="category {{{ if ./disabledClass }}}disabled {{{ end }}}{{{ if ./class }}} {./class}{{{ end }}}" data-cid="{./cid}" data-name="{./name}" data-parent-cid="{./parentCid}">
<a class="dropdown-item rounded-1 {{{ if ./disabledClass }}}disabled{{{ end }}}" role="menuitem" href="#">{./level}
<span component="category-markup" style="{{{ if ./match }}}font-weight: bold;{{{end}}}">
<span component="category-markup" class="{{{ if ./match }}}fw-bold{{{end}}}">
<span class="category-item d-inline-flex align-items-center gap-1 {{{ if ./class }}}{./class}{{{ end }}}">
{{{ if ./icon }}}
{{buildCategoryIcon(@value, "24px", "rounded-circle")}}
+19 -19
View File
@@ -6,36 +6,36 @@
<h2 class="wg-footer__title" id="wg-footer-title">{config.siteTitle}</h2>
</div>
<p class="wg-footer__description">
A Neverwinter Nights: Enhanced Edition persistent world of gothic intrigue, set in the Forgotten Realms port city of Westgate.
[[westgate:footer.description]]
</p>
<p class="wg-footer__motto">Mind the shadows.</p>
<p class="wg-footer__motto">[[westgate:footer.motto]]</p>
</section>
<nav class="wg-footer__nav" aria-label="Explore">
<h2 class="wg-footer__heading">Explore</h2>
<nav class="wg-footer__nav" aria-label="[[westgate:footer.explore]]">
<h2 class="wg-footer__heading">[[westgate:footer.explore]]</h2>
<ul class="wg-footer__links">
<li><a href="{relative_path}/">Home</a></li>
<li><a href="{relative_path}/category/1/news">News</a></li>
<li><a href="{relative_path}/gallery">Gallery</a></li>
<li><a href="{relative_path}/category/84/developer-blog">Dev Blog</a></li>
<li><a href="{relative_path}/recruitment">Join the Team</a></li>
<li><a href="{relative_path}/">[[westgate:footer.home]]</a></li>
<li><a href="{relative_path}/category/1/news">[[westgate:footer.news]]</a></li>
<li><a href="{relative_path}/gallery">[[westgate:footer.gallery]]</a></li>
<li><a href="{relative_path}/category/84/developer-blog">[[westgate:footer.dev-blog]]</a></li>
<li><a href="{relative_path}/recruitment">[[westgate:footer.join-team]]</a></li>
</ul>
</nav>
<nav class="wg-footer__nav" aria-label="Community">
<h2 class="wg-footer__heading">Community</h2>
<nav class="wg-footer__nav" aria-label="[[westgate:footer.community]]">
<h2 class="wg-footer__heading">[[westgate:footer.community]]</h2>
<ul class="wg-footer__links">
<li><a href="{relative_path}/categories">Forums</a></li>
<li><a href="{relative_path}/wiki">Wiki</a></li>
<li><a href="{relative_path}/register">Register</a></li>
<li><a href="{relative_path}/wiki">How to Join</a></li>
<li><a href="{relative_path}/categories">[[westgate:footer.forums]]</a></li>
<li><a href="{relative_path}/wiki">[[westgate:footer.wiki]]</a></li>
<li><a href="{relative_path}/register">[[westgate:footer.register]]</a></li>
<li><a href="{relative_path}/wiki">[[westgate:footer.how-to-join]]</a></li>
</ul>
</nav>
</div>
<div class="wg-footer__meta">
<p>&copy; 2026 Shadows Over Westgate &middot; A NWN:EE Persistent World</p>
<p>Forgotten Realms &middot; Westgate &middot; Sea of Fallen Stars</p>
<p>[[westgate:footer.copyright, {currentYear}]]</p>
<p>[[westgate:footer.setting]]</p>
</div>
<div class="wg-footer__powered-by" aria-label="Platform credits">
@@ -46,7 +46,7 @@
rel="noopener noreferrer"
aria-label="Powered by NodeBB"
>
<span class="wg-footer__powered-label">Powered by</span>
<span class="wg-footer__powered-label">[[westgate:footer.powered-by]]</span>
<span class="wg-footer__powered-name">NodeBB</span>
</a>
<a
@@ -56,7 +56,7 @@
rel="noopener noreferrer"
aria-label="Powered by Tiptap"
>
<span class="wg-footer__powered-label">Powered by</span>
<span class="wg-footer__powered-label">[[westgate:footer.powered-by]]</span>
<span class="wg-footer__powered-name">Tiptap</span>
</a>
</div>
+6 -6
View File
@@ -32,22 +32,22 @@
{{{ if config.loggedIn }}}
<ul id="wg-topbar-logged-in-menu" class="wg-topbar__utility-list list-unstyled d-flex align-items-center mb-0">
{{{ if (config.searchEnabled && user.privileges.search:content) }}}
<li component="sidebar/search" class="nav-item search dropdown position-relative" title="[[global:header.search]]" role="menuitem">
<li component="sidebar/search" class="nav-item search dropdown position-relative" title="[[global:header.search]]">
<!-- IMPORT partials/sidebar/search.tpl -->
</li>
{{{ end }}}
<li component="notifications" class="nav-item notifications dropdown" title="[[global:header.notifications]]" role="menuitem">
<li component="notifications" class="nav-item notifications dropdown" title="[[global:header.notifications]]">
<!-- IMPORT partials/sidebar/notifications.tpl -->
</li>
{{{ if canChat }}}
<li class="nav-item chats dropdown" title="[[global:header.chats]]" role="menuitem">
<li class="nav-item chats dropdown" title="[[global:header.chats]]">
<!-- IMPORT partials/sidebar/chats.tpl -->
</li>
{{{ end }}}
<li component="sidebar/drafts" class="nav-item drafts dropdown" title="[[global:header.drafts]]" role="menuitem">
<li component="sidebar/drafts" class="nav-item drafts dropdown" title="[[global:header.drafts]]">
<!-- IMPORT partials/sidebar/drafts.tpl -->
</li>
@@ -57,14 +57,14 @@
</li>
{{{ end }}}
<li id="user_label" class="nav-item usermenu dropdown" title="{user.username}" role="menuitem">
<li id="user_label" class="nav-item usermenu dropdown" title="{user.username}">
<!-- IMPORT partials/sidebar/user-menu.tpl -->
</li>
</ul>
{{{ else }}}
<ul id="wg-topbar-logged-out-menu" class="wg-topbar__utility-list wg-topbar__utility-list--guest list-unstyled d-flex align-items-center mb-0">
{{{ if (config.searchEnabled && user.privileges.search:content) }}}
<li component="sidebar/search" class="nav-item search dropdown position-relative" title="[[global:header.search]]" role="menuitem">
<li component="sidebar/search" class="nav-item search dropdown position-relative" title="[[global:header.search]]">
<!-- IMPORT partials/sidebar/search.tpl -->
</li>
{{{ end }}}
+2 -2
View File
@@ -15,7 +15,7 @@
</a>
{{{ if showSelect }}}
<div class="checkbox position-absolute top-100 start-50 translate-middle-x pt-2 m-0 d-none d-lg-flex" style="max-width:max-content">
<i component="topic/select" class="fa text-muted pointer fa-square-o p-1 hover-visible"></i>
<i component="topic/select" class="fa text-muted pointer fa-square-o p-1 hover-visible" role="checkbox" aria-checked="false" tabindex="0" aria-label="[[westgate:select-topic]]"></i>
</div>
{{{ end }}}
</div>
@@ -73,7 +73,7 @@
</span>
{{{ if showSelect }}}
<div class="checkbox position-absolute top-0 end-0 m-0 d-flex d-lg-none" style="max-width:max-content">
<i component="topic/select" class="fa fa-square-o text-muted pointer p-1"></i>
<i component="topic/select" class="fa fa-square-o text-muted pointer p-1" role="checkbox" aria-checked="false" tabindex="0" aria-label="[[westgate:select-topic]]"></i>
</div>
{{{ end }}}
</div>