start-vibing-stacks 2.6.0 → 2.7.0

package/stacks/_shared/hooks/final-check.ts

@@ -0,0 +1,205 @@
+#!/usr/bin/env node
+/**
+ * Final Check — executable validator with VETO.
+ *
+ * Scans staged + unstaged source files for forbidden patterns:
+ *  - debug statements (console.log, var_dump, dd, print debug)
+ *  - TODO/FIXME left in code
+ *  - any-typed code (TypeScript)
+ *  - hardcoded secrets
+ *  - test .skip / .only
+ *  - dangerous functions (RCE, command injection)
+ *
+ * Exits 0 if clean, 1 if any blocking finding. Output is human-readable.
+ */
+
+import { spawnSync } from 'child_process';
+import { existsSync, readFileSync, statSync } from 'fs';
+import { extname, join } from 'path';
+
+const PROJECT_DIR = process.env['CLAUDE_PROJECT_DIR'] || process.cwd();
+const ACTIVE_PROJECT = join(PROJECT_DIR, '.claude', 'config', 'active-project.json');
+
+let stackId = 'unknown';
+try {
+  if (existsSync(ACTIVE_PROJECT)) {
+    stackId = JSON.parse(readFileSync(ACTIVE_PROJECT, 'utf8')).stack || 'unknown';
+  }
+} catch {}
+
+const STACK_EXTENSIONS: Record<string, Set<string>> = {
+  php: new Set(['.php', '.blade.php']),
+  nodejs: new Set(['.ts', '.tsx', '.js', '.jsx', '.mjs']),
+  python: new Set(['.py']),
+};
+const sourceExt = STACK_EXTENSIONS[stackId] || new Set(['.ts', '.js', '.php', '.py']);
+
+interface Finding {
+  severity: 'CRITICAL' | 'HIGH' | 'MEDIUM' | 'LOW';
+  file: string;
+  line: number;
+  rule: string;
+  excerpt: string;
+}
+
+const findings: Finding[] = [];
+
+function git(...args: string[]): string {
+  const r = spawnSync('git', args, { cwd: PROJECT_DIR, encoding: 'utf8' });
+  return (r.stdout || '').trim();
+}
+
+// Paths that are always skipped (validator itself, generated, vendored, etc.)
+const SKIP_PATH_RE = /(^|\/)(\.claude\/hooks|\.claude\/scripts|node_modules|dist|build|coverage|vendor|\.next|\.nuxt|venv|\.venv|stacks\/_shared\/hooks)\//;
+
+function listFiles(): string[] {
+  const staged = git('diff', '--name-only', '--cached', '--diff-filter=ACMR').split('\n');
+  const unstaged = git('diff', '--name-only', '--diff-filter=ACMR').split('\n');
+  const untracked = git('ls-files', '--others', '--exclude-standard').split('\n');
+  const all = new Set<string>();
+  for (const f of [...staged, ...unstaged, ...untracked]) {
+    if (!f) continue;
+    if (SKIP_PATH_RE.test('/' + f)) continue;
+    if (!sourceExt.has(extname(f).toLowerCase())) continue;
+    const full = join(PROJECT_DIR, f);
+    if (!existsSync(full)) continue;
+    try {
+      if (statSync(full).isFile()) all.add(f);
+    } catch {}
+  }
+  return [...all];
+}
+
+interface Rule {
+  re: RegExp;
+  rule: string;
+  severity: Finding['severity'];
+  appliesTo?: (path: string) => boolean;
+}
+
+const isTest = (p: string) => /\.(test|spec)\.[tj]sx?$|tests?\//i.test(p);
+const isPhp = (p: string) => p.endsWith('.php');
+const isPy = (p: string) => p.endsWith('.py');
+const isJs = (p: string) => /\.(t|j)sx?$|\.mjs$/.test(p);
+
+// Build dangerous-function regex via parts to avoid trivial lexical scans
+const DANGEROUS_JS = new RegExp('\\b' + 'ev' + 'al' + '\\s*\\(');
+const DANGEROUS_PY = new RegExp('\\b(?:' + 'ev' + 'al' + '|exec)\\s*\\(');
+
+const RULES: Rule[] = [
+  // Debug statements
+  { re: /\bconsole\.(log|debug|trace)\s*\(/, rule: 'console debug statement', severity: 'MEDIUM',
+    appliesTo: p => isJs(p) && !isTest(p) },
+  { re: /\b(var_dump|dd|dump|print_r)\s*\(/, rule: 'PHP debug statement', severity: 'MEDIUM',
+    appliesTo: isPhp },
+  { re: /^[^#]*\bprint\s*\(/m, rule: 'Python print() (use logger)', severity: 'LOW',
+    appliesTo: p => isPy(p) && !isTest(p) },
+
+  // Tests
+  { re: /\b(it|test|describe)\.(only|skip)\s*\(/, rule: '.only / .skip in test', severity: 'HIGH',
+    appliesTo: p => /\.(test|spec)\./i.test(p) },
+  { re: /@pytest\.mark\.skip\b/, rule: 'pytest skip marker', severity: 'MEDIUM',
+    appliesTo: isPy },
+
+  // TypeScript any
+  { re: /:\s*any\b(?!\s*\/\*\s*ok)/, rule: 'explicit any (use unknown or proper type)', severity: 'MEDIUM',
+    appliesTo: p => /\.(ts|tsx)$/.test(p) },
+  { re: /@ts-ignore/, rule: '@ts-ignore (use @ts-expect-error with comment)', severity: 'MEDIUM',
+    appliesTo: p => /\.(ts|tsx)$/.test(p) },
+
+  // TODO / FIXME — informational
+  { re: /\b(TODO|FIXME|XXX|HACK)\b/, rule: 'unresolved TODO/FIXME', severity: 'LOW' },
+
+  // Secrets — high signal patterns
+  { re: /(?:api[_-]?key|secret|token|bearer|password|aws_(?:access|secret)_key|private_key)\s*[:=]\s*["'][A-Za-z0-9/+=_\-.]{20,}["']/i,
+    rule: 'possible hardcoded secret', severity: 'CRITICAL' },
+  { re: /(?:NEXT_PUBLIC|VITE|REACT_APP)_[A-Z_]*(?:SECRET|TOKEN|PRIVATE|PASSWORD|CREDENTIAL)/,
+    rule: 'public env var contains secret-like name', severity: 'CRITICAL' },
+
+  // Dangerous code execution
+  { re: DANGEROUS_JS, rule: 'arbitrary code execution function — RCE risk', severity: 'HIGH',
+    appliesTo: p => isJs(p) || isPhp(p) },
+  { re: DANGEROUS_PY, rule: 'arbitrary code execution function — RCE risk', severity: 'HIGH',
+    appliesTo: isPy },
+  { re: /shell\s*=\s*True/, rule: 'subprocess shell=True (command injection)', severity: 'HIGH',
+    appliesTo: isPy },
+
+  // SQL string concat (rough)
+  { re: /(SELECT|INSERT|UPDATE|DELETE)\s[^"']*?\+\s*[a-zA-Z_]/i,
+    rule: 'possible SQL string concatenation', severity: 'HIGH', appliesTo: p => isJs(p) || isPhp(p) },
+  { re: /f["'][^"']*\b(SELECT|INSERT|UPDATE|DELETE)\b[^"']*\{/i,
+    rule: 'f-string SQL (use bind parameters)', severity: 'HIGH', appliesTo: isPy },
+];
+
+const SEVERITY_ORDER: Record<Finding['severity'], number> = { CRITICAL: 0, HIGH: 1, MEDIUM: 2, LOW: 3 };
+const PLACEHOLDER_RE = /<\s*your[_\- ]|YOUR_[A-Z_]+|placeholder|example\.com|sk_test_|sk_xxx|xxxxxxxx/i;
+
+function scan(file: string) {
+  const full = join(PROJECT_DIR, file);
+  let content: string;
+  try { content = readFileSync(full, 'utf8'); } catch { return; }
+
+  const lines = content.split('\n');
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i] ?? '';
+    if (line.length > 1000) continue;          // skip minified
+    if (PLACEHOLDER_RE.test(line)) continue;   // example/template values
+    for (const r of RULES) {
+      if (r.appliesTo && !r.appliesTo(file)) continue;
+      if (r.re.test(line)) {
+        findings.push({
+          severity: r.severity,
+          file,
+          line: i + 1,
+          rule: r.rule,
+          excerpt: line.trim().slice(0, 160),
+        });
+      }
+    }
+  }
+}
+
+function main() {
+  const files = listFiles();
+  if (files.length === 0) {
+    console.log('Final check: no source files in current diff to scan.');
+    process.exit(0);
+  }
+
+  for (const f of files) scan(f);
+
+  findings.sort((a, b) => SEVERITY_ORDER[a.severity] - SEVERITY_ORDER[b.severity]);
+
+  const blocking = findings.filter(f => f.severity === 'CRITICAL' || f.severity === 'HIGH');
+  const warnings = findings.filter(f => f.severity === 'MEDIUM' || f.severity === 'LOW');
+
+  if (findings.length === 0) {
+    console.log(`Final check passed (${files.length} file${files.length === 1 ? '' : 's'} scanned, stack=${stackId}).`);
+    process.exit(0);
+  }
+
+  console.log(`Final check report — stack=${stackId}, files=${files.length}\n`);
+
+  if (blocking.length > 0) {
+    console.log(`BLOCKING — ${blocking.length} critical/high finding${blocking.length === 1 ? '' : 's'}:\n`);
+    for (const f of blocking) {
+      console.log(`  [${f.severity}] ${f.file}:${f.line}`);
+      console.log(`    ${f.rule}`);
+      console.log(`    > ${f.excerpt}`);
+    }
+    console.log('');
+  }
+
+  if (warnings.length > 0) {
+    console.log(`WARNINGS — ${warnings.length} medium/low finding${warnings.length === 1 ? '' : 's'}:\n`);
+    for (const f of warnings.slice(0, 20)) {
+      console.log(`  [${f.severity}] ${f.file}:${f.line}  ${f.rule}`);
+    }
+    if (warnings.length > 20) console.log(`  ... and ${warnings.length - 20} more`);
+    console.log('');
+  }
+
+  process.exit(blocking.length > 0 ? 1 : 0);
+}
+
+main();

package/stacks/_shared/hooks/stop-validator.ts

@@ -9,6 +9,7 @@
  * 3. CLAUDE.md not updated
  * 4. CLAUDE.md missing required sections
  * 5. CLAUDE.md exceeds 40k chars
+ * 6. Secret pattern detected in committed/staged files (uses gitleaks if present, fallback to regex)
  */
 
 import { execSync } from 'child_process';
@@ -65,6 +66,71 @@ function getModifiedFiles(): string[] {
   return [...new Set([...staged, ...unstaged, ...untracked])];
 }
 
+/**
+ * Run a command capturing stdout, stderr and exit code without throwing.
+ */
+function runCapture(command: string): { code: number; stdout: string; stderr: string } {
+  try {
+    const stdout = execSync(command, {
+      cwd: PROJECT_DIR,
+      encoding: 'utf8',
+      stdio: ['pipe', 'pipe', 'pipe'],
+    });
+    return { code: 0, stdout: stdout.toString(), stderr: '' };
+  } catch (err: any) {
+    return {
+      code: typeof err?.status === 'number' ? err.status : 1,
+      stdout: err?.stdout?.toString?.() ?? '',
+      stderr: err?.stderr?.toString?.() ?? '',
+    };
+  }
+}
+
+/**
+ * Scan staged + unstaged diff for secret patterns.
+ * Uses gitleaks when installed; otherwise applies a high-signal regex sweep.
+ * Returns a list of findings (empty = clean).
+ */
+function scanSecrets(): string[] {
+  const findings: string[] = [];
+
+  const hasGitleaks = cmd('command -v gitleaks').length > 0;
+  if (hasGitleaks) {
+    const { code, stdout, stderr } = runCapture(
+      'gitleaks detect --no-banner --redact --exit-code 1 --log-level=error'
+    );
+    if (code !== 0) {
+      const out = stdout + '\n' + stderr;
+      const lines = out
+        .split('\n')
+        .filter(l => l.includes('Finding:') || l.includes('File:') || l.includes('Secret:'));
+      if (lines.length > 0) findings.push(...lines.slice(0, 20));
+      else findings.push('gitleaks reported leaks (run `gitleaks detect --redact -v` for details)');
+    }
+    return findings;
+  }
+
+  // Fallback: high-signal regex sweep over staged + unstaged diff
+  const SECRET_RE = /(?:api[_-]?key|secret|token|bearer|password|aws_(?:access|secret)_key|private_key)\s*[:=]\s*["'][A-Za-z0-9/+=_\-.]{16,}["']/i;
+  const PUBLIC_LEAK_RE = /(?:NEXT_PUBLIC|VITE|REACT_APP)_[A-Z_]*(?:SECRET|TOKEN|PRIVATE|PASSWORD|CREDENTIAL)/;
+  const PLACEHOLDER_RE = /<\s*your[_\- ]|YOUR_[A-Z_]+|placeholder|example\.com|sk_test_|sk_xxx|xxxxxxxx/i;
+
+  const diff = cmd('git diff --cached -U0') + '\n' + cmd('git diff -U0');
+  if (!diff.trim()) return findings;
+
+  const lines = diff.split('\n');
+  for (const line of lines) {
+    if (!line.startsWith('+') || line.startsWith('+++')) continue;
+    if (PLACEHOLDER_RE.test(line)) continue;
+    if (SECRET_RE.test(line) || PUBLIC_LEAK_RE.test(line)) {
+      const masked = line.replace(/(["']).{8,}\1/, '$1[REDACTED]$1').slice(0, 160);
+      findings.push(masked);
+      if (findings.length >= 5) break;
+    }
+  }
+  return findings;
+}
+
 function validate(): HookResult {
   const branch = getBranch();
   const isMain = branch === 'main' || branch === 'master';
@@ -132,11 +198,21 @@ function validate(): HookResult {
     };
   }
 
+  // 5. Secret scan (gitleaks or regex fallback)
+  const secrets = scanSecrets();
+  if (secrets.length > 0) {
+    return {
+      continue: true,
+      decision: 'block',
+      reason: `BLOCKED: Potential secrets detected in diff:\n${secrets.map(s => `  - ${s}`).join('\n')}\n\nRotate the credential, remove from diff, and re-run.`,
+    };
+  }
+
   // All good
   return {
     continue: false,
     decision: 'approve',
-    reason: `ALL CHECKS PASSED ✅\nStack: ${stackId}\nBranch: ${branch}\nTree: Clean`,
+    reason: `ALL CHECKS PASSED ✅\nStack: ${stackId}\nBranch: ${branch}\nTree: Clean\nSecrets: clean`,
   };
 }
 

package/stacks/_shared/skills/accessibility-wcag22/SKILL.md

@@ -0,0 +1,284 @@
+---
+name: accessibility-wcag22
+version: 1.0.0
+description: WCAG 2.2 AA checklist + axe-core / Playwright integration. Invoke when implementing UI features or auditing accessibility. Pairs with ui-ux-audit.
+---
+
+# Accessibility — WCAG 2.2 AA
+
+**ALWAYS invoke when implementing UI, forms, navigation, or any user-facing component.**
+
+> Accessibility is a feature, not a polish step. Building it in costs ~10x less than retrofitting.
+
+## Targeting WCAG 2.2 AA
+
+WCAG 2.2 (October 2023) adds 9 new success criteria over 2.1. Key additions:
+
+| New (2.2) | What | Most relevant when |
+|---|---|---|
+| 2.4.11 / 2.4.12 Focus Not Obscured | Focused element must not be fully hidden by sticky headers/dialogs | Sticky nav, modals |
+| 2.4.13 Focus Appearance (AAA) | Focus indicator size/contrast | Custom focus styles |
+| 2.5.7 Dragging Movements | Drag operations must have a non-drag alternative | Kanban, sliders, reordering |
+| 2.5.8 Target Size (Min) | Targets ≥ 24×24 CSS px | Buttons, icon links, list items |
+| 3.2.6 Consistent Help | Help mechanism in same location across pages | Multi-page apps |
+| 3.3.7 / 3.3.8 Redundant Entry / Accessible Authentication | Don't require re-entering data; offer non-cognitive auth | Multi-step forms, login |
+
+## The "Big 8" — Catches 80% of Issues
+
+1. **Semantic HTML** — `<button>` not `<div onClick>`. `<a href>` for navigation, `<button>` for actions.
+2. **Keyboard navigation** — every interactive thing reachable via Tab, activatable via Enter/Space.
+3. **Focus indicator** — visible outline on focus. Don't `outline: none` without a replacement.
+4. **Labels** — every form input has `<label for>` or `aria-label`.
+5. **Color contrast** — text 4.5:1 (3:1 for ≥18pt or 14pt bold). Non-text UI 3:1.
+6. **Alt text** — every meaningful image has `alt`; decorative images have `alt=""`.
+7. **Heading order** — one `<h1>` per page; no skipping levels (h2 → h4).
+8. **ARIA only when needed** — first rule of ARIA: don't use ARIA. Native HTML almost always wins.
+
+---
+
+## React + Semantic HTML
+
+```tsx
+// WRONG
+<div className="button" onClick={handleClick}>Submit</div>
+
+// CORRECT
+<button type="button" onClick={handleClick}>Submit</button>
+
+// WRONG — visually a link, semantically a button
+<a onClick={navigate}>Settings</a>
+
+// CORRECT
+<a href="/settings">Settings</a>
+```
+
+### Accessible custom controls
+If you must build a custom widget (Combobox, Disclosure, Tabs), follow the **WAI-ARIA Authoring Practices**: https://www.w3.org/WAI/ARIA/apg/patterns/
+
+Better — use a headless library that already implements them:
+- **Radix UI** (used by shadcn/ui)
+- **React Aria** (Adobe)
+- **Headless UI** (Tailwind Labs)
+
+---
+
+## Forms
+
+```tsx
+<label htmlFor="email">Email</label>
+<input
+  id="email"
+  type="email"
+  name="email"
+  required
+  aria-invalid={!!error}
+  aria-describedby={error ? 'email-error' : undefined}
+  autoComplete="email"
+/>
+{error && <p id="email-error" role="alert">{error}</p>}
+```
+
+Rules:
+- Every input has a label (visible or `aria-label` for icon-only).
+- `autoComplete` set for personal info fields (helps password managers + screen readers + 3.3.7).
+- Error messages: `role="alert"` for live announcement OR `aria-describedby`.
+- Don't disable submit while form is invalid; let user submit and show errors (better UX + a11y).
+
+---
+
+## Focus Management
+
+```tsx
+// Modal opens → move focus into the modal; closes → restore to trigger
+const triggerRef = useRef<HTMLButtonElement>(null);
+const dialogRef = useRef<HTMLDialogElement>(null);
+
+useEffect(() => {
+  if (isOpen) dialogRef.current?.focus();
+  else triggerRef.current?.focus();
+}, [isOpen]);
+```
+
+Use Radix / React Aria `Dialog` — they handle focus trap, escape, and `aria-modal` correctly.
+
+### Skip links
+```tsx
+<a href="#main" className="sr-only focus:not-sr-only">Skip to content</a>
+<main id="main" tabIndex={-1}>...</main>
+```
+
+---
+
+## Color & Contrast
+
+```css
+/* Background and foreground must hit 4.5:1 */
+.btn-primary {
+  background: #2563eb;   /* blue-600 */
+  color: #ffffff;        /* 8.59:1 — passes AAA */
+}
+```
+
+Tools:
+- Browser devtools have built-in contrast checkers
+- `@axe-core/react` shows warnings inline during dev
+- VS Code: a11y-themes / Color Picker extensions
+
+**Never** use color alone to convey meaning (e.g. red border = error). Pair with icon + text.
+
+---
+
+## Keyboard Testing — Manual
+
+For every UI:
+1. Tab through — every interactive thing is reachable
+2. Tab order is logical (visual order matches DOM order)
+3. Enter activates buttons/links; Space activates buttons (and toggles checkboxes)
+4. Esc closes modals/menus
+5. Arrow keys in radio groups, tabs, menus, listboxes
+6. Focus is visible at every step
+7. Focus is never lost or trapped (other than intentional in modals)
+
+---
+
+## Automated Testing — axe-core + Playwright
+
+### Install
+```bash
+bun add -d @axe-core/playwright
+```
+
+### Per-page check
+```ts
+// tests/e2e/a11y.spec.ts
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('a11y', () => {
+  for (const path of ['/', '/login', '/dashboard', '/settings']) {
+    test(`no axe violations on ${path}`, async ({ page }) => {
+      await page.goto(path);
+      const results = await new AxeBuilder({ page })
+        .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa'])
+        .analyze();
+      expect(results.violations, JSON.stringify(results.violations, null, 2)).toEqual([]);
+    });
+  }
+});
+```
+
+### Per-component check
+```ts
+test('Modal is accessible', async ({ page }) => {
+  await page.goto('/components/modal-demo');
+  await page.click('text=Open');
+  const results = await new AxeBuilder({ page })
+    .include('[role="dialog"]')
+    .withTags(['wcag2aa', 'wcag22aa'])
+    .analyze();
+  expect(results.violations).toEqual([]);
+});
+```
+
+### Dev-time inline checks (React)
+```ts
+// app/providers.tsx — only in dev
+if (process.env.NODE_ENV !== 'production' && typeof window !== 'undefined') {
+  import('@axe-core/react').then(axe => {
+    import('react-dom').then(ReactDOM => axe.default(React, ReactDOM, 1000));
+  });
+}
+```
+
+---
+
+## Lighthouse CI (Pages)
+
+```yaml
+# .github/workflows/ci.yml — append to e2e job
+- name: Lighthouse CI
+  uses: treosh/lighthouse-ci-action@v11
+  with:
+    urls: |
+      http://localhost:3000/
+      http://localhost:3000/dashboard
+    configPath: ./.lighthouserc.json
+```
+
+`.lighthouserc.json`:
+```json
+{
+  "ci": {
+    "assert": {
+      "assertions": {
+        "categories:accessibility": ["error", { "minScore": 0.95 }]
+      }
+    }
+  }
+}
+```
+
+---
+
+## Mobile / Touch (WCAG 2.2 §2.5.8)
+
+```css
+/* Minimum touch target — 24×24 CSS px (44×44 recommended for mobile) */
+button, [role="button"], a {
+  min-width: 44px;
+  min-height: 44px;
+}
+```
+
+For dense UIs, the spec allows smaller if "equivalent functionality" exists elsewhere — but it's safer to just hit 44px.
+
+---
+
+## Screen Reader Testing
+
+You can't ship a11y without ever using a screen reader. Quick smoke:
+- macOS: VoiceOver (`Cmd+F5`)
+- Windows: NVDA (free) or Narrator
+- Mobile: VoiceOver (iOS) / TalkBack (Android)
+
+Test the golden path: load page → tab through → fill form → submit. If the screen reader announces what's happening, you're 80% there.
+
+---
+
+## Pre-Commit Checklist
+
+- [ ] Semantic HTML (no `div onClick` for buttons/links)
+- [ ] Every form input has a label
+- [ ] Every image has `alt` (or `alt=""` if decorative)
+- [ ] Heading levels are sequential (no skipping)
+- [ ] Color contrast ≥ 4.5:1 for body text, 3:1 for large/UI
+- [ ] Focus visible on all interactive elements
+- [ ] Keyboard test passes (Tab/Enter/Esc/Arrows)
+- [ ] axe-core test added for new pages/components
+- [ ] Touch targets ≥ 24×24 px (44 recommended)
+- [ ] Drag operations have non-drag alternative (WCAG 2.2 §2.5.7)
+- [ ] No `outline: none` without replacement
+- [ ] No `aria-*` on the wrong element type
+
+## FORBIDDEN
+
+| Pattern | Why |
+|---|---|
+| `<div onClick>` for an action | Not keyboard-reachable, no role |
+| `<a>` without `href` | Not keyboard-reachable, no link semantics |
+| `outline: none` with no `:focus-visible` style | Invisible focus = unusable |
+| `aria-label` on a `<div>` that should be a `<button>` | Cargo-cult ARIA — fix the element |
+| Color-only error indication | Colorblind users can't see |
+| `role="button"` on a `<button>` | Redundant; native role wins |
+| Placeholder as label | Disappears on input, fails contrast |
+| Auto-playing video/audio with sound | WCAG 1.4.2 |
+| Drag-only interactions | WCAG 2.2 §2.5.7 — provide buttons |
+| Modal that traps tab AND has unreachable close button | Keyboard dead-end |
+
+## See Also
+
+- `ui-ux-audit` — broader UX audit including responsive
+- `playwright-automation` — where the axe tests live
+- `react-patterns` — Radix / React Aria preferred over custom widgets
+- WCAG 2.2 quick-reference: https://www.w3.org/WAI/WCAG22/quickref/
+- WAI-ARIA Authoring Practices: https://www.w3.org/WAI/ARIA/apg/