refactor: extract shared form utils, add aria-live regions and reduced-motion support

DRY duplicated helpers (escapeAttr, belongsToForm, isSubmitControl,
isEditableTarget) into web/js/core/app-form-utils.js and update 7
consumers. Add aria-live="polite" to flash messages, async messages,
and search results for screen reader announcements. Add
prefers-reduced-motion support to CSS tooltips.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-13 22:28:46 +01:00
parent d9f07dcd63
commit 2b915f5a43
12 changed files with 72 additions and 119 deletions

View File

@@ -18,7 +18,7 @@ $timeouts = [
];
?>
<div class="flash-stack">
<div class="flash-stack" role="status" aria-live="polite">
<?php foreach ($messages as $message) : ?>
<?php $type = $message['type'] ?? 'info'; ?>
<?php $timeout = $timeouts[$type] ?? 5000; ?>

View File

@@ -480,7 +480,7 @@ $csrfToken = (string) ($layoutNav['csrfToken'] ?? '');
<small class="muted" data-search-empty-hint-template="<?php e(t('Tip: Use {shortcut} to focus search quickly.')); ?>"></small>
</div>
<nav id="global-search">
<ul class="app-search-results" data-global-search-results>
<ul class="app-search-results" data-global-search-results aria-live="polite">
<?php if ($canViewUsers): ?>
<?php $usersSearch = navActive('admin/users', true); ?>
<li data-search-key="users" data-search-base="<?php e(lurl('admin/users')); ?>">

View File

@@ -32,7 +32,7 @@ $allowUserTheme = allowUserTheme();
<li>
<a id="global-forward" data-tooltip-pos="bottom" data-tooltip="<?php e(t('Forward')); ?> (Alt+→)" title="<?php e(t('Forward')); ?> (Alt+→)" aria-label="<?php e(t('Forward')); ?> (Alt+→)" href="admin"><i class="bi bi-arrow-right"></i></a>
</li>
<li id="async-messages"></li>
<li id="async-messages" role="status" aria-live="polite"></li>
</ul>
<div class="app-topbar-center" aria-hidden="true"></div>
<ul class="app-topbar-right">