From 595ed4be0ffa528c1d025cb51867230708f1eae4 Mon Sep 17 00:00:00 2001 From: Rami Yushuvaev Date: Mon, 13 Apr 2026 19:39:39 +0300 Subject: [PATCH] Fix: visually hide decorative icons for cleaner accessibility tree --- .../SnippetForm/fields/CodeEditor.tsx | 2 +- .../fields/CodeEditorShortcuts.tsx | 2 +- .../fields/SnippetLocationInput.tsx | 2 +- .../CommunityCloud/SearchResults.tsx | 2 +- .../ManageMenu/SnippetsTable/TableColumns.tsx | 2 +- src/js/components/WelcomeMenu/Changelog.tsx | 2 +- src/js/components/common/Badge.tsx | 5 +++-- .../common/CopyToClipboardButton.tsx | 8 ++++---- src/js/components/common/Toolbar.tsx | 10 +++++----- src/js/components/common/Tooltip.tsx | 4 ++-- src/js/components/common/UpsellBanner.tsx | 3 ++- src/js/components/common/icons/CopyIcon.tsx | 4 ++-- src/js/components/common/icons/ExpandIcon.tsx | 4 ++-- .../components/common/icons/MinimiseIcon.tsx | 4 ++-- .../components/common/icons/ToolbarIcons.tsx | 20 +++++++++---------- src/php/Admin/Menus/Manage_Menu.php | 2 +- src/php/Integration/Admin_Bar.php | 2 +- 17 files changed, 40 insertions(+), 38 deletions(-) diff --git a/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx b/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx index 19eb19e8a..b94ca0168 100644 --- a/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx +++ b/src/js/components/EditMenu/SnippetForm/fields/CodeEditor.tsx @@ -108,7 +108,7 @@ export const CodeEditor: React.FC = ({ isExpanded, setIsExpande

diff --git a/src/js/components/EditMenu/SnippetForm/fields/CodeEditorShortcuts.tsx b/src/js/components/EditMenu/SnippetForm/fields/CodeEditorShortcuts.tsx index 1b0662286..5e44a7a27 100644 --- a/src/js/components/EditMenu/SnippetForm/fields/CodeEditorShortcuts.tsx +++ b/src/js/components/EditMenu/SnippetForm/fields/CodeEditorShortcuts.tsx @@ -166,7 +166,7 @@ export const CodeEditorShortcuts: React.FC = ({ editor return shortcutKeys ?
- +
diff --git a/src/js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx b/src/js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx index f9eee80fa..0a9356384 100644 --- a/src/js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx +++ b/src/js/components/EditMenu/SnippetForm/fields/SnippetLocationInput.tsx @@ -62,7 +62,7 @@ export const SnippetLocationInput: React.FC = () => { value={options.find(option => option.value === snippet.scope)} formatOptionLabel={({ label, value }) => <> - {` ${label}`} + {` ${label}`} } onChange={option => diff --git a/src/js/components/ManageMenu/CommunityCloud/SearchResults.tsx b/src/js/components/ManageMenu/CommunityCloud/SearchResults.tsx index 88fb49b39..b8b798c7e 100644 --- a/src/js/components/ManageMenu/CommunityCloud/SearchResults.tsx +++ b/src/js/components/ManageMenu/CommunityCloud/SearchResults.tsx @@ -45,7 +45,7 @@ const CloudSnippetDetails: React.FC = ({ snippet, setI
- + {snippet.vote_count} {0 < snippet.tags.length diff --git a/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx b/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx index ff4335ac4..c32d40632 100644 --- a/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx +++ b/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx @@ -163,7 +163,7 @@ const RowActions: React.FC = ({ snippet }) => { const NameColumn: React.FC = ({ snippet }) => <> {snippet.locked && ( - }> + )} diff --git a/src/js/components/WelcomeMenu/Changelog.tsx b/src/js/components/WelcomeMenu/Changelog.tsx index 303667320..f92069aa2 100644 --- a/src/js/components/WelcomeMenu/Changelog.tsx +++ b/src/js/components/WelcomeMenu/Changelog.tsx @@ -38,7 +38,7 @@ interface ChangelogSectionProps { const ChangelogSection: React.FC = ({ section, entries }) => <>

- + {CHANGELOG_LABELS[section]}

    diff --git a/src/js/components/common/Badge.tsx b/src/js/components/common/Badge.tsx index 67eb72199..235a57751 100644 --- a/src/js/components/common/Badge.tsx +++ b/src/js/components/common/Badge.tsx @@ -22,6 +22,7 @@ export interface BadgeProps { export const Badge: React.FC = ({ name, small, inverted, children }) => {badgeIcons[name] - ? - : children ?? name} + ? diff --git a/src/js/components/common/CopyToClipboardButton.tsx b/src/js/components/common/CopyToClipboardButton.tsx index 75bc73666..78d5428d3 100644 --- a/src/js/components/common/CopyToClipboardButton.tsx +++ b/src/js/components/common/CopyToClipboardButton.tsx @@ -21,13 +21,13 @@ interface StatusIconProps { const StatusIcon: React.FC = ({ status }) => { switch (status) { case Status.INITIAL: - return + return
export const ErrorTooltip: React.FC<{ message: string }> = ({ message }) => - }> + diff --git a/src/js/components/common/UpsellBanner.tsx b/src/js/components/common/UpsellBanner.tsx index 0b0c31a54..7b0acf67d 100644 --- a/src/js/components/common/UpsellBanner.tsx +++ b/src/js/components/common/UpsellBanner.tsx @@ -15,6 +15,7 @@ export const UpsellBanner = () => { src={`${window.CODE_SNIPPETS?.urls.plugin}/assets/icon.svg`} alt={__('Code Snippets logo', 'code-snippets')} height="34" + aria-hidden="true" />

{createInterpolateElement( @@ -31,7 +32,7 @@ export const UpsellBanner = () => { } diff --git a/src/js/components/common/icons/CopyIcon.tsx b/src/js/components/common/icons/CopyIcon.tsx index 0f8c9c534..892cb3421 100644 --- a/src/js/components/common/icons/CopyIcon.tsx +++ b/src/js/components/common/icons/CopyIcon.tsx @@ -1,7 +1,7 @@ import React from 'react' -export const CopyIcon = () => - +export const CopyIcon = (props: React.SVGProps) => + - +export const ExpandIcon = (props: React.SVGProps) => + diff --git a/src/js/components/common/icons/MinimiseIcon.tsx b/src/js/components/common/icons/MinimiseIcon.tsx index fb0210aa5..005b2902b 100644 --- a/src/js/components/common/icons/MinimiseIcon.tsx +++ b/src/js/components/common/icons/MinimiseIcon.tsx @@ -1,7 +1,7 @@ import React from 'react' -export const MinimiseIcon = () => - +export const MinimiseIcon = (props: React.SVGProps) => + diff --git a/src/js/components/common/icons/ToolbarIcons.tsx b/src/js/components/common/icons/ToolbarIcons.tsx index 2bdc63b06..4153238a0 100644 --- a/src/js/components/common/icons/ToolbarIcons.tsx +++ b/src/js/components/common/icons/ToolbarIcons.tsx @@ -1,7 +1,7 @@ import React from 'react' -export const CommunityIcon = () => - +export const CommunityIcon = (props: React.SVGProps) => + /> -export const LibraryIcon = () => - +export const LibraryIcon = (props: React.SVGProps) => + /> -export const SettingsIcon = () => - +export const SettingsIcon = (props: React.SVGProps) => + /> -export const SnippetsIcon = () => - +export const SnippetsIcon = (props: React.SVGProps) => + /> -export const TeamsIcon = () => - +export const TeamsIcon = (props: React.SVGProps) => + %s %s', _x( 'Go Pro', 'top-level menu label', 'code-snippets' ), - '' + '' ); $hook = add_submenu_page( diff --git a/src/php/Integration/Admin_Bar.php b/src/php/Integration/Admin_Bar.php index f2d808786..d079b3ec1 100644 --- a/src/php/Integration/Admin_Bar.php +++ b/src/php/Integration/Admin_Bar.php @@ -191,7 +191,7 @@ private function add_safe_mode_nodes( WP_Admin_Bar $wp_admin_bar, bool $is_safe_ */ private function add_safe_mode_link( WP_Admin_Bar $wp_admin_bar ): void { $title = sprintf( - '%s ', + '%s ', esc_html__( 'Safe Mode', 'code-snippets' ) );