Merge pull request #438 from epimorphics/spike/accessibility-issues

Spike/accessibility issues
epimorphics · Sep 4, 2024 · ca46861 · ca46861
2 parents 1b54530 + 4ac3f73
commit ca46861
Showing 1 changed file with 4 additions and 8 deletions.
diff --git a/app/javascript/components/data-view-statistics.vue b/app/javascript/components/data-view-statistics.vue
@@ -1,27 +1,23 @@
 <template lang='html'>
   <div class='o-data-view__js-options-statistics'>
-    <span
-      v-for='(statistic, index) in statistics'
+    <label v-for='(statistic, index) in statistics'
       :key='statistic.slug'
-      class="checkbox-container"
-    >
+      class="checkbox-container">
       <input
         type="checkbox"
-        :id="'checkbox-' + statistic.slug"
         :name='statistic.label'
         :data-slug='statistic.slug'
         @change='onSelectStatistic'
         :checked='isSelectedStatistic(statistic.slug)'
+        @keydown.enter="onSelectStatistic"
       />
-      <label :for="'checkbox-' + statistic.slug">
         <img
           :src='imageSrcPath(index, false)'
           :srcset='imageSrcPath(index, true)'
           :alt='`marker image for ${statistic.label}`'
         />
         {{ statistic.label }}
-      </label>
-    </span>
+    </label>
   </div>
 </template>