From 1143f73f591c2d2511315b6aa8d7350d48c1be26 Mon Sep 17 00:00:00 2001 From: Daniel Lew Date: Thu, 11 Dec 2025 15:35:17 -0600 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=87=20fix:=20Hide=20Button=20Icons=20f?= =?UTF-8?q?rom=20Screen=20Readers=20(#10776)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit If you've got a screen reader that is reading out the whole page, each icon button (i.e., ``) will have both the button's aria-label read out as well as the title from the SVG (which is usually just "image"). Since we are pretty good about setting aria-labels, we should instead use `aria-hidden="true"` on these images, since they are not useful to be read out. I don't consider this a comprehensive review of all icons in the app, but I knocked out all the low hanging fruit in this commit. --- client/src/components/Agents/AgentDetail.tsx | 2 +- client/src/components/Agents/SearchBar.tsx | 1 + client/src/components/Artifacts/Artifacts.tsx | 8 ++++++-- client/src/components/Artifacts/Code.tsx | 6 +++++- .../components/Artifacts/DownloadArtifact.tsx | 6 +++++- client/src/components/Banners/Banner.tsx | 2 +- client/src/components/Chat/AddMultiConvo.tsx | 2 +- client/src/components/Chat/Input/Artifacts.tsx | 4 ++-- .../components/Chat/Input/ArtifactsSubMenu.tsx | 4 ++-- .../components/Chat/Input/CodeInterpreter.tsx | 2 +- .../src/components/Chat/Input/CollapseChat.tsx | 4 ++-- .../components/Chat/Input/Files/SourceIcon.tsx | 6 +++--- .../Chat/Input/Files/Table/Columns.tsx | 8 ++++---- .../Chat/Input/Files/Table/DataTable.tsx | 2 +- .../Chat/Input/Files/Table/SortFilterHeader.tsx | 11 +++++++---- .../src/components/Chat/Input/HeaderOptions.tsx | 2 +- .../src/components/Chat/Input/ToolsDropdown.tsx | 10 +++++----- client/src/components/Chat/Input/WebSearch.tsx | 2 +- .../Menus/Endpoints/components/EndpointItem.tsx | 2 +- .../Endpoints/components/EndpointModelItem.tsx | 5 ++++- .../Menus/Endpoints/components/SearchResults.tsx | 4 +++- client/src/components/Chat/Menus/PresetsMenu.tsx | 2 +- .../src/components/Chat/Menus/UI/TitleButton.tsx | 2 +- .../Chat/Messages/Content/AgentHandoff.tsx | 1 + .../Chat/Messages/Content/CancelledIcon.tsx | 2 +- .../Chat/Messages/Content/DialogImage.tsx | 12 ++++++------ .../Chat/Messages/Content/Parts/EditTextPart.tsx | 4 ++-- .../Chat/Messages/Content/Parts/Thinking.tsx | 6 +++++- .../Chat/Messages/Content/ProgressText.tsx | 4 ++-- .../Chat/Messages/Content/ToolCall.tsx | 2 +- client/src/components/Chat/Messages/Feedback.tsx | 2 +- client/src/components/Chat/Messages/Fork.tsx | 16 ++++++++-------- .../components/Chat/Messages/SearchButtons.tsx | 2 +- client/src/components/Chat/TemporaryChat.tsx | 2 +- .../Conversations/ConvoOptions/ConvoOptions.tsx | 10 +++++----- .../Conversations/ConvoOptions/ShareButton.tsx | 6 +++++- .../ConvoOptions/SharedLinkButton.tsx | 6 +++--- .../components/Endpoints/MessageEndpointIcon.tsx | 2 +- client/src/components/Endpoints/MinimalIcon.tsx | 2 +- .../components/Endpoints/Settings/Examples.tsx | 4 ++-- client/src/components/Endpoints/URLIcon.tsx | 2 +- .../components/Files/FileList/FileSidePanel.tsx | 4 ++-- client/src/components/MCP/MCPConfigDialog.tsx | 6 +++--- .../src/components/MCP/MCPServerStatusIcon.tsx | 11 +++++++---- .../MCP/ServerInitializationSection.tsx | 2 +- .../src/components/Messages/Content/RunCode.tsx | 2 +- client/src/components/Nav/AccountSettings.tsx | 2 +- .../components/Nav/AgentMarketplaceButton.tsx | 2 +- client/src/components/Nav/SearchBar.tsx | 2 +- client/src/components/Nav/Settings.tsx | 6 +++--- .../Nav/SettingsTabs/Account/Avatar.tsx | 14 +++++++------- .../Nav/SettingsTabs/Account/BackupCodesItem.tsx | 2 +- .../Nav/SettingsTabs/Account/DeleteAccount.tsx | 4 ++-- .../Account/TwoFactorAuthentication.tsx | 2 +- .../Account/TwoFactorPhases/BackupPhase.tsx | 2 +- .../Account/TwoFactorPhases/QRPhase.tsx | 6 +++++- .../Account/TwoFactorPhases/SetupPhase.tsx | 6 +++++- .../components/Nav/SettingsTabs/DangerButton.tsx | 2 +- .../SettingsTabs/Data/ImportConversations.tsx | 2 +- .../SettingsTabs/General/ArchivedChatsTable.tsx | 4 ++-- .../Nav/SettingsTabs/Speech/Speech.tsx | 4 ++-- .../components/Plugins/Store/PluginAuthForm.tsx | 2 +- .../Plugins/Store/PluginStoreDialog.tsx | 5 ++--- .../components/Plugins/Store/PluginStoreItem.tsx | 7 +++++-- client/src/components/Prompts/AdminSettings.tsx | 2 +- client/src/components/Prompts/BackToChat.tsx | 2 +- client/src/components/Prompts/DeleteVersion.tsx | 2 +- client/src/components/Prompts/Groups/List.tsx | 2 +- client/src/components/Prompts/PromptForm.tsx | 4 ++-- client/src/components/Prompts/SharePrompt.tsx | 2 +- .../src/components/Sharing/AccessRolesPicker.tsx | 2 +- .../Sharing/GenericGrantAccessDialog.tsx | 16 ++++++++++------ .../Sharing/PeoplePicker/SearchPicker.tsx | 5 ++++- .../PeoplePicker/SelectedPrincipalsList.tsx | 6 +++--- .../SidePanel/Agents/Advanced/AdvancedPanel.tsx | 2 +- .../SidePanel/Agents/Advanced/AgentChain.tsx | 2 +- .../components/SidePanel/Agents/AgentPanel.tsx | 2 +- .../components/SidePanel/Agents/Code/Action.tsx | 2 +- .../src/components/SidePanel/Agents/MCPTool.tsx | 2 +- .../SidePanel/Agents/Search/InputSection.tsx | 10 ++++++++-- .../SidePanel/Bookmarks/BookmarkTable.tsx | 2 +- .../SidePanel/Builder/ActionCallback.tsx | 6 +++++- .../Builder/AssistantConversationStarters.tsx | 4 ++-- .../components/SidePanel/Files/PanelColumns.tsx | 2 +- client/src/components/SidePanel/MCP/MCPPanel.tsx | 4 ++-- .../SidePanel/Memories/MemoryViewer.tsx | 2 +- client/src/components/SidePanel/Nav.tsx | 2 +- client/src/components/Tools/MCPToolItem.tsx | 8 ++++---- client/src/components/Tools/ToolItem.tsx | 4 ++-- client/src/components/Web/SourceHovercard.tsx | 2 +- client/src/components/Web/Sources.tsx | 12 ++++++------ packages/client/src/components/Badge.tsx | 1 + packages/client/src/components/Dialog.tsx | 2 +- .../client/src/components/OriginalDialog.tsx | 2 +- packages/client/src/components/Pagination.tsx | 6 +++--- packages/client/src/components/Radio.tsx | 6 +++++- packages/client/src/components/Tag.tsx | 2 +- packages/client/src/components/ThemeSelector.tsx | 6 +++--- packages/client/src/svgs/AnthropicIcon.tsx | 1 + .../client/src/svgs/AnthropicMinimalIcon.tsx | 1 + packages/client/src/svgs/AppleIcon.tsx | 1 + packages/client/src/svgs/ArchiveIcon.tsx | 1 + packages/client/src/svgs/AssistantIcon.tsx | 1 + packages/client/src/svgs/AttachmentIcon.tsx | 1 + packages/client/src/svgs/AzureMinimalIcon.tsx | 1 + packages/client/src/svgs/BedrockIcon.tsx | 1 + packages/client/src/svgs/BirthdayIcon.tsx | 1 + packages/client/src/svgs/Blocks.tsx | 1 + packages/client/src/svgs/CautionIcon.tsx | 1 + packages/client/src/svgs/ChatGPTMinimalIcon.tsx | 1 + packages/client/src/svgs/ChatIcon.tsx | 1 + packages/client/src/svgs/CheckMark.tsx | 1 + packages/client/src/svgs/CircleHelpIcon.tsx | 1 + packages/client/src/svgs/Clipboard.tsx | 1 + packages/client/src/svgs/CodeyIcon.tsx | 1 + packages/client/src/svgs/ContinueIcon.tsx | 1 + packages/client/src/svgs/ConvoIcon.tsx | 1 + packages/client/src/svgs/CrossIcon.tsx | 1 + packages/client/src/svgs/CustomMinimalIcon.tsx | 1 + packages/client/src/svgs/DarkModeIcon.tsx | 1 + packages/client/src/svgs/DataIcon.tsx | 1 + packages/client/src/svgs/DiscordIcon.tsx | 1 + packages/client/src/svgs/DislikeIcon.tsx | 1 + packages/client/src/svgs/DotsIcon.tsx | 1 + packages/client/src/svgs/EditIcon.tsx | 1 + packages/client/src/svgs/ExperimentIcon.tsx | 1 + packages/client/src/svgs/FacebookIcon.tsx | 2 +- packages/client/src/svgs/FileIcon.tsx | 1 + packages/client/src/svgs/GPTIcon.tsx | 1 + packages/client/src/svgs/GearIcon.tsx | 1 + packages/client/src/svgs/GeminiIcon.tsx | 1 + packages/client/src/svgs/GithubIcon.tsx | 2 +- packages/client/src/svgs/GoogleIcon.tsx | 8 +++++++- packages/client/src/svgs/GoogleIconChat.tsx | 1 + packages/client/src/svgs/GoogleMinimalIcon.tsx | 1 + packages/client/src/svgs/LightModeIcon.tsx | 1 + packages/client/src/svgs/LikeIcon.tsx | 1 + packages/client/src/svgs/LinkIcon.tsx | 1 + packages/client/src/svgs/ListeningIcon.tsx | 1 + packages/client/src/svgs/LockIcon.tsx | 1 + packages/client/src/svgs/LogOutIcon.tsx | 1 + packages/client/src/svgs/MCPIcon.tsx | 1 + packages/client/src/svgs/MessagesSquared.tsx | 1 + packages/client/src/svgs/MinimalPlugin.tsx | 1 + packages/client/src/svgs/MobileSidebar.tsx | 1 + packages/client/src/svgs/NewChatIcon.tsx | 3 ++- packages/client/src/svgs/OpenAIMinimalIcon.tsx | 1 + packages/client/src/svgs/OpenIDIcon.tsx | 8 +++++++- packages/client/src/svgs/PaLMIcon.tsx | 1 + packages/client/src/svgs/PaLMinimalIcon.tsx | 1 + packages/client/src/svgs/PersonalizationIcon.tsx | 1 + packages/client/src/svgs/PinIcon.tsx | 1 + packages/client/src/svgs/Plugin.tsx | 1 + packages/client/src/svgs/RegenerateIcon.tsx | 1 + packages/client/src/svgs/RenameIcon.tsx | 1 + packages/client/src/svgs/SamlIcon.tsx | 1 + packages/client/src/svgs/SaveIcon.tsx | 1 + packages/client/src/svgs/SendIcon.tsx | 1 + packages/client/src/svgs/SendMessageIcon.tsx | 1 + packages/client/src/svgs/SharePointIcon.tsx | 9 ++++++++- packages/client/src/svgs/Sidebar.tsx | 1 + packages/client/src/svgs/Sparkles.tsx | 1 + packages/client/src/svgs/SpeechIcon.tsx | 1 + packages/client/src/svgs/Spinner.tsx | 1 + packages/client/src/svgs/SquirclePlusIcon.tsx | 1 + packages/client/src/svgs/StopGeneratingIcon.tsx | 1 + packages/client/src/svgs/SunIcon.tsx | 1 + packages/client/src/svgs/SwitchIcon.tsx | 1 + packages/client/src/svgs/ThumbDownIcon.tsx | 2 ++ packages/client/src/svgs/ThumbUpIcon.tsx | 2 ++ packages/client/src/svgs/TrashIcon.tsx | 1 + packages/client/src/svgs/UserIcon.tsx | 1 + packages/client/src/svgs/VectorIcon.tsx | 2 +- packages/client/src/svgs/VolumeIcon.tsx | 1 + packages/client/src/svgs/VolumeMuteIcon.tsx | 1 + 175 files changed, 340 insertions(+), 183 deletions(-) diff --git a/client/src/components/Agents/AgentDetail.tsx b/client/src/components/Agents/AgentDetail.tsx index ef77734e30..7047ad67a6 100644 --- a/client/src/components/Agents/AgentDetail.tsx +++ b/client/src/components/Agents/AgentDetail.tsx @@ -142,7 +142,7 @@ const AgentDetail: React.FC = ({ agent, isOpen, onClose }) => onClick={handleCopyLink} title={localize('com_agents_copy_link')} > - + {/* Agent avatar - top center */} diff --git a/client/src/components/Agents/SearchBar.tsx b/client/src/components/Agents/SearchBar.tsx index af463682b2..7fab811b4c 100644 --- a/client/src/components/Agents/SearchBar.tsx +++ b/client/src/components/Agents/SearchBar.tsx @@ -99,6 +99,7 @@ const SearchBar: React.FC = ({ value, onSearch, className = '' }