Skip to content

Commit 3a8f54f

Browse files
SableRafclaude
andcommitted
Add ARIA landmarks and fix marker label timing on page load
- Wrap header controls (burger, submit link, theme toggle) in role="banner" - Use MutationObserver on marker pane to apply aria-labels on initial load, replacing the unreliable setTimeout which ran before Leaflet rendered markers Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent fd68722 commit 3a8f54f

1 file changed

Lines changed: 17 additions & 2 deletions

File tree

pcd-website/src/components/MapView.vue

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@ onMounted(async () => {
230230
if (attribution) {
231231
mapContainer.appendChild(attribution);
232232
}
233+
233234
});
234235
235236
// Try to center on visitor's location, fall back to world view
@@ -327,7 +328,19 @@ onMounted(async () => {
327328
clusters.forEach(el => pane.insertBefore(el, pane.firstChild));
328329
}
329330
330-
setTimeout(() => { applyMarkerLabels(); sortMarkerPane(); }, 0);
331+
// Watch the marker pane for DOM changes on initial load — marker elements are
332+
// created lazily by the cluster group after the first setView, so we can't
333+
// rely on a fixed timeout. Disconnect after the first batch of markers appear.
334+
const markerPane = map.getPanes().markerPane;
335+
if (markerPane) {
336+
const observer = new MutationObserver(() => {
337+
applyMarkerLabels();
338+
sortMarkerPane();
339+
observer.disconnect();
340+
});
341+
observer.observe(markerPane, { childList: true, subtree: false });
342+
}
343+
331344
clusterGroup.on('animationend', () => { applyMarkerLabels(); sortMarkerPane(); });
332345
333346
// When a cluster spiderfies, move its child marker elements immediately after
@@ -399,6 +412,7 @@ onUnmounted(() => {
399412
</script>
400413

401414
<template>
415+
<div role="banner">
402416
<button
403417
id="burger-btn"
404418
:aria-expanded="listOpen"
@@ -411,7 +425,6 @@ onUnmounted(() => {
411425
id="host-btn"
412426
:href="SUBMIT_EVENT_URL"
413427
>Submit your event</a>
414-
<NodePanel :node="selectedNode" @close="closePanel" />
415428
<button
416429
id="theme-toggle"
417430
:aria-label="currentStyle === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'"
@@ -426,6 +439,8 @@ onUnmounted(() => {
426439
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
427440
</svg>
428441
</button>
442+
</div>
443+
<NodePanel :node="selectedNode" @close="closePanel" />
429444
<NodeList
430445
:nodes="nodes"
431446
:open="listOpen"

0 commit comments

Comments
 (0)