Added aria-labels to icons

jordan-dalby · Nov 25, 2024 · d6eab8c · d6eab8c
1 parent 8808096
commit d6eab8c
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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,13 +116,15 @@ 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" />}
               onClick={onDelete}
               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
@@ -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 && (