perf+a11y: WAL mode for SQLite, skip links, :focus-visible, .sr-only

SQLite performance (Database::__construct):
- PRAGMA journal_mode = WAL: eliminates full-DB read locks on write, safe
  for concurrent PHP-FPM workers
- PRAGMA synchronous = NORMAL: durable on commit without full fsync per write
- PRAGMA cache_size = -8000: ~8 MB page cache per connection

Accessibility foundation (WCAG 2.1 AA):
- common.css: add .sr-only utility, .skip-link (hidden until focused),
  global :focus-visible (2px purple outline, 2px offset),
  prefers-reduced-motion guard; remove bare outline:none from
  .site-search__input
- admin.css: same :focus-visible, skip-link, and motion guard scoped to
  admin purple; remove outline:none from .admin-input/.admin-select/
  .admin-textarea and .admin-filters select (both had :focus border rules
  already, so focus is still visually communicated)
- search.css: remove outline:none from .search-filter-select (already has
  :focus border-color rule)
- All 5 public pages (index, search, tfe, apropos, licence): add
  <a href="#main-content" class="skip-link"> as first child of <body>;
  add id="main-content" to <main>
- templates/admin/head.php: same skip link; aria-label="Navigation admin"
  on <nav>; id="main-content" on all 10 admin <main> elements

All 4 test suites pass (unit, integration, security, rate-limit).
This commit is contained in:
Pontoporeia
2026-03-27 13:45:01 +01:00
parent a9877b1d1d
commit 42af4644c5
23 changed files with 128 additions and 45 deletions

View File

@@ -118,7 +118,6 @@ html, body {
font-size: 0.92rem;
font-family: inherit;
padding: 0.4rem 0;
outline: none;
border-radius: 0;
transition: border-color 0.15s;
-webkit-appearance: none;
@@ -320,7 +319,6 @@ html, body {
font-size: 0.88rem;
font-family: inherit;
padding: 0.45rem 0.75rem;
outline: none;
cursor: pointer;
}
@@ -808,3 +806,42 @@ html, body {
font-size: 0.9rem;
line-height: 1.5;
}
/* ============================================================
ACCESSIBILITY UTILITIES
============================================================ */
/* Consistent keyboard-focus outline for admin interactive elements */
:focus-visible {
outline: 2px solid var(--admin-purple);
outline-offset: 2px;
}
/* Skip-to-admin-content link */
.skip-link {
position: absolute;
top: -999px;
left: 1rem;
z-index: 9999;
padding: 0.5rem 1rem;
background: var(--admin-purple);
color: #fff;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 4px 4px;
}
.skip-link:focus {
top: 0;
}
/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}