From 435d0a931314b0aa409c13bb6fd91a8605b5d657 Mon Sep 17 00:00:00 2001
From: terryli710 <li.terry710@gmail.com>
Date: Tue, 3 Oct 2023 17:12:10 -0700
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feature=20#54:=20icon=20hover=20lab?=
 =?UTF-8?q?el=20(aria=20label)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/icons/ChevronsDownUp.svelte | 3 ++-
 src/components/icons/ChevronsUpDown.svelte | 3 ++-
 src/components/icons/MoreVertical.svelte   | 3 ++-
 src/components/icons/Plus.svelte           | 3 ++-
 src/ui/Labels.svelte                       | 2 +-
 src/ui/StaticTaskCard.svelte               | 4 ++--
 src/ui/TaskCard.svelte                     | 4 ++--
 7 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/icons/ChevronsDownUp.svelte b/src/components/icons/ChevronsDownUp.svelte
index 6929600..c1ec586 100644
--- a/src/components/icons/ChevronsDownUp.svelte
+++ b/src/components/icons/ChevronsDownUp.svelte
@@ -4,10 +4,11 @@
   import LucideIcon from './LucideIcon.svelte';
   export let width = "24";
   export let height = "24";
+  export let ariaLabel = "chevrons-down-up";
   const svgPath = `
     <path d="m7 20 5-5 5 5" />
     <path d="m7 4 5 5 5-5" />
   `;
 </script>
 
-<LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel="chevrons-down-up" class="task-card-icon" />
\ No newline at end of file
+<LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel={ariaLabel} class="task-card-icon" />
\ No newline at end of file
diff --git a/src/components/icons/ChevronsUpDown.svelte b/src/components/icons/ChevronsUpDown.svelte
index 9bd4c49..ffd548a 100644
--- a/src/components/icons/ChevronsUpDown.svelte
+++ b/src/components/icons/ChevronsUpDown.svelte
@@ -4,9 +4,10 @@
     import LucideIcon from './LucideIcon.svelte';
     export let width = "24";
     export let height = "24";
+    export let ariaLabel = "chevrons-up-down";
     const svgPath = `
     <path d="m7 15 5 5 5-5"/>
     <path d="m7 9 5-5 5 5"/>
     `;
   </script>
-  <LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel="chevrons-up-down" class="task-card-icon" />
+  <LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel={ariaLabel} class="task-card-icon" />
diff --git a/src/components/icons/MoreVertical.svelte b/src/components/icons/MoreVertical.svelte
index f3c8464..d7f2e1c 100644
--- a/src/components/icons/MoreVertical.svelte
+++ b/src/components/icons/MoreVertical.svelte
@@ -4,6 +4,7 @@
     import LucideIcon from './LucideIcon.svelte';
     export let width = "24";
     export let height = "24";
+    export let ariaLabel = "more-vertical";
     const svgPath = `
         <circle cx="12" cy="12" r="1"/>
         <circle cx="12" cy="5" r="1"/>
@@ -11,4 +12,4 @@
     `;
 </script>
 
-<LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel="more-vertical" class="task-card-icon" />
\ No newline at end of file
+<LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel={ariaLabel} class="task-card-icon" />
\ No newline at end of file
diff --git a/src/components/icons/Plus.svelte b/src/components/icons/Plus.svelte
index 50e050c..855b87d 100644
--- a/src/components/icons/Plus.svelte
+++ b/src/components/icons/Plus.svelte
@@ -4,6 +4,7 @@
     import LucideIcon from './LucideIcon.svelte';
     export let width = "24";
     export let height = "24";
+    export let ariaLabel = "plus";
     const svgPath = `
       <path d="M5 12h14"/>
       <path d="M12 5v14"/>
@@ -11,5 +12,5 @@
 
   </script>
   
-  <LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel="plus" class="task-card-icon" />
+  <LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel={ariaLabel} class="task-card-icon" />
   
\ No newline at end of file
diff --git a/src/ui/Labels.svelte b/src/ui/Labels.svelte
index 5a82a44..18595c2 100644
--- a/src/ui/Labels.svelte
+++ b/src/ui/Labels.svelte
@@ -117,7 +117,7 @@
     />
   {:else}
     <button class="task-card-button label-plus-button" on:click={enableLabelAddMode}>
-      <Plus/>
+      <Plus ariaLabel="Add Label"/>
     </button>
   {/if}
 </div>
diff --git a/src/ui/StaticTaskCard.svelte b/src/ui/StaticTaskCard.svelte
index c9151d5..9d30566 100644
--- a/src/ui/StaticTaskCard.svelte
+++ b/src/ui/StaticTaskCard.svelte
@@ -154,7 +154,7 @@
           class="task-card-button mode-toggle-button"
           on:click={(event) => switchMode(event, 'multi-line')}
         >
-          <ChevronsUpDown />
+          <ChevronsUpDown ariaLabel="Toggle Task Display Mode" />
         </button>
       </div>
     </div>    
@@ -246,7 +246,7 @@
         class="task-card-button mode-toggle-button"
         on:click={(event) => switchMode(event, 'single-line')}
       >
-        <ChevronsDownUp />
+        <ChevronsDownUp ariaLabel="Toggle Task Display Mode" />
       </button>
     </div>
   </div>
diff --git a/src/ui/TaskCard.svelte b/src/ui/TaskCard.svelte
index 65863dc..0949194 100644
--- a/src/ui/TaskCard.svelte
+++ b/src/ui/TaskCard.svelte
@@ -231,7 +231,7 @@
       <Description taskSyncManager={taskSyncManager} />
     {/if}
     <button class="task-card-menu-button mode-multi-line" on:click={(event) => showCardMenu(event)} tabindex="0">
-      <MoreVertical/>
+      <MoreVertical ariaLabel="Show Menu"/>
     </button>
   </div>
 
@@ -244,7 +244,7 @@
     </div>
     <div class="task-card-attribute-bottom-bar-right">
       <button class="task-card-button mode-toggle-button" on:click={(event) => switchMode(event, 'single-line')}>
-        <ChevronsDownUp/>
+        <ChevronsDownUp ariaLabel="Toggle Task Display Mode"/>
       </button>
     </div>
   </div>