Docs: sync widget previews and add an accessibility page (#11)

Refresh public/widgets/ and public/js/ from the application repository.

Replace the GitHub pull request stubs' "label" key with "filters", matching
the field the widget now reads.

Add /docs/accessibility/, generated from ACCESSIBILITY.md in the application
repository at build time. Gate it in scripts/check-dist.mjs alongside the
development and changelog pages, and link it from the sidebar and the landing
footer.

Author: SandObserver

astro.config.mjs

@@ -97,6 +97,7 @@ export default defineConfig({
           ],
         },
         { label: 'Security', link: '/docs/security/' },
+        { label: 'Accessibility', link: '/docs/accessibility/' },
         { label: 'Troubleshooting', link: '/docs/troubleshooting/' },
         { label: 'Support', link: '/docs/support/' },
         { label: 'Development', link: '/docs/development/' },

public/api/widget-data/gh-github-prs

@@ -1,7 +1,7 @@
 {
   "view": "prs",
   "totalCount": 4,
-  "label": "created",
+  "filters": ["created"],
   "allUrl": "https://github.com/pulls",
   "items": [
     {

public/api/widget-data/gh-github-prs-md

@@ -1,7 +1,7 @@
 {
   "view": "prs",
   "totalCount": 4,
-  "label": "created",
+  "filters": ["created"],
   "allUrl": "https://github.com/pulls",
   "items": [
     {

public/js/admin-app-form.js

@@ -13,8 +13,8 @@ import {
   initInlineEdit,
   setTogDisabled,
   wireChecklist,
-} from '/js/admin-shared.js?v=d96fc091';
-import { renderColorControl, BADGE_SWATCHES } from '/js/admin-color-control.js?v=89eee5e8';
+} from '/js/admin-shared.js?v=8f69dad6';
+import { renderColorControl, BADGE_SWATCHES } from '/js/admin-color-control.js?v=984a0b69';
 import { badgeErrorAdvice, TONE } from '/js/admin-error.js?v=10f3cdb1';
 
 export function buildFolderForm(body, item) {

public/js/admin-auth.js

@@ -1,4 +1,4 @@
-import { ag, ap } from '/js/admin-shared.js?v=d96fc091';
+import { ag, ap } from '/js/admin-shared.js?v=8f69dad6';
 import { t } from '/js/i18n.js?v=d056c9c5';
 import { pwStrength } from '/js/password-strength.js?v=42f45ac7';
 import { el, inp as inpById, qa } from '/js/utils.js?v=b18c93ed';

public/js/admin-color-control.js

@@ -1,4 +1,4 @@
-import { PE_SVG, initInlineEdit, toast } from '/js/admin-shared.js?v=d96fc091';
+import { PE_SVG, initInlineEdit, toast } from '/js/admin-shared.js?v=8f69dad6';
 import { t } from '/js/i18n.js?v=d056c9c5';
 import { html, raw, setHtml } from '/js/html.js?v=c71f8903';
 import { qa, q } from '/js/utils.js?v=b18c93ed';

public/js/admin-settings.js

@@ -1,4 +1,4 @@
-import { toast, ag, ap } from '/js/admin-shared.js?v=d96fc091';
+import { toast, ag, ap } from '/js/admin-shared.js?v=8f69dad6';
 import { pwStrength } from '/js/password-strength.js?v=42f45ac7';
 import { t } from '/js/i18n.js?v=d056c9c5';
 import { shouldWritePassword, settingsSaveBlocker, clearsStoredPassword, BLOCK } from '/js/admin-logic.js?v=ddfc6f80';

public/js/admin-shared.js

@@ -129,10 +129,13 @@ export const CHEV_SVG =
   '<svg class="dd-chev" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 10.5 12 6.5 16 10.5"/><path d="M8 13.5 12 17.5 16 13.5"/></svg>';
 
 /* `root` lets a caller wire a subtree that is not in the document yet. */
-/** @param {string} rowId @param {string} inputId
-    @param {{ type?: string, placeholder?: string,
+/** A function placeholder is resolved on use, not at wiring time: this runs
+    before the catalog is fetched, so a translated one has to be read later.
+    @param {string} rowId @param {string} inputId
+    @param {{ type?: string, placeholder?: string | (() => string),
               onCommit?: (value: string) => void, root?: ParentNode }} [opts] */
 export function initInlineEdit(rowId, inputId, { type = 'text', placeholder = '', onCommit, root = document } = {}) {
+  const ph = () => (typeof placeholder === 'function' ? placeholder() : placeholder);
   const byId = id => (root === document ? el(id) : root.querySelector('#' + CSS.escape(id)));
   const row = byId(rowId);
   const inp = /** @type {HTMLInputElement} */ (byId(inputId));
@@ -142,15 +145,23 @@ export function initInlineEdit(rowId, inputId, { type = 'text', placeholder = ''
   if (!valEl || !pen) return;
 
   inp.type = type;
-  inp.placeholder = placeholder;
+  inp.placeholder = ph();
   inp.className = 'row-inp';
   inp.style.display = '';
   inp.style.cssText = '';
+  /* The row's own label carries the translation. A placeholder is a hint, not a
+     name, and several readers drop it once the field holds a value. */
+  const labelEl = q('.rl', row);
+  if (labelEl) {
+    if (!labelEl.id) labelEl.id = `${rowId}-rl`;
+    inp.setAttribute('aria-labelledby', labelEl.id);
+  }
   row.insertBefore(inp, pen);
 
   function open() {
     if (row.classList.contains('editing')) return;
     row.classList.add('editing');
+    inp.placeholder = ph();
     inp.value = valEl.classList.contains('is-ph') ? '' : valEl.textContent;
     inp.focus();
     inp.select?.();
@@ -163,7 +174,7 @@ export function initInlineEdit(rowId, inputId, { type = 'text', placeholder = ''
       valEl.textContent = v;
       valEl.classList.remove('is-ph');
     } else {
-      valEl.textContent = placeholder || '';
+      valEl.textContent = ph() || '';
       valEl.classList.add('is-ph');
     }
     onCommit?.(v);

public/js/admin-widget-form.js

@@ -1,6 +1,6 @@
 import { state } from '/js/admin-state.js?v=b7731aa4';
-import { PE_SVG, CHEV_SVG, initInlineEdit } from '/js/admin-shared.js?v=d96fc091';
-import { renderWidgetConfigForm } from '/js/widget-config-form.js?v=71fe9a70';
+import { PE_SVG, CHEV_SVG, initInlineEdit } from '/js/admin-shared.js?v=8f69dad6';
+import { renderWidgetConfigForm } from '/js/widget-config-form.js?v=45bbb2b7';
 import { html, raw, setHtml } from '/js/html.js?v=c71f8903';
 import {
   sizesForView,

public/js/admin.js

@@ -1,5 +1,5 @@
-import { buildAppForm, buildFolderForm, serializeKvRows } from '/js/admin-app-form.js?v=f87415c7';
-import { checkAuth, requireLogin, wirePasswordStrength } from '/js/admin-auth.js?v=589ad7b9';
+import { buildAppForm, buildFolderForm, serializeKvRows } from '/js/admin-app-form.js?v=f236bd68';
+import { checkAuth, requireLogin, wirePasswordStrength } from '/js/admin-auth.js?v=5e6450f0';
 import { applyDrop, canJoinFolder, folderRowZone } from '/js/admin-drag-logic.js?v=ebe3e806';
 import { reorderItems, resolveAdminSection } from '/js/admin-logic.js?v=ddfc6f80';
 import {
@@ -10,10 +10,10 @@ import {
   snapshotItems,
   upsertItem,
 } from '/js/admin-save-logic.js?v=52a970d3';
-import { loadSettings, showBgFields, showBgFit, showWallpaperFile } from '/js/admin-settings.js?v=b2b67c47';
-import { ag, ap, initInlineEdit, setReauthHandler, toast } from '/js/admin-shared.js?v=d96fc091';
+import { loadSettings, showBgFields, showBgFit, showWallpaperFile } from '/js/admin-settings.js?v=f7078bc0';
+import { ag, ap, initInlineEdit, setReauthHandler, toast } from '/js/admin-shared.js?v=8f69dad6';
 import { state } from '/js/admin-state.js?v=b7731aa4';
-import { buildWidgetForm } from '/js/admin-widget-form.js?v=55e0396a';
+import { buildWidgetForm } from '/js/admin-widget-form.js?v=15aad905';
 import { html, raw, setHtml } from '/js/html.js?v=c71f8903';
 import { initI18n, LANGUAGES, t } from '/js/i18n.js?v=d056c9c5';
 import { iconChain, loadLocalIcons, resolveIcon } from '/js/icons.js?v=69c2b9bd';
@@ -30,7 +30,7 @@ import { isMobileLayout, onLayoutChange } from '/js/layout.js?v=28416a75';
 import { confirmModal, openModal as openDialog, promptModal } from '/js/modal.js?v=ff76dc56';
 import { readMode, watchSystemTheme, writeMode } from '/js/theme.js?v=fbd2d2ef';
 import { el, inp, q, qa, clr as rc, sanitizeCssUrl, setUserText, tgt } from '/js/utils.js?v=b18c93ed';
-import { normalizeColorInput } from '/js/admin-color-control.js?v=89eee5e8';
+import { normalizeColorInput } from '/js/admin-color-control.js?v=984a0b69';
 import { parseYamlTolerant, YamlLiteError } from '/js/yaml-lite.js?v=cceca788';
 
 /* A class rather than a bare media query. Some phones report a wider CSS
@@ -319,7 +319,7 @@ function mkRow(item, idx, { indent = false, childIdx = null, folderId = null } =
   const mkMove = (dir, can) => {
     const b = document.createElement('button');
     b.className = 'btn bg sm ic';
-    const lbl = dir < 0 ? 'Move up' : 'Move down';
+    const lbl = t(dir < 0 ? 'common.moveUp' : 'common.moveDown');
     b.title = lbl;
     b.setAttribute('aria-label', lbl + ': ' + (item.label || item.id || 'item'));
     b.textContent = dir < 0 ? '↑' : '↓';
@@ -1043,7 +1043,7 @@ function initAllInlineEdits() {
 
   initInlineEdit('ie-pw', 'sec-pw', {
     type: 'password',
-    placeholder: t('general.passwordPh'),
+    placeholder: () => t('general.passwordPh'),
     onCommit() {
       const bars = el('sec-pw-bars');
       const hint = el('sec-pw-hint');