fix(a11y): name remaining icon-only product buttons

Author: Bill Leoutsakos

apps/sim/app/(interfaces)/chat/components/input/input.tsx

@@ -222,6 +222,7 @@ export const ChatInput: React.FC<{
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
                   <Button
+                    aria-label='Attach files'
                     variant='quiet'
                     onClick={() => fileInputRef.current?.click()}
                     disabled={isStreaming || attachedFiles.length >= 15}

apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx

@@ -250,6 +250,7 @@ export function ChatFileDownloadAll({ files }: ChatFileDownloadAllProps) {
   return (
     <div className='flex flex-col items-start gap-2'>
       <Button
+        aria-label='Download all files'
         variant='ghost-secondary'
         onClick={handleDownloadAll}
         disabled={isDownloading}

apps/sim/app/(interfaces)/chat/components/message/message.tsx

@@ -272,6 +272,7 @@ export const ClientChatMessage = memo(function ClientChatMessage({
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
                       <Button
+                        aria-label={isCopied ? 'Copied!' : 'Copy to clipboard'}
                         variant='ghost-secondary'
                         className='p-0'
                         onClick={() => {

apps/sim/app/playground/page.tsx

@@ -168,7 +168,12 @@ export default function PlaygroundPage() {
           <div className='absolute top-8 left-8 flex items-center gap-2'>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
-                <Button variant='ghost' onClick={() => router.back()} className='size-8 p-0'>
+                <Button
+                  aria-label='Go back'
+                  variant='ghost'
+                  onClick={() => router.back()}
+                  className='size-8 p-0'
+                >
                   <ArrowLeft className='size-4' />
                 </Button>
               </Tooltip.Trigger>
@@ -178,7 +183,12 @@ export default function PlaygroundPage() {
           <div className='absolute top-8 right-8'>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
-                <Button variant='default' onClick={toggleDarkMode} className='size-8 p-0'>
+                <Button
+                  aria-label={isDarkMode ? 'Light mode' : 'Dark mode'}
+                  variant='default'
+                  onClick={toggleDarkMode}
+                  className='size-8 p-0'
+                >
                   {isDarkMode ? <Sun className='size-4' /> : <Moon className='size-4' />}
                 </Button>
               </Tooltip.Trigger>

apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx

@@ -512,6 +512,7 @@ const Pagination = memo(function Pagination({
     <div className='flex items-center justify-center border-[var(--border)] border-t bg-[var(--bg)] px-4 py-2.5'>
       <div className='flex items-center gap-1'>
         <Button
+          aria-label='Previous page'
           variant='ghost'
           onClick={() => onPageChange(currentPage - 1)}
           disabled={currentPage <= 1}
@@ -548,6 +549,7 @@ const Pagination = memo(function Pagination({
           })}
         </div>
         <Button
+          aria-label='Next page'
           variant='ghost'
           onClick={() => onPageChange(currentPage + 1)}
           disabled={currentPage >= totalPages}

apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx

@@ -121,6 +121,7 @@ export function QueuedMessages({
                     <Tooltip.Root>
                       <Tooltip.Trigger asChild>
                         <button
+                          aria-label='Cancel edit'
                           type='button'
                           onClick={(e) => {
                             e.stopPropagation()
@@ -140,6 +141,7 @@ export function QueuedMessages({
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
                           <button
+                            aria-label={isDispatching ? 'Sending now' : 'Edit queued message'}
                             type='button'
                             disabled={isDispatching}
                             onClick={(e) => {
@@ -159,6 +161,7 @@ export function QueuedMessages({
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
                           <button
+                            aria-label='Send now'
                             type='button'
                             disabled={isDispatching}
                             onClick={(e) => {
@@ -178,6 +181,7 @@ export function QueuedMessages({
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
                           <button
+                            aria-label='Remove from queue'
                             type='button'
                             onClick={(e) => {
                               e.stopPropagation()

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx

@@ -407,6 +407,7 @@ export function DocumentTagsModal({
                   </span>
                   <div className='flex shrink-0 items-center gap-1'>
                     <Button
+                      aria-label='Remove tag'
                       variant='ghost'
                       onClick={(e) => {
                         e.stopPropagation()

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx

@@ -203,6 +203,7 @@ export function AddDocumentsModal({
                         <>
                           {isFailed && (
                             <Button
+                              aria-label='Retry upload'
                               type='button'
                               variant='ghost'
                               className='size-4 p-0'
@@ -213,6 +214,7 @@ export function AddDocumentsModal({
                             </Button>
                           )}
                           <Button
+                            aria-label='Remove file'
                             type='button'
                             variant='ghost'
                             className='size-4 p-0'

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx

@@ -293,6 +293,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                     </span>
                     <div className='flex shrink-0 items-center gap-1'>
                       <Button
+                        aria-label='Delete Tag'
                         variant='ghost'
                         onClick={(e) => {
                           e.stopPropagation()

apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx

@@ -550,6 +550,7 @@ export const CreateBaseModal = memo(function CreateBaseModal({
                           <Loader className='size-4 text-[var(--text-muted)]' animate />
                         ) : (
                           <Button
+                            aria-label='Remove file'
                             type='button'
                             variant='ghost'
                             className='size-4 p-0'