Skip to content

Commit 924cca8

Browse files
ajrothwellclaude
andcommitted
fix: a11y - skip link contrast error, bump map-core and text-field
Remove opacity from skip-to-main-content link (left:-9999px already hides it). Bump map-core to 0.0.3-beta.6 and text-field to 1.1.1-beta.1 for form label fixes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent a425a67 commit 924cca8

File tree

5 files changed

+1513
-1939
lines changed

5 files changed

+1513
-1939
lines changed

.beads/issues.jsonl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,3 +43,4 @@
4343
{"id":"vue3-layerboard-ups","title":"Add for/id pairing between opacity label and range input in LayerPanel, LayerCheckboxSet, LayerRadioButtonSet","description":"The opacity slider has a visual \u003clabel class=\"opacity-label\"\u003e element as a sibling of the \u003cinput type=\"range\"\u003e, but they are not programmatically associated via for/id. Screen readers already get the accessible name from aria-label on the input, so this is low priority, but proper label association is better practice and gives users a larger click target.\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:**\n1. Add a unique id to each opacity \u003cinput type=\"range\"\u003e (e.g., id=\"opacity-slider-{layerId}\" or similar, using a dynamic value to avoid collisions when multiple sliders exist)\n2. Add a matching for=\"opacity-slider-{layerId}\" to the \u003clabel class=\"opacity-label\"\u003e element\n3. Keep the existing aria-label on the input — the for/id pairing supplements it, doesn't replace it\n","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T11:05:18.0840731-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T11:22:18.7067287-05:00","closed_at":"2026-02-10T11:22:18.7067287-05:00","close_reason":"fixed"}
4444
{"id":"vue3-layerboard-vee","title":"PlowPHL layers get fuzzy when zooming in - missing scale-based layer switching","description":"## Problem\nIn the streetsmartphl example, PlowPHL layers (Treated Street Status, etc.) look correct when zoomed out, but when zooming in the layer becomes fuzzy/pixelated. The graphics don't re-render at higher resolution - they just scale up the low-zoom tiles.\n\n## Root Cause\nThe vue3-layerboard implementation only uses tiled MapServer endpoints at all zoom levels. The legacy StreetSmartPHL app has a two-layer approach that switches between:\n- **zoomOut** (`tiled: true`): MapServer `/tile/` endpoint - fast, pre-cached tiles\n- **zoomIn** (`tiled: false`): Dynamic WebMap layers fetched from ArcGIS with full resolution\n\nThe legacy app gets `minScale`/`maxScale` from the ArcGIS REST API for each layer, watches the current map scale, and automatically swaps between the tiled and dynamic versions based on zoom level.\n\n## Affected Layers\nAll PlowPHL tiled layers in `examples/streetsmartphl/src/App.vue` (lines 193-224):\n- plowTreatedStreetsStatus\n- plowNotTreatedStreets \n- plowConditional\n- plowHighways\n\nURLs: `https://streetsgis.phila.gov/arcgis/rest/services/PlowPHL/{service}/MapServer`\n\n## Fix Required\nImplement the same two-layer approach with scale-based switching that the legacy app has:\n\n1. For each PlowPHL layer, define two versions:\n - zoomOut: current tiled MapServer approach\n - zoomIn: dynamic WebMap layer (need to find/add these to a WebMap or use /export/ endpoint)\n\n2. Fetch layer definitions with minScale/maxScale from ArcGIS REST API\n\n3. Watch map scale changes and toggle between the two layer versions based on the scale thresholds\n\n## Reference\nLegacy implementation in StreetSmartPHL:\n- `src/topics/plow.js` - topic-tiled-layers config with zoomIn/zoomOut pairs\n- `src/components/TopicTiledLayers.vue` - handles the switching logic\n- `src/components/Checkbox.vue` - shouldBeDisabled() checks minScale/maxScale\n\n## Testing Notes\nRequires an active snow event to test. May need to mock the storms API response to simulate a deployment.","notes":"**Mock in place for testing:** Line 530 in `examples/streetsmartphl/src/App.vue` has been changed to default to 'Full Deployment' when no storm data exists. This allows testing PlowPHL layers without an active snow event. Revert this line before committing any fix:\n```typescript\n// Current (mocked):\nreturn stormsData?.Deployment || 'Full Deployment' // MOCK: remove before committing\n\n// Original:\nreturn stormsData?.Deployment || ''\n```\n## Implementation Complete (2026-01-29)\n\nScale-based layer switching implemented on branch `wip/plowphl-zoom-fix`:\n- Layers with `scaleBasedRendering: true` fetch MapServer metadata for scale thresholds\n- Zoomed out: uses /tile/ endpoint (fast, cached)\n- Zoomed in: uses /export/ endpoint (dynamic, sharp)\n\n**Testing limitation:** Can't fully verify without active snow event. Export requests return 200 OK but images are empty (no current data on server). Mock removed - awaiting next snow event to verify.","status":"open","priority":2,"issue_type":"bug","owner":"rothwell.andy@gmail.com","created_at":"2026-01-29T12:57:20.0734585-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-01-29T14:02:39.6851907-05:00"}
4545
{"id":"vue3-layerboard-vtj","title":"Offset popup placement so it doesn't obscure clicked feature","description":"Currently the popup is placed exactly at the click coordinates, which means it sits directly on top of the clicked feature and obscures it. The old (Vue 2) version offset the popup upward by some pixels so the popup's pointer/tail was near the click point but the popup body was above it. That made it much easier to see the feature you selected (e.g. a planning district polygon). Should add a vertical offset so the popup doesn't cover the thing you just clicked.","status":"closed","priority":3,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-12T09:55:22.2328703-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-12T10:33:57.2782418-05:00","closed_at":"2026-02-12T10:33:57.2782418-05:00","close_reason":"Closed"}
46+
{"id":"vue3-layerboard-wax","title":"Census Block Groups - all blocks show as group 1, 2, or 3","description":"Census Block Groups - 2020 layer appears to only show block groups numbered 1, 2, or 3. All census block groups across the city display one of these three values, which seems wrong — there should be a much wider range of block group numbers. Investigate whether this is a data issue from the ArcGIS service, a popup field mapping problem, or a renderer/symbology issue in layerboard.","status":"open","priority":3,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-12T13:54:26.593089-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-12T13:54:45.2856367-05:00"}

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@
4646
"dependencies": {
4747
"@phila/phila-ui-core": "2.3.1-beta.0",
4848
"@phila/phila-ui-link": "1.0.2-beta.0",
49-
"@phila/phila-ui-map-core": "0.0.3-beta.5",
50-
"@phila/phila-ui-text-field": "1.1.1-beta.0"
49+
"@phila/phila-ui-map-core": "0.0.3-beta.6",
50+
"@phila/phila-ui-text-field": "1.1.1-beta.1"
5151
},
5252
"devDependencies": {
5353
"@eslint/js": "^9.39.2",

0 commit comments

Comments
 (0)