feat(a11y): WCAG 2.2 accessibility fixes across four areas
- modal/_validateField: set aria-invalid on invalid inputs so screen readers announce field errors; login.js mirrors this for username/password fields - color pickers (notes, calendar): wrap swatches in role="radiogroup" with aria-labelledby, add aria-checked per swatch, localized aria-labels instead of hex values, roving tabindex with Arrow/Enter/Space keyboard navigation - nav badges: badge spans get aria-hidden="true"; nav link aria-label updated to include overdue count (tasks) or pending reminder count (reminders) - router: remove aria-live from <main> (caused full page re-reads on nav); add dedicated #route-announcer sr-only region with aria-live=polite + aria-atomic, announces page label 50ms after render completes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1092,6 +1092,13 @@ function updateOverdueBadge() {
|
||||
}).length;
|
||||
|
||||
document.querySelectorAll('[data-route="/tasks"] .nav-badge').forEach((el) => el.remove());
|
||||
document.querySelectorAll('[data-route="/tasks"]').forEach((navItem) => {
|
||||
const baseLabel = t('tasks.title');
|
||||
navItem.setAttribute('aria-label', overdue > 0
|
||||
? t('tasks.navLabelOverdue', { count: overdue })
|
||||
: baseLabel
|
||||
);
|
||||
});
|
||||
if (overdue > 0) {
|
||||
document.querySelectorAll('[data-route="/tasks"]').forEach((navItem) => {
|
||||
let anchor = navItem.querySelector('.nav-item__icon-wrap');
|
||||
@@ -1108,6 +1115,7 @@ function updateOverdueBadge() {
|
||||
}
|
||||
const badge = document.createElement('span');
|
||||
badge.className = 'nav-badge';
|
||||
badge.setAttribute('aria-hidden', 'true');
|
||||
badge.textContent = String(overdue);
|
||||
anchor.appendChild(badge);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user