From c11c6f0ec56309699da34906872d689469bab63d Mon Sep 17 00:00:00 2001
From: Kevin Fabre <kevin.fabre@opendatasoft.com>
Date: Mon, 27 Nov 2023 11:05:25 +0100
Subject: [PATCH] fix(a11y): Category legend items are now accessible

- Can be focused
- A "Enter" key down enter, activate them
---
 .../Legend/CategoryLegend/Item/CategoryLegendItem.svelte | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/visualizations/src/components/Legend/CategoryLegend/Item/CategoryLegendItem.svelte b/packages/visualizations/src/components/Legend/CategoryLegend/Item/CategoryLegendItem.svelte
index cad39bfc..b73471d1 100644
--- a/packages/visualizations/src/components/Legend/CategoryLegend/Item/CategoryLegendItem.svelte
+++ b/packages/visualizations/src/components/Legend/CategoryLegend/Item/CategoryLegendItem.svelte
@@ -8,14 +8,23 @@
     export let toggleSerie: (index: number) => void;
     export let refined: boolean;
 
+    const onKeyDown = (event: KeyboardEvent) => {
+        if (event.key !== 'Enter' || !item.onClick) return;
+        toggleSerie(itemIndex);
+        item.onClick(itemIndex);
+    };
+
     $: stringLabel =
         item.label &&
         (typeof item.label === 'string' ? item.label : item?.label?.text?.(itemIndex));
 </script>
 
 <div
+    role="button"
+    tabindex={item.onClick ? 0 : -1}
     class:refined
     style="--cursor-style: {item.onClick ? 'pointer' : 'default'};"
+    on:keydown={onKeyDown}
     on:click={() => {
         if (item.onClick) {
             toggleSerie(itemIndex);