From b9e1de33c53920d39ac0e89a6056d945131591b7 Mon Sep 17 00:00:00 2001
From: eleith <eleith@users.noreply.github.com>
Date: Sun, 24 Jul 2022 19:18:50 -0700
Subject: [PATCH] Make ListItem component more accessible by using a button tag
 when clickable (#1044)

Co-authored-by: eleith <eleith@lemon.localdomain>
---
 web/src/components/atomic/ListItem.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/components/atomic/ListItem.vue b/web/src/components/atomic/ListItem.vue
index b866bb39d..875f673b2 100644
--- a/web/src/components/atomic/ListItem.vue
+++ b/web/src/components/atomic/ListItem.vue
@@ -1,5 +1,6 @@
 <template>
-  <div
+  <component
+    :is="clickable ? 'button' : 'div'"
     class="
       w-full
       flex
@@ -14,7 +15,7 @@
     :class="{ 'cursor-pointer hover:shadow-md hover:bg-gray-200 dark:hover:bg-dark-gray-800': clickable }"
   >
     <slot />
-  </div>
+  </component>
 </template>
 
 <script lang="ts">