From 88cd390b2736e40fd9efb9ea6b1ae9cbc17259c0 Mon Sep 17 00:00:00 2001
From: Doxa Maps <maps@doxa.example>
Date: Tue, 29 Sep 2026 03:36:01 +0000
Subject: [PATCH] PPLR Data Maps: on a phone every view tab is on screen, and
 the legend's collapse button is a real target in the reader's language
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

rega at 390 px: the tab strip ran past the right edge with no scroll cue, and the flat legend's collapse button measured 19×15 with an English title in every locale. On a phone the tabs wrap (the brand steps aside); the button is 24 px and named by the shared aria keys.
---
 plugin-designs/pplr-data-maps/pplr-data-maps.vue            | 6 +++++-
 plugin-designs/pplr-data-maps/src/components/FlatLegend.vue | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/plugin-designs/pplr-data-maps/pplr-data-maps.vue b/plugin-designs/pplr-data-maps/pplr-data-maps.vue
index c0cf78b8e..23a3c8dd7 100644
--- a/plugin-designs/pplr-data-maps/pplr-data-maps.vue
+++ b/plugin-designs/pplr-data-maps/pplr-data-maps.vue
@@ -77,7 +77,11 @@ useShadowStyles(
   'font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;padding:7px 11px;border-radius:999px}' +
   '.pdm-seg button.on{background:#92b195;border-color:#92b195;color:#fff}' +
   '.pdm-seg button:hover:not(.on){border-color:#92b195}' +
-  '.pdm-stage{flex:1 1 0;position:relative;min-height:0}',
+  '.pdm-stage{flex:1 1 0;position:relative;min-height:0}' +
+  // PHONE (rega, 390×844): the view tabs ran past the right edge with no scroll cue ("Semantic Trees" at
+  // x=460). On a phone the brand steps aside and the tabs wrap, so every view is on screen.
+  '@media (max-width:640px){.pdm-bar{flex-wrap:wrap;overflow-x:visible;padding:6px 8px;gap:6px}' +
+    '.pdm-brand{display:none}.pdm-seg{flex-wrap:wrap}.pdm-seg button{padding:7px 10px}}',
   'pplr-data-maps')
 </script>
 
diff --git a/plugin-designs/pplr-data-maps/src/components/FlatLegend.vue b/plugin-designs/pplr-data-maps/src/components/FlatLegend.vue
index 5a8a66ee5..cea0ffad2 100644
--- a/plugin-designs/pplr-data-maps/src/components/FlatLegend.vue
+++ b/plugin-designs/pplr-data-maps/src/components/FlatLegend.vue
@@ -21,6 +21,7 @@
 import { ref, computed } from 'vue'
 import { useInstance } from '@map/composables/usePplrInstance.js'
 import { usePplrT } from '../composables/usePplrT.js'
+import { tStatic } from '@map/i18n/index.js'
 
 const props = defineProps({
   items:    { type: Array,  default: () => [] },
@@ -72,7 +73,8 @@ function clearSel() {
 <template>
   <div class="fl-panel" :class="{ collapsed }" :data-theme="theme" v-show="!collapsed">
     <div class="fl-titlebar">
-      <button class="fl-collapse-btn" :title="collapsed ? 'Expand legend' : 'Collapse legend'"
+      <!-- The shared aria keys (11 locales); a shared key, so tStatic (t() would prefix it with pplr.). -->
+      <button type="button" class="fl-collapse-btn" :title="tStatic('aria.collapseLegend')" :aria-label="tStatic('aria.collapseLegend')"
               @click="collapsed = true">
         <svg width="11" height="11" viewBox="0 0 24 24" fill="none">
           <polyline points="14,18 8,12 14,6" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
@@ -138,6 +140,7 @@ function clearSel() {
   background: transparent; border: none; cursor: pointer;
   color: #8b949e; padding: 2px 4px; border-radius: 4px;
   display: flex; align-items: center; justify-content: center;
+  min-width: 24px; min-height: 24px;   /* a 24 px target (WCAG 2.5.8); it measured 19×15 */
 }
 .fl-collapse-btn:hover { color: #c9d1d9; background: rgba(115,161,127,0.12); }
 .fl-panel[data-theme="light"] .fl-collapse-btn { color: #57606a; }