From d6eab8c74545792749f61e63b132c668c44c6057 Mon Sep 17 00:00:00 2001
From: Jordan Dalby <jordan.dalby1@outlook.com>
Date: Mon, 25 Nov 2024 20:18:36 +0000
Subject: [PATCH] Added aria-labels to icons

---
 client/src/components/common/buttons/IconButton.tsx     | 7 +++++--
 client/src/components/search/SearchAndFilter.tsx        | 3 +++
 client/src/components/snippets/edit/FragmentEditor.tsx  | 4 ++++
 client/src/components/snippets/list/SnippetCardMenu.tsx | 5 +++++
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/src/components/common/buttons/IconButton.tsx b/client/src/components/common/buttons/IconButton.tsx
index b403c56..ba25156 100644
--- a/client/src/components/common/buttons/IconButton.tsx
+++ b/client/src/components/common/buttons/IconButton.tsx
@@ -9,6 +9,7 @@ export interface IconButtonProps {
   disabled?: boolean;
   className?: string;
   type?: 'button' | 'submit' | 'reset';
+  showLabel?: boolean;
 }
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(({
@@ -19,7 +20,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(({
   size = 'md',
   disabled = false,
   className = '',
-  type = 'button'
+  type = 'button',
+  showLabel = false
 }, ref) => {
   const baseClasses = 'flex items-center justify-center gap-2 rounded-md transition-colors';
   const variantClasses = {
@@ -50,9 +52,10 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(({
         disabled ? 'opacity-50 cursor-not-allowed' : ''
       }`}
       title={label}
+      aria-label={label}
     >
       {icon}
-      {label && <span>{label}</span>}
+      {(label && showLabel) && <span>{label}</span>}
     </button>
   );
 });
diff --git a/client/src/components/search/SearchAndFilter.tsx b/client/src/components/search/SearchAndFilter.tsx
index 8674cf2..014d630 100644
--- a/client/src/components/search/SearchAndFilter.tsx
+++ b/client/src/components/search/SearchAndFilter.tsx
@@ -98,18 +98,21 @@ export const SearchAndFilter: React.FC<SearchAndFilterProps> = ({
           onClick={() => setViewMode('grid')}
           variant={viewMode === 'grid' ? 'primary' : 'secondary'}
           className="h-10 px-4"
+          label="Grid view"
         />
         <IconButton
           icon={<List size={20} />}
           onClick={() => setViewMode('list')}
           variant={viewMode === 'list' ? 'primary' : 'secondary'}
           className="h-10 px-4"
+          label="List view"
         />
         <IconButton
           icon={<Settings size={20} />}
           onClick={openSettingsModal}
           variant="secondary"
           className="h-10 px-4"
+          label="Open settings"
         />
         {!hideNewSnippet && (
           <IconButton
diff --git a/client/src/components/snippets/edit/FragmentEditor.tsx b/client/src/components/snippets/edit/FragmentEditor.tsx
index 93a702a..8345e3a 100644
--- a/client/src/components/snippets/edit/FragmentEditor.tsx
+++ b/client/src/components/snippets/edit/FragmentEditor.tsx
@@ -61,6 +61,7 @@ export const FragmentEditor: React.FC<FragmentEditorProps> = ({
               variant="custom"
               size="sm"
               className="disabled:opacity-50 w-9 h-9 bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
+              label="Move fragment up"
             />
             <IconButton
               icon={<ChevronDown size={16} />}
@@ -69,6 +70,7 @@ export const FragmentEditor: React.FC<FragmentEditorProps> = ({
               variant="custom"
               size="sm"
               className="disabled:opacity-50 w-9 h-9 bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
+              label="Move fragment down"
             />
           </div>
   
@@ -114,6 +116,7 @@ export const FragmentEditor: React.FC<FragmentEditorProps> = ({
               variant="custom"
               size="sm"
               className="w-9 h-9 bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
+              label={isCollapsed ? "Expand fragment" : "Collapse fragment"}
             />
             <IconButton
               icon={<Trash2 size={16} className="hover:text-red-500" />}
@@ -121,6 +124,7 @@ export const FragmentEditor: React.FC<FragmentEditorProps> = ({
               variant="custom"
               size="sm"
               className="w-9 h-9 bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
+              label="Delete fragment"
             />
           </div>
         </div>
diff --git a/client/src/components/snippets/list/SnippetCardMenu.tsx b/client/src/components/snippets/list/SnippetCardMenu.tsx
index 76b6e73..fc140be 100644
--- a/client/src/components/snippets/list/SnippetCardMenu.tsx
+++ b/client/src/components/snippets/list/SnippetCardMenu.tsx
@@ -41,6 +41,7 @@ const SnippetCardMenu: React.FC<SnippetCardMenuProps> = ({
             variant="custom"
             size="sm"
             className="bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
+            label="Duplicate snippet"
           />
         )}
         <IconButton
@@ -52,6 +53,7 @@ const SnippetCardMenu: React.FC<SnippetCardMenuProps> = ({
           variant="custom"
           size="sm"
           className="bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
+          label="Open in new tab"
         />
       </div>
     );
@@ -68,6 +70,7 @@ const SnippetCardMenu: React.FC<SnippetCardMenuProps> = ({
         variant="custom"
         size="sm"
         className="bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
+        label="Edit snippet"
       />
       <IconButton
         icon={<Trash2 size={16} className="hover:text-red-500" />}
@@ -78,6 +81,7 @@ const SnippetCardMenu: React.FC<SnippetCardMenuProps> = ({
         variant="custom"
         size="sm"
         className="bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
+        label="Delete snippet"
       />
 
       <div className="relative">
@@ -91,6 +95,7 @@ const SnippetCardMenu: React.FC<SnippetCardMenuProps> = ({
           variant="custom"
           size="sm"
           className="bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface"
+          label="More options"
         />
         
         {isDropdownOpen && (