add 4 beads from live WCAG audit

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: ajrothwell

.beads/issues.jsonl

@@ -7,11 +7,14 @@
 {"id":"vue3-layerboard-5om","title":"Pictometry should move position when the address search bar is used","description":"When a user searches for an address using the address search bar, the Pictometry imagery viewer should update its position to match the searched location. Currently the map moves but Pictometry stays at its previous position.\n\nAlso: if Pictometry is closed, then the user searches an address, then reopens Pictometry, it should open at the newly searched location rather than the old position.","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-09T10:15:34.7176815-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T11:15:34.3105548-05:00","closed_at":"2026-02-10T11:15:34.3105548-05:00","close_reason":"fixed"}
 {"id":"vue3-layerboard-6mr","title":"Replace title-attribute error tooltips with accessible text in LayerPanel, LayerCheckboxSet, LayerRadioButtonSet","description":"Error indicators on layers use the title attribute for tooltips (e.g., \"Layer failed to load\"). The title attribute is not reliably announced by screen readers — many ignore it entirely or only read it in specific browse modes.\n\n**Files to change:**\n- src/components/LayerPanel.vue\n- src/components/LayerCheckboxSet.vue\n- src/components/LayerRadioButtonSet.vue\n\n**What to do:**\nFind error indicator elements that rely on title=\"...\" for conveying error state. Replace or supplement with one of:\n1. Visible error text (preferred — e.g., a small \"(error)\" or warning icon with sr-only text)\n2. aria-label on the error element\n3. An aria-describedby pointing to visually-hidden text\n\nThe key requirement is that the error state must be programmatically discoverable by assistive technology without relying on title.\n","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T11:05:06.9269666-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T11:22:18.3600197-05:00","closed_at":"2026-02-10T11:22:18.3600197-05:00","close_reason":"fixed"}
 {"id":"vue3-layerboard-7sp","title":"Add aria-hidden to decorative legend color swatches in LayerPanel, LayerCheckboxSet, LayerRadioButtonSet","description":"Legend color swatches (colored div elements next to layer names) are decorative — the layer name already provides the accessible text. Without aria-hidden=\"true\", screen readers announce these as empty or meaningless elements.\n\n**Files to change:**\n- src/components/LayerPanel.vue\n- src/components/LayerCheckboxSet.vue\n- src/components/LayerRadioButtonSet.vue\n\n**What to do:**\nFind elements with class .layer-legend-swatch (or similar colored div/span elements that display the legend color). Add aria-hidden=\"true\" to each one. These are purely visual indicators whose meaning is conveyed by the adjacent layer name text.\n","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T11:04:53.9645388-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T11:22:18.0052323-05:00","closed_at":"2026-02-10T11:22:18.0052323-05:00","close_reason":"fixed"}
+{"id":"vue3-layerboard-7tx","title":"a11y: Add prefers-reduced-motion media query","status":"open","priority":3,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T15:26:58.5322315-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T15:26:58.5322315-05:00"}
 {"id":"vue3-layerboard-86h","title":"Fix mobile layout issues","description":"Both apps have mobile layout problems: 1) Headers get messed up by the large logo. 2) Footer completely disappears on phone and map runs off bottom. Solution: Footer should disappear and its items should go into a hamburger menu in the header where the large logo currently is in non-mobile.","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-01-28T10:24:28.7286529-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-01-28T17:07:06.2028474-05:00","closed_at":"2026-01-28T17:07:06.2028474-05:00","close_reason":"fixed"}
 {"id":"vue3-layerboard-87p","title":"a11y: Add focus-visible styles to all interactive elements","description":"WCAG 2.1 AA compliance (deadline April 24, 2026).\n\nAll interactive elements in layerboard need visible focus indicators:\n- Use :focus-visible (not :focus) so mouse users don't see focus rings\n- Ensure sufficient contrast on focus outlines (WCAG requires 3:1 against adjacent colors)\n- Covers: layer checkboxes, group headers, any buttons, close/toggle controls\n","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T08:44:44.4068915-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T14:49:37.8469569-05:00","closed_at":"2026-02-10T14:49:37.8469569-05:00","close_reason":"fixed"}
 {"id":"vue3-layerboard-8ft","title":"a11y: Fix sidebar outline:none to use focus style","description":"Layerboard.vue CSS ~line 1015. The sidebar has outline:none but receives programmatic focus via tabindex=\"-1\". Add .layerboard-sidebar:focus { outline: 2px solid #0f4d90; outline-offset: -2px; }. Use :focus not :focus-visible because programmatic focus may not trigger :focus-visible in all browsers.","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T11:24:05.223181-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T15:04:24.4918625-05:00","closed_at":"2026-02-10T15:04:24.4918625-05:00","close_reason":"fixed"}
 {"id":"vue3-layerboard-8mv","title":"a11y: Focus management when panel opens/closes","description":"WCAG 2.1 AA compliance (deadline April 24, 2026).\n\nWhen the layerboard panel opens or closes, focus should be managed so keyboard/screen reader users aren't lost:\n- When panel opens: move focus to the panel or its first interactive element\n- When panel closes: return focus to the element that triggered the open (e.g. the toggle button)\n- Avoid focus trapping — users should be able to tab out of the panel\n","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T08:44:35.269104-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T14:49:37.5078544-05:00","closed_at":"2026-02-10T14:49:37.5078544-05:00","close_reason":"fixed"}
+{"id":"vue3-layerboard-984","title":"a11y: Add scope=row to popup table th elements","status":"open","priority":3,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T15:26:47.7985386-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T15:26:47.7985386-05:00"}
 {"id":"vue3-layerboard-9xs","title":"a11y: Add skip-to-main-content link","description":"WCAG 2.1 AA compliance (deadline April 24, 2026).\n\nWhen the app loads, if a keyboard user hits Tab, the first focusable element should be a \"Skip to main content\" link that jumps past the header/controls to the main content area.\n\nReference implementation: vue3-atlas App.vue — an \u003ca href=\"#main\" class=\"skip-to-main-content-link\"\u003e positioned off-screen (left: -9999px, opacity: 0) that becomes visible on :focus (left: 0, top: 0, opacity: 1). Dark blue background (#0f4d90), white underlined text, z-index 999. Target is \u003cmain id=\"main\"\u003e.\n\nThis needs to be implemented in the consuming app (openmaps), not in layerboard itself, since layerboard is a panel component — but layerboard's panel should have a proper landmark role so the skip link can target content after it.\n","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T08:43:46.7614951-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T14:49:36.1507862-05:00","closed_at":"2026-02-10T14:49:36.1507862-05:00","close_reason":"fixed"}
+{"id":"vue3-layerboard-9y9","title":"a11y: Add aria-label to legend ul elements","status":"open","priority":3,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T15:26:38.2250501-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T15:26:38.2250501-05:00"}
 {"id":"vue3-layerboard-9yf","title":"a11y: Fix nested aside landmarks - change LayerPanel root to div","description":"LayerPanel.vue line ~132 uses aside as root element, but it sits inside the aside in Layerboard.vue which already has aria-label=\"Map layers\". This creates confusing nested complementary landmarks. Change LayerPanel root from aside to div or section.","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T11:23:16.7242741-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T15:04:25.1763452-05:00","closed_at":"2026-02-10T15:04:25.1763452-05:00","close_reason":"fixed"}
 {"id":"vue3-layerboard-ccs","title":"Add keyboard navigation to popup","description":"Arrow keys to cycle through features when popup is open (Left/Up = previous, Right/Down = next). Escape to close popup. Only active when popup is visible. Don't interfere with text input fields.","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-01-28T10:23:21.2286377-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-01-28T16:45:12.7877205-05:00","closed_at":"2026-01-28T16:45:12.7877205-05:00","close_reason":"fixed"}
 {"id":"vue3-layerboard-cmm","title":"a11y: Add keyboard support to layer group headers","description":"WCAG 2.1 AA compliance (deadline April 24, 2026).\n\nLayer group headers (the clickable elements that expand/collapse groups) need to be operable via keyboard:\n- Focusable (tabindex or use a \u003cbutton\u003e)\n- Enter and Space should toggle expand/collapse\n- Arrow keys for navigating between groups (optional but nice)\n","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T08:44:15.146632-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T14:49:36.8277441-05:00","closed_at":"2026-02-10T14:49:36.8277441-05:00","close_reason":"fixed"}
@@ -21,6 +24,7 @@
 {"id":"vue3-layerboard-e2x","title":"a11y: Add aria-label to modal dialog in Layerboard.vue","description":"Layerboard.vue line ~779. The modal has role=\"dialog\" and aria-modal=\"true\" but no accessible name. Add aria-label=\"Application information\" or aria-labelledby pointing to a heading inside the modal slot.","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T11:22:27.8285503-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T15:04:23.0741114-05:00","closed_at":"2026-02-10T15:04:23.0741114-05:00","close_reason":"fixed"}
 {"id":"vue3-layerboard-ev6","title":"a11y: Add focus trap to mobile menu in Layerboard.vue","description":"Layerboard.vue lines ~631-649. Mobile menu has Escape to close and focus moves to close button on open, but no focus trap. User can Tab past the close button into content behind the overlay. Implement a keydown handler similar to handleModalKeydown that cycles Tab focus among focusable elements within .layerboard-mobile-menu.","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T11:22:36.9722383-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T15:04:23.4192527-05:00","closed_at":"2026-02-10T15:04:23.4192527-05:00","close_reason":"fixed"}
 {"id":"vue3-layerboard-fcg","title":"a11y: Add aria-expanded to sidebar toggle button in Layerboard.vue","description":"Layerboard.vue lines ~738-750. Sidebar toggle button has static aria-label=\"Toggle sidebar\" and no aria-expanded. Add :aria-expanded=\"\\!sidebarCollapsed\" and change to dynamic label :aria-label=\"sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'\".","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T11:22:55.4360826-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T15:04:23.7872186-05:00","closed_at":"2026-02-10T15:04:23.7872186-05:00","close_reason":"fixed"}
+{"id":"vue3-layerboard-g01","title":"a11y: Unavailable layer text #999 fails WCAG contrast minimum","status":"open","priority":2,"issue_type":"bug","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T15:26:28.5167879-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T15:26:28.5167879-05:00"}
 {"id":"vue3-layerboard-j3v","title":"Cyclomedia should move position when the address search bar is used","description":"When a user searches for an address using the address search bar, the Cyclomedia street-level viewer should update its position to match the searched location. Currently the map moves but Cyclomedia stays at its previous position.\n\nAlso: if Cyclomedia is closed, then the user searches an address, then reopens Cyclomedia, it should open at the newly searched location rather than the old position.","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-09T10:07:11.8995178-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T11:15:21.7148491-05:00","closed_at":"2026-02-10T11:15:21.7148491-05:00","close_reason":"fixed"}
 {"id":"vue3-layerboard-js3","title":"a11y: Add aria-expanded to layer group expand/collapse","description":"WCAG 2.1 AA compliance (deadline April 24, 2026).\n\nLayer groups in the layerboard panel can be expanded/collapsed. The clickable header element needs aria-expanded=\"true\"/\"false\" to communicate state to screen readers. Should toggle when the group is opened/closed.\n","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T08:43:56.2155-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T14:49:36.4836499-05:00","closed_at":"2026-02-10T14:49:36.4836499-05:00","close_reason":"fixed"}
 {"id":"vue3-layerboard-ks5","title":"Fix StreetSmartPHL layer panel overflow-y scroll","description":"The layer panel in StreetSmartPHL does not scroll correctly when content overflows vertically.","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-01-28T10:24:10.5283641-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-01-28T16:45:12.4178904-05:00","closed_at":"2026-01-28T16:45:12.4178904-05:00","close_reason":"fixed"}