a11y: contrast fix, aria-labels, scope=row, prefers-reduced-motion

- Change #999/#888 to #767676 for WCAG AA 4.5:1 contrast (g01)
- Add aria-label to legend <ul> elements (9y9)
- Add scope="row" to popup table <th> elements (984)
- Add prefers-reduced-motion media queries for animations (7tx)
- Bump @phila/phila-ui-map-core to 0.0.3-beta.4

v3.0.0-beta.12

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

Author: ajrothwell

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/layerboard",
-  "version": "3.0.0-beta.11",
+  "version": "3.0.0-beta.12",
   "type": "module",
   "description": "Vue 3 + MapLibre mapping framework for City of Philadelphia applications",
   "main": "./dist/index.js",
@@ -44,7 +44,7 @@
   "dependencies": {
     "@phila/phila-ui-core": "2.3.1-beta.0",
     "@phila/phila-ui-link": "1.0.2-beta.0",
-    "@phila/phila-ui-map-core": "0.0.3-beta.3",
+    "@phila/phila-ui-map-core": "0.0.3-beta.4",
     "@phila/phila-ui-text-field": "1.1.1-beta.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -196,6 +196,7 @@ function onOpacityChange(layerId: string, event: Event) {
       <ul
         v-if="shouldShowLegendBox(layer) && isVisible(layer.id) && layer.legend?.length"
         class="layer-legend"
+        :aria-label="'Legend for ' + getLayerDisplayName(layer)"
       >
         <li
           v-for="(item, index) in layer.legend"
@@ -306,7 +307,7 @@ function onOpacityChange(layerId: string, event: Event) {
 
 /* Unavailable layer styles */
 .layer-unavailable {
-  color: #999;
+  color: #767676;
   cursor: not-allowed;
 }
 
@@ -316,7 +317,7 @@ function onOpacityChange(layerId: string, event: Event) {
 
 .zoom-indicator {
   font-size: 11px;
-  color: #888;
+  color: #767676;
   font-style: italic;
   margin-left: 4px;
 }

src/components/LayerCheckboxSet.vue

@@ -252,6 +252,7 @@ function onOpacityChange(layerId: string, event: Event) {
         <ul
           v-if="showLegend && isVisible(layer.config.id) && layer.config.legend?.length"
           class="layer-legend"
+          :aria-label="'Legend for ' + layer.config.title"
         >
           <li
             v-for="(item, index) in layer.config.legend"
@@ -436,7 +437,7 @@ function onOpacityChange(layerId: string, event: Event) {
 
 /* Unavailable layer styles (zoom range) */
 .layer-unavailable {
-  color: #999;
+  color: #767676;
   cursor: not-allowed;
 }
 
@@ -446,7 +447,7 @@ function onOpacityChange(layerId: string, event: Event) {
 
 .zoom-indicator {
   font-size: 11px;
-  color: #888;
+  color: #767676;
   font-style: italic;
   margin-left: 4px;
 }

src/components/LayerPanel.vue

@@ -169,6 +169,7 @@ function onOpacityChange(layerId: string, event: Event) {
       <ul
         v-if="shouldShowLegendBox(layer) && isVisible(layer.id) && layer.legend?.length"
         class="layer-legend"
+        :aria-label="'Legend for ' + getLayerDisplayName(layer)"
       >
         <li
           v-for="(item, index) in layer.legend"
@@ -267,7 +268,7 @@ function onOpacityChange(layerId: string, event: Event) {
 
 /* Unavailable layer styles */
 .layer-unavailable {
-  color: #999;
+  color: #767676;
   cursor: not-allowed;
 }
 
@@ -277,7 +278,7 @@ function onOpacityChange(layerId: string, event: Event) {
 
 .zoom-indicator {
   font-size: 11px;
-  color: #888;
+  color: #767676;
   font-style: italic;
   margin-left: 4px;
 }

src/components/LayerRadioButtonSet.vue

@@ -1430,4 +1430,15 @@ html, body {
   white-space: nowrap;
   border: 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .layerboard-spinner {
+    animation: none;
+  }
+
+  .layerboard-sidebar-toggle,
+  .layerboard-sidebar {
+    transition: none;
+  }
+}
 </style>

src/components/Layerboard.vue

@@ -962,7 +962,7 @@ const popupHtml = computed(() => {
     html += `<table class="popup-table" aria-label="${escapeHtml(popupTitle.value)}">`;
     for (const field of feature.popupConfig.fields) {
       const value = formatFieldValue(feature.properties[field.field], field.format);
-      html += `<tr><th>${escapeHtml(field.label)}</th><td>${escapeHtml(value)}</td></tr>`;
+      html += `<tr><th scope="row">${escapeHtml(field.label)}</th><td>${escapeHtml(value)}</td></tr>`;
     }
     html += `</table>`;
   } else {

src/components/MapPanel.vue

@@ -190,4 +190,14 @@ function toggleAccordion() {
 .topic-accordion.is-expanded .topic-header {
   background: #e8e8e8;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .topic-header {
+    transition: none;
+  }
+
+  .topic-chevron {
+    transition: none;
+  }
+}
 </style>