✨ Feature #54: icon hover label (aria label)

terryli710 · Oct 4, 2023 · 435d0a9 · 435d0a9
1 parent 8808249
commit 435d0a9
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 9 deletions.
diff --git 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" />
+<LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel={ariaLabel} class="task-card-icon" />
diff --git 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
@@ -4,11 +4,12 @@
     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"/>
         <circle cx="12" cy="19" r="1"/>
     `;
 </script>
 
-<LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel="more-vertical" class="task-card-icon" />
+<LucideIcon width={width} height={height} svgPath={svgPath} ariaLabel={ariaLabel} class="task-card-icon" />
diff --git a/src/components/icons/Plus.svelte b/src/components/icons/Plus.svelte
@@ -4,12 +4,13 @@
     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"/>
     `;
 
   </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" />
 
diff --git 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
@@ -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
@@ -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>