Skip to content

fix(a11y): name icon-only buttons across product UI #7975

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 2 commits into from
Sep 18, 2026
Merged

fix(a11y): name icon-only buttons across product UI #7975

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
42e26bf
fix(resource): name bulk action buttons for accessibility
Sep 18, 2026
64d3a67
fix(a11y): name remaining icon-only product buttons
Sep 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/sim/app/(interfaces)/chat/components/input/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
1 change: 1 addition & 0 deletions apps/sim/app/(interfaces)/chat/components/message/message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={() => {
Expand Down
14 changes: 12 additions & 2 deletions apps/sim/app/playground/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 2 additions & 0 deletions .../sim/app/workspace/[workspaceId]/components/resource/components/action-bar/action-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ function ActionButton({ icon: Icon, label, onClick, disabled }: ActionButtonProp
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Button
aria-label={label}
variant='ghost'
onClick={onClick}
disabled={disabled}
Expand Down Expand Up @@ -129,6 +130,7 @@ export function ResourceActionBar({
<Tooltip.Trigger asChild>
<DropdownMenuTrigger asChild>
<Button
aria-label='Move'
variant='ghost'
disabled={actionsDisabled}
className={ACTION_BUTTON_CLASS}
Expand Down
2 changes: 2 additions & 0 deletions apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -548,6 +549,7 @@ const Pagination = memo(function Pagination({
})}
</div>
<Button
aria-label='Next page'
variant='ghost'
onClick={() => onPageChange(currentPage + 1)}
disabled={currentPage >= totalPages}
Expand Down
4 changes: 4 additions & 0 deletions apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ export function QueuedMessages({
<Tooltip.Root>
<Tooltip.Trigger asChild>
<button
aria-label='Cancel edit'
type='button'
onClick={(e) => {
e.stopPropagation()
Expand All @@ -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) => {
Expand All @@ -159,6 +161,7 @@ export function QueuedMessages({
<Tooltip.Root>
<Tooltip.Trigger asChild>
<button
aria-label='Send now'
type='button'
disabled={isDispatching}
onClick={(e) => {
Expand All @@ -178,6 +181,7 @@ export function QueuedMessages({
<Tooltip.Root>
<Tooltip.Trigger asChild>
<button
aria-label='Remove from queue'
type='button'
onClick={(e) => {
e.stopPropagation()
Expand Down
1 change: 1 addition & 0 deletions ...aceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
2 changes: 2 additions & 0 deletions ...space/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,7 @@ export function AddDocumentsModal({
<>
{isFailed && (
<Button
aria-label='Retry upload'
type='button'
variant='ghost'
className='size-4 p-0'
Expand All @@ -213,6 +214,7 @@ export function AddDocumentsModal({
</Button>
)}
<Button
aria-label='Remove file'
type='button'
variant='ghost'
className='size-4 p-0'
Expand Down
1 change: 1 addition & 0 deletions ...app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
1 change: 1 addition & 0 deletions .../app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
2 changes: 2 additions & 0 deletions .../workspace/[workspaceId]/logs/components/log-details/components/trace-view/trace-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -505,6 +505,7 @@ function DetailCodeSection({
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Button
aria-label={copied ? 'Copied' : 'Copy'}
type='button'
variant='default'
onClick={(e) => {
Expand All @@ -525,6 +526,7 @@ function DetailCodeSection({
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Button
aria-label='Search'
type='button'
variant='default'
onClick={(e) => {
Expand Down
2 changes: 2 additions & 0 deletions apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@ export const WorkflowOutputSection = memo(
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Button
aria-label={copied ? 'Copied' : 'Copy'}
type='button'
variant='default'
onClick={(e) => {
Expand All @@ -189,6 +190,7 @@ export const WorkflowOutputSection = memo(
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Button
aria-label='Search'
type='button'
variant='default'
onClick={(e) => {
Expand Down
1 change: 1 addition & 0 deletions ...workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -718,6 +718,7 @@ export function WorkflowSidebarBody({
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Button
aria-label='Open workflow'
type='button'
variant='ghost'
onClick={() =>
Expand Down
5 changes: 5 additions & 0 deletions apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -508,6 +508,7 @@ export const ActionBar = memo(
<Tooltip.Trigger asChild>
<span className='inline-flex'>
<Button
aria-label={isEnabled ? 'Disable' : 'Enable'}
variant='ghost'
onClick={(e) => {
e.stopPropagation()
Expand Down Expand Up @@ -609,6 +610,7 @@ export const ActionBar = memo(
<Tooltip.Trigger asChild>
<span className='inline-flex'>
<Button
aria-label={isLocked ? 'Unlock' : 'Lock'}
variant='ghost'
onClick={(e) => {
e.stopPropagation()
Expand Down Expand Up @@ -640,6 +642,7 @@ export const ActionBar = memo(
<Tooltip.Trigger asChild>
<span className='inline-flex'>
<Button
aria-label='Duplicate'
variant='ghost'
onClick={(e) => {
e.stopPropagation()
Expand Down Expand Up @@ -667,6 +670,7 @@ export const ActionBar = memo(
<Tooltip.Trigger asChild>
<span className='inline-flex'>
<Button
aria-label='Remove from Subflow'
variant='ghost'
onClick={(e) => {
e.stopPropagation()
Expand Down Expand Up @@ -705,6 +709,7 @@ export const ActionBar = memo(
<Tooltip.Trigger asChild>
<span className='inline-flex'>
<Button
aria-label='Delete'
variant='ghost'
onClick={(e) => {
e.stopPropagation()
Expand Down
11 changes: 10 additions & 1 deletion apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,7 @@ function ChatFilePreview({ file, onRemove }: ChatFilePreviewProps) {
)}

<Button
aria-label='Remove file'
variant='ghost'
onClick={(event) => {
event.stopPropagation()
Expand Down Expand Up @@ -950,6 +951,7 @@ export function Chat() {
<Popover size='sm' open={moreMenuOpen} onOpenChange={setMoreMenuOpen}>
<PopoverTrigger asChild>
<Button
aria-label='Chat actions'
variant='ghost'
className='-m-1.5 p-1.5!'
onClick={(e) => e.stopPropagation()}
Expand Down Expand Up @@ -990,7 +992,12 @@ export function Chat() {
</Popover>

{/* Close button */}
<Button variant='ghost' className='-m-1.5 p-1.5!' onClick={handleClose}>
<Button
aria-label='Close chat'
variant='ghost'
className='-m-1.5 p-1.5!'
onClick={handleClose}
>
<X className='size-[16px]' />
</Button>
</div>
Expand Down Expand Up @@ -1096,6 +1103,7 @@ export function Chat() {

{isStreaming ? (
<Button
aria-label='Stop generation'
onClick={handleStopStreaming}
variant='ghost'
className='size-[22px] rounded-full bg-[#383838] p-0 transition-colors hover-hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover-hover:bg-[#CFCFCF]'
Expand All @@ -1104,6 +1112,7 @@ export function Chat() {
</Button>
) : (
<Button
aria-label='Send message'
onClick={handleSendMessage}
variant='ghost'
disabled={
Expand Down
2 changes: 2 additions & 0 deletions ...anel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,7 @@ export function Versions({
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Button
aria-label={v.description ? 'Edit description' : 'Add description'}
variant='ghost'
className={cn(
'p-1!',
Expand Down Expand Up @@ -356,6 +357,7 @@ export function Versions({
>
<PopoverTrigger asChild>
<Button
aria-label='Version actions'
variant='ghost'
className='p-1!'
disabled={isPromotingVersion}
Expand Down
1 change: 1 addition & 0 deletions ...components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,7 @@ export function GeneralDeploy({
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Button
aria-label='See preview'
type='button'
variant='default'
onClick={() => setShowExpandedPreview(true)}
Expand Down
2 changes: 2 additions & 0 deletions ...nents/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,7 @@ function SingleFileSelector({
}
/>
<Button
aria-label='Remove file'
type='button'
variant='ghost'
className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10 size-6 p-0'
Expand Down Expand Up @@ -762,6 +763,7 @@ export function FileUpload({
</span>
</div>
<Button
aria-label='Remove file'
type='button'
variant='ghost'
className='-translate-y-1/2 absolute top-1/2 right-[4px] size-6 p-0'
Expand Down
1 change: 1 addition & 0 deletions ...components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,6 +337,7 @@ export function SelectorCombobox({
/>
{showClearButton && (
<Button
aria-label='Clear selection'
type='button'
variant='ghost'
className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10 size-6 p-0'
Expand Down
1 change: 1 addition & 0 deletions ...lowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -420,6 +420,7 @@ export function Table({
!disabled && (
<td className='w-0 p-0'>
<Button
aria-label='Delete row'
variant='ghost'
className='-translate-y-1/2 absolute top-1/2 right-[8px] opacity-0 transition-opacity group-hover:opacity-100'
onClick={() => handleDeleteRow(rowIndex)}
Expand Down
1 change: 1 addition & 0 deletions ...eId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,7 @@ const renderLabel = (
placeholder='Generate with AI...'
/>
<Button
aria-label='Generate'
variant='primary'
disabled={!wandState.searchQuery.trim() || wandState.isStreaming}
onMouseDown={(e: React.MouseEvent) => {
Expand Down
1 change: 1 addition & 0 deletions .../app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -607,6 +607,7 @@ export function Editor() {
<Tooltip.Root>
<Tooltip.Trigger asChild>
<Button
aria-label='Open workflow'
type='button'
variant='ghost'
onClick={handleOpenChildWorkflow}
Expand Down
10 changes: 8 additions & 2 deletions apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -741,7 +741,7 @@ export const Panel = memo(function Panel() {
<div className='flex gap-1.5'>
<DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
<DropdownMenuTrigger asChild>
<Button className='size-[30px] rounded-[5px]'>
<Button aria-label='Workflow actions' className='size-[30px] rounded-[5px]'>
<MoreHorizontal className='size-[14px]' />
</Button>
</DropdownMenuTrigger>
Expand Down Expand Up @@ -801,6 +801,7 @@ export const Panel = memo(function Panel() {
</DropdownMenuContent>
</DropdownMenu>
<Button
aria-label={isChatOpen ? 'Close chat' : 'Open chat'}
className='size-[30px] rounded-[5px]'
variant={isChatOpen ? 'active' : 'default'}
onClick={() => setIsChatOpen(!isChatOpen)}
Expand Down Expand Up @@ -911,7 +912,12 @@ export const Panel = memo(function Panel() {
{copilotChatTitle || 'New Chat'}
</h2>
<div className='flex items-center gap-2'>
<Button variant='ghost' className='p-0' onClick={handleCopilotNewChat}>
<Button
aria-label='New Chat'
variant='ghost'
className='p-0'
onClick={handleCopilotNewChat}
>
<Plus className='size-[14px]' />
</Button>
<DropdownMenu
Expand Down
Loading
Loading