Improvement - VueUiTreemap - Improve breadcrumbs accessibility

Author: graphieros

package.json

@@ -107,4 +107,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.13"
   }
-}
+}

src/atoms/BaseIcon.vue

@@ -179,7 +179,8 @@ const icons = computed(() => {
         chartHistoryPlot: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" d="M 4 4 A 1 1 0 0 0 6 4 A 1 1 0 0 0 4 4 M 12 2 A 1 1 0 0 0 12 4 A 1 1 0 0 0 12 2 M 17 7 A 1 1 0 0 0 17 9 A 1 1 0 0 0 17 7 M 12 14 A 1 1 0 0 0 12 16 A 1 1 0 0 0 12 14 M 5 12 A 1 1 0 0 0 5 14 A 1 1 0 0 0 5 12 M 6 4 L 11 3 M 12.84 3.582 L 16.267 7.265 M 16.625 8.953 L 12.763 14.297 M 10.999 14.732 L 5.987 13.326 M 1 1 L 1 19 L 19 19"/>`,
         chartTableSparkline: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 1 1 L 7 1 L 7 5 L 1 5 L 1 1 M 1 8 L 7 8 L 7 12 L 1 12 L 1 8 M 1 15 L 7 15 L 7 19 L 1 19 L 1 15 M 9 3 C 9.3333 2.3333 9.261 1.027 10 1 C 11 2 10.139 4.975 11.421 5.009 C 12.231 5.009 12 3 13 3 C 14 4 14.053 4.03 14 4 C 16 4 16 1 17 1 C 18 1 18 3 19 3 M 9 12 C 9.3333 11 9.126 9.531 10 9 C 11 9 11 11 11.759 11.084 C 12.771 10.915 12.231 8.012 13.21 8.012 C 14.29 7.945 14 12 15 12 C 16 12 16 10 17 10 C 18 10 18 11 19 11 M 9 16 C 9.6667 17 9.734 18.981 10.645 19.048 C 11.691 18.609 11.117 14.965 12 15 C 13 15 12.636 17.158 13.682 17.293 C 15 17 14 15 15 15 C 16 15 16 19 17 19 C 18 19 18 15 19 15" />`,
         chartCirclePack: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 10 7 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 7 M 5 5 A 1 1 0 0 0 7.716 8.039 A 1 1 0 0 0 5 5 M 13 4 A 1 1 0 0 0 11.354 7.322 A 1 1 0 0 0 13 4 M 8.506 12.628 A 1 1 0 0 0 5.05 16.755 A 1 1 0 0 0 8.506 12.628 M 14.965 6.988 A 1 1 0 0 0 13.535 9.758 A 1 1 0 0 0 14.965 6.988 M 16 11 A 1 1 0 0 0 13.084 14.742 A 1 1 0 0 0 16 11"/>`,
-        home: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 6 L 10 2 L 18 6 M 4 7 L 4 17 C 4 18 4 18 5 18 L 8 18 L 8 12 L 12 12 L 12 18 L 15 18 C 16 18 16 18 16 17 L 16 7 M 8 18 L 12 18"/>`
+        home: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 L 10 2 L 18 10 M 4 10 L 4 17 C 4 18 4 18 5 18 L 8 18 L 8 12 L 12 12 L 12 18 L 15 18 C 16 18 16 18 16 17 L 16 10 M 8 18"/>`,
+        homeFilled: `<path fill="${props.stroke}" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 2 10 L 10 2 L 18 10 M 4 10 L 4 17 C 4 18 4 18 5 18 L 8 18 L 8 12 L 12 12 L 12 18 L 15 18 C 16 18 16 18 16 17 L 16 10 M 8 18"/>`
     }
 });
 

src/components/vue-ui-treemap.vue

@@ -603,6 +603,15 @@ function toggleAnnotator() {
     isAnnotator.value = !isAnnotator.value;
 }
 
+const activeCrumbIndex = ref(null)
+
+function activateHomeIcon(id) {
+    activeCrumbIndex.value = id
+}
+function deactivateHomeIcon() {
+    activeCrumbIndex.value = null
+}
+
 defineExpose({
     getData,
     generateCsv,
@@ -716,23 +725,31 @@ defineExpose({
 
         <nav class="vue-ui-treemap-breadcrumbs" v-if="breadcrumbs.length > 1" data-html2canvas-ignore>
             <span 
-                v-for="(crumb, i) in breadcrumbs" 
+                v-for="(crumb, i) in breadcrumbs"
+                role="button"
+                :tabindex="i < breadcrumbs.length - 1 ? 0 : undefined"
                 :key="crumb.id || 'root'" 
                 @click="i === breadcrumbs.length - 1 ? () => {} : zoom(crumb.node)"
+                @keydown.enter.prevent="i === breadcrumbs.length - 1 ? undefined : zoom(crumb.node)"
+                @keydown.space.prevent="i === breadcrumbs.length - 1 ? undefined : zoom(crumb.node)"
                 class="vue-ui-treemap-crumb"
                 :data-last-crumb="i === breadcrumbs.length - 1"
                 :style="{
                     color: FINAL_CONFIG.style.chart.color
                 }"
+                @mouseenter="activateHomeIcon(i)"
+                @mouseleave="deactivateHomeIcon"
+                @focus="activateHomeIcon(i)"
+                @blur="deactivateHomeIcon"
             >
                 <span 
                     class="vue-ui-treemap-crumb-unit"
                 >
                     <span class="vue-ui-treemap-crumb-unit-label">
-                        <slot name="breadcrumb-label" v-bind="{ crumb, isRoot: i === 0 }">
+                        <slot name="breadcrumb-label" v-bind="{ crumb, isRoot: i === 0, isFocus: activeCrumbIndex === i }">
                             <template v-if="i === 0">
                                 <div style="width: 24px; display:flex; align-items:center">
-                                    <BaseIcon name="home" :stroke="FINAL_CONFIG.style.chart.color"/>
+                                    <BaseIcon :name="activeCrumbIndex === 0 ? 'homeFilled' : 'home'" :stroke="FINAL_CONFIG.style.chart.color"/>
                                 </div>
                             </template>
                             <template v-else>

types/vue-data-ui.d.ts

@@ -1152,7 +1152,8 @@ declare module "vue-data-ui" {
         | "vueDataUi"
         | "zoomMinus"
         | "zoomPlus"
-        | "home";
+        | "home"
+        | "homeFilled";
 
     export const VueUiIcon: DefineComponent<{
         name: VueUiIconName;