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(({ @@ -19,7 +20,8 @@ export const IconButton = forwardRef(({ 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(({ disabled ? 'opacity-50 cursor-not-allowed' : '' }`} title={label} + aria-label={label} > {icon} - {label && {label}} + {(label && showLabel) && {label}} ); }); 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 = ({ onClick={() => setViewMode('grid')} variant={viewMode === 'grid' ? 'primary' : 'secondary'} className="h-10 px-4" + label="Grid view" /> } onClick={() => setViewMode('list')} variant={viewMode === 'list' ? 'primary' : 'secondary'} className="h-10 px-4" + label="List view" /> } onClick={openSettingsModal} variant="secondary" className="h-10 px-4" + label="Open settings" /> {!hideNewSnippet && ( = ({ 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" /> } @@ -69,6 +70,7 @@ export const FragmentEditor: React.FC = ({ 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" /> @@ -114,6 +116,7 @@ export const FragmentEditor: React.FC = ({ 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"} /> } @@ -121,6 +124,7 @@ export const FragmentEditor: React.FC = ({ 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" /> 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 = ({ variant="custom" size="sm" className="bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface" + label="Duplicate snippet" /> )} = ({ 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" /> ); @@ -68,6 +70,7 @@ const SnippetCardMenu: React.FC = ({ variant="custom" size="sm" className="bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface" + label="Edit snippet" /> } @@ -78,6 +81,7 @@ const SnippetCardMenu: React.FC = ({ variant="custom" size="sm" className="bg-light-hover dark:bg-dark-hover hover:bg-light-surface dark:hover:bg-dark-surface" + label="Delete snippet" />
@@ -91,6 +95,7 @@ const SnippetCardMenu: React.FC = ({ 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 && (