Skip to content

Commit 5fad93a

Browse files
ajrothwellclaude
andcommitted
close bead u1d: intro modal implemented in StreetSmartPHL
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 6823120 commit 5fad93a

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

.beads/issues.jsonl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
{"id":"vue3-layerboard-qlg","title":"a11y: Add proper labels and aria-checked to layer checkboxes","description":"WCAG 2.1 AA compliance (deadline April 24, 2026).\n\nLayer checkboxes in the panel need:\n- Proper \u003clabel\u003e elements associated with each checkbox (or aria-label)\n- aria-checked reflecting toggle state\n- Labels should include the layer name so screen readers announce what's being toggled\n","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T08:44:05.6379166-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T14:49:37.1646959-05:00","closed_at":"2026-02-10T14:49:37.1646959-05:00","close_reason":"fixed"}
4040
{"id":"vue3-layerboard-rfm","title":"Migrate StreetSmartPHL to use framework package","description":"Create vue3-streetsmartphl repo, install @phila/vue3-layerboard, create topic Vue components, migrate from old Vue 2 layerboard patterns, test and deploy.","status":"closed","priority":3,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-01-28T10:25:36.3872897-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T17:02:24.691448-05:00","closed_at":"2026-02-10T17:02:24.691448-05:00","close_reason":"Closed"}
4141
{"id":"vue3-layerboard-tpi","title":"a11y: Add landmark role and aria-label to panel","description":"WCAG 2.1 AA compliance (deadline April 24, 2026).\n\nThe layerboard panel needs:\n- A landmark role (e.g. role=\"region\" or \u003cnav\u003e) so screen readers can identify and skip to/past it\n- An aria-label describing the panel (e.g. \"Map layer controls\")\n- This helps keyboard users navigate the page structure and supports the skip-to-main-content link pattern\n","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T08:44:24.5980658-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T14:49:35.8077437-05:00","closed_at":"2026-02-10T14:49:35.8077437-05:00","close_reason":"fixed"}
42-
{"id":"vue3-layerboard-u1d","title":"Add intro modal that auto-opens on first visit with 'do not show again' checkbox (localStorage). StreetSmartPHL needs this - the old version had it but vue3 doesn't. The #modal slot exists but only opens on click. Need a prop like :show-intro-modal=true that auto-opens the modal on mount, plus a 'Do not show again' checkbox that persists to localStorage.","status":"open","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-17T10:54:00.4128868-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-17T10:54:00.4128868-05:00"}
42+
{"id":"vue3-layerboard-u1d","title":"Add intro modal that auto-opens on first visit with 'do not show again' checkbox (localStorage). StreetSmartPHL needs this - the old version had it but vue3 doesn't. The #modal slot exists but only opens on click. Need a prop like :show-intro-modal=true that auto-opens the modal on mount, plus a 'Do not show again' checkbox that persists to localStorage.","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-17T10:54:00.4128868-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-17T12:28:21.932247-05:00","closed_at":"2026-02-17T12:28:21.932247-05:00","close_reason":"Closed"}
4343
{"id":"vue3-layerboard-up1","title":"a11y: Add aria-live for loading/error state changes","description":"Affects Layerboard.vue (lines ~662-677, loading/error/loaded transitions via v-if), LayerPanel.vue (lines ~205-217, layer loading/error indicators), LayerCheckboxSet.vue (lines ~132-141), LayerRadioButtonSet.vue (lines ~133-142). Add role=\"status\" to loading and error span elements so screen readers announce state changes. For Layerboard.vue, wrap the loading/error area with aria-live=\"polite\" or add a visually hidden live region.","status":"closed","priority":2,"issue_type":"task","owner":"rothwell.andy@gmail.com","created_at":"2026-02-10T11:22:46.1722759-05:00","created_by":"rothwell.andy@gmail.com","updated_at":"2026-02-10T15:16:10.815623-05:00","closed_at":"2026-02-10T15:16:10.815623-05:00","close_reason":"Closed"}
4444
{"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"}
4545
{"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"}

0 commit comments

Comments
 (0)