codesnippetspro · imantsk · Apr 14, 2026 · Apr 13, 2026
diff --git 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<CodeEditorProps> = ({ isExpanded, setIsExpande
 				<h2><label htmlFor="snippet-code">{__('Snippet Content', 'code-snippets')}</label></h2>
 
 				<Button small className="expand-editor-button" onClick={() => setIsExpanded(current => !current)}>
-					{isExpanded ? <MinimiseIcon /> : <ExpandIcon />}
+					{isExpanded ? <MinimiseIcon aria-hidden="true" /> : <ExpandIcon aria-hidden="true" />}
 					{isExpanded ? __('Minimize', 'code-snippets') : __('Expand', 'code-snippets')}
 				</Button>
 			</div>

diff --git 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<CodeEditorShortcutsProps> = ({ editor
 
 	return shortcutKeys
 		? <div className="snippet-editor-help tooltip tooltip-inline tooltip-start">
-			<span className={`dashicons dashicons-editor-help cm-s-${editorTheme}`}></span>
+			<span className={`dashicons dashicons-editor-help cm-s-${editorTheme}`} aria-hidden="true"></span>
 
 			<div className="tooltip-content">
 				<table>

diff --git 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 }) =>
 					<>
-						<span className={`dashicons dashicons-${SCOPE_ICONS[value]}`}></span>{` ${label}`}
+						<span className={`dashicons dashicons-${SCOPE_ICONS[value]}`} aria-hidden="true"></span>{` ${label}`}
 					</>
 				}
 				onChange={option =>

diff --git a/src/js/components/ManageMenu/CommunityCloud/SearchResults.tsx b/src/js/components/ManageMenu/CommunityCloud/SearchResults.tsx
@@ -45,7 +45,7 @@ const CloudSnippetDetails: React.FC<CloudSnippetDetailsProps> = ({ snippet, setI
 		<div className="cloud-snippet-meta">
 			<Badge name={getSnippetType(snippet)} />
 			<span className="cloud-snippet-votes">
-				<span className="dashicons dashicons-thumbs-up"></span>
+				<span className="dashicons dashicons-thumbs-up" aria-hidden="true"></span>
 				<span>{snippet.vote_count}</span>
 			</span>
 			{0 < snippet.tags.length

diff --git a/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx b/src/js/components/ManageMenu/SnippetsTable/TableColumns.tsx
@@ -163,7 +163,7 @@ const RowActions: React.FC<ColumnProps> = ({ snippet }) => {
 const NameColumn: React.FC<ColumnProps> = ({ snippet }) =>
 	<>
 		{snippet.locked && (
-			<Tooltip inline end icon={<span className="dashicons dashicons-lock"></span>}>
+			<Tooltip inline end icon={<span className="dashicons dashicons-lock" aria-hidden="true"></span>}>
 				{__('This snippet is locked and cannot be modified.', 'code-snippets')}
 			</Tooltip>)}
 

diff --git a/src/js/components/WelcomeMenu/Changelog.tsx b/src/js/components/WelcomeMenu/Changelog.tsx
@@ -38,7 +38,7 @@ interface ChangelogSectionProps {
 const ChangelogSection: React.FC<ChangelogSectionProps> = ({ section, entries }) =>
 	<>
 		<h4>
-			<span className={`dashicons dashicons-${CHANGELOG_ICONS[section]}`}></span>
+			<span className={`dashicons dashicons-${CHANGELOG_ICONS[section]}`} aria-hidden="true"></span>
 			{CHANGELOG_LABELS[section]}
 		</h4>
 		<ul>

diff --git 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<BadgeProps> = ({ name, small, inverted, children }) =>
 	<span className={classnames('badge', `${name}-badge`, { 'small-badge': small, 'inverted-badge': inverted })}>
 		{badgeIcons[name]
-			? <span className={`dashicons dashicons-${badgeIcons[name]}`} />
-			: children ?? name}
+			? <span className={`dashicons dashicons-${badgeIcons[name]}`} aria-hidden="true" />
+			: children ?? name
+		}
 	</span>
diff --git a/src/js/components/common/CopyToClipboardButton.tsx b/src/js/components/common/CopyToClipboardButton.tsx
@@ -21,13 +21,13 @@ interface StatusIconProps {
 const StatusIcon: React.FC<StatusIconProps> = ({ status }) => {
 	switch (status) {
 		case Status.INITIAL:
-			return <CopyIcon />
+			return <CopyIcon aria-hidden="true" />
 		case Status.PROGRESSING:
-			return <span className="spinner-wrapper"><Spinner /></span>
+			return <span className="spinner-wrapper" aria-hidden="true"><Spinner /></span>
 		case Status.SUCCESS:
-			return <span className="dashicons dashicons-yes"></span>
+			return <span className="dashicons dashicons-yes" aria-hidden="true"></span>
 		case Status.ERROR:
-			return <span className="dashicons dashicons-warning"></span>
+			return <span className="dashicons dashicons-warning" aria-hidden="true"></span>
 	}
 }
 

diff --git a/src/js/components/common/Toolbar.tsx b/src/js/components/common/Toolbar.tsx
@@ -41,30 +41,30 @@ const LOWER_NAV_LINKS: NavLink[] = [
 		name: 'snippets',
 		url: window.CODE_SNIPPETS?.urls.manage,
 		label: __('Snippets', 'code-snippets'),
-		icon: <SnippetsIcon />
+		icon: <SnippetsIcon aria-hidden="true" />
 	},
 	{
 		name: 'cloud-community',
 		label: __('Community Cloud', 'code-snippets'),
-		icon: <CommunityIcon />
+		icon: <CommunityIcon aria-hidden="true" />
 	},
 	{
 		name: 'cloud-library',
 		label: __('My Library', 'code-snippets'),
-		icon: <LibraryIcon />,
+		icon: <LibraryIcon aria-hidden="true" />,
 		pro: true
 	},
 	{
 		name: 'cloud-teams',
 		label: __('My Teams', 'code-snippets'),
-		icon: <TeamsIcon />,
+		icon: <TeamsIcon aria-hidden="true" />,
 		pro: true
 	},
 	{
 		name: 'settings',
 		url: window.CODE_SNIPPETS?.urls.settings,
 		label: __('Settings', 'code-snippets'),
-		icon: <SettingsIcon />
+		icon: <SettingsIcon aria-hidden="true" />
 	}
 ]
 

diff --git a/src/js/components/common/Tooltip.tsx b/src/js/components/common/Tooltip.tsx
@@ -20,13 +20,13 @@ export const Tooltip: React.FC<TooltipProps> = ({ block, inline, start, end, ico
 		{ 'tooltip-block': block, 'tooltip-inline': inline, 'tooltip-start': start, 'tooltip-end': end },
 		className
 	)}>
-		{icon ?? <span className="dashicons dashicons-editor-help"></span>}
+		{icon ?? <span className="dashicons dashicons-editor-help" aria-hidden="true"></span>}
 		<div className="tooltip-content">
 			{children}
 		</div>
 	</div>
 
 export const ErrorTooltip: React.FC<{ message: string }> = ({ message }) =>
-	<Tooltip block end icon={<span className="dashicons dashicons-warning"></span>}>
+	<Tooltip block end icon={<span className="dashicons dashicons-warning" aria-hidden="true"></span>}>
 		{`${trimTrailingChar(message, '.!?')}. ${__('Please try again.', 'code-snippets')}`}
 	</Tooltip>
diff --git 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"
 			/>
 			<p>
 				{createInterpolateElement(
@@ -31,7 +32,7 @@ export const UpsellBanner = () => {
 			</ExternalLink>
 
 			<Button small link onClick={() => setIsDismissed(true)}>
-				<span className="dashicons dashicons-no-alt"></span>
+				<span className="dashicons dashicons-no-alt" aria-hidden="true"></span>
 			</Button>
 		</div>
 }
diff --git 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 = () =>
-	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const CopyIcon = (props: React.SVGProps<SVGSVGElement>) =>
+	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
 		<path
 			d="M12 6V4.5C12 4.10218 11.842 3.72064 11.5607 3.43934C11.2794 3.15804 10.8978 3 10.5 3H4.5C4.10218 3 3.72064 3.15804 3.43934 3.43934C3.15804 3.72064 3 4.10218 3 4.5V10.5C3 10.8978 3.15804 11.2794 3.43934 11.5607C3.72064 11.842 4.10218 12 4.5 12H6M6 7.5C6 7.10218 6.15804 6.72065 6.43934 6.43934C6.72065 6.15804 7.10218 6 7.5 6H13.5C13.8978 6 14.2794 6.15804 14.5607 6.43934C14.842 6.72065 15 7.10218 15 7.5V13.5C15 13.8978 14.842 14.2794 14.5607 14.5607C14.2794 14.842 13.8978 15 13.5 15H7.5C7.10218 15 6.72065 14.842 6.43934 14.5607C6.15804 14.2794 6 13.8978 6 13.5V7.5Z"
 			stroke="#F0F0F0"

diff --git a/src/js/components/common/icons/ExpandIcon.tsx b/src/js/components/common/icons/ExpandIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-export const ExpandIcon = () =>
-	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const ExpandIcon = (props: React.SVGProps<SVGSVGElement>) =>
+	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
 		<path d="M12 3H15V6" />
 		<path d="M10.5 7.5L15 3L10.5 7.5Z" />
 		<path d="M6 15H3V12" />

diff --git 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 = () =>
-	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const MinimiseIcon = (props: React.SVGProps<SVGSVGElement>) =>
+	<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
 		<path d="M3.75 6.75H6.75V3.75" />
 		<path d="M2.25 2.25L6.75 6.75L2.25 2.25Z" />
 		<path d="M3.75 11.25H6.75V14.25" />

diff --git 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 = () =>
-	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const CommunityIcon = (props: React.SVGProps<SVGSVGElement>) =>
+	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
 		<path
 			d="M20.0417 20.0417L22.75 22.75M4.33333 6.5H21.6667M4.33333 13H8.66666M4.33333 19.5H8.66666M11.9167 16.25C11.9167 17.3993 12.3732 18.5015 13.1859 19.3141C13.9985 20.1268 15.1007 20.5833 16.25 20.5833C17.3993 20.5833 18.5015 20.1268 19.3141 19.3141C20.1268 18.5015 20.5833 17.3993 20.5833 16.25C20.5833 15.1007 20.1268 13.9985 19.3141 13.1859C18.5015 12.3732 17.3993 11.9167 16.25 11.9167C15.1007 11.9167 13.9985 12.3732 13.1859 13.1859C12.3732 13.9985 11.9167 15.1007 11.9167 16.25Z"
 			stroke="currentColor"
@@ -11,8 +11,8 @@ export const CommunityIcon = () =>
 		/>
 	</svg>
 
-export const LibraryIcon = () =>
-	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const LibraryIcon = (props: React.SVGProps<SVGSVGElement>) =>
+	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
 		<path
 			d="M11.9167 19.5045H7.21175C4.42541 19.5002 2.16666 17.326 2.16666 14.6436C2.16666 11.9624 4.42541 9.78812 7.21175 9.78812C7.6375 7.87928 9.15525 6.32145 11.193 5.7007C13.2297 5.08103 15.4787 5.49162 17.0907 6.78403C18.7027 8.0732 19.4328 10.0416 19.0082 11.9505H20.0807C20.8821 11.9519 21.6621 12.2097 22.3067 12.686C22.9513 13.1624 23.4266 13.8324 23.6632 14.5981M21.6667 22.7502L23.8333 20.5835L21.6667 18.4169M18.4167 18.4169L16.25 20.5835L18.4167 22.7502"
 			stroke="currentColor"
@@ -22,8 +22,8 @@ export const LibraryIcon = () =>
 		/>
 	</svg>
 
-export const SettingsIcon = () =>
-	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const SettingsIcon = (props: React.SVGProps<SVGSVGElement>) =>
+	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
 		<path
 			d="M11.1854 4.67675C11.6469 2.77442 14.3531 2.77442 14.8146 4.67675C14.8838 4.96253 15.0196 5.22793 15.2108 5.45133C15.402 5.67474 15.6432 5.84984 15.9149 5.96239C16.1865 6.07494 16.4809 6.12176 16.7741 6.09902C17.0673 6.07629 17.3509 5.98466 17.602 5.83158C19.2736 4.81325 21.1878 6.72642 20.1695 8.39908C20.0166 8.65004 19.9252 8.93353 19.9025 9.2265C19.8798 9.51948 19.9266 9.81367 20.039 10.0852C20.1514 10.3567 20.3263 10.5978 20.5495 10.789C20.7726 10.9802 21.0377 11.116 21.3233 11.1854C23.2256 11.6469 23.2256 14.3531 21.3233 14.8146C21.0375 14.8838 20.7721 15.0196 20.5487 15.2108C20.3253 15.402 20.1502 15.6432 20.0376 15.9149C19.9251 16.1865 19.8782 16.4809 19.901 16.7741C19.9237 17.0673 20.0153 17.3509 20.1684 17.602C21.1868 19.2736 19.2736 21.1878 17.6009 20.1695C17.35 20.0166 17.0665 19.9252 16.7735 19.9025C16.4805 19.8798 16.1863 19.9266 15.9148 20.039C15.6433 20.1514 15.4022 20.3263 15.211 20.5495C15.0198 20.7726 14.884 21.0377 14.8146 21.3233C14.3531 23.2256 11.6469 23.2256 11.1854 21.3233C11.1162 21.0375 10.9804 20.7721 10.7892 20.5487C10.598 20.3253 10.3568 20.1502 10.0851 20.0376C9.81347 19.9251 9.51907 19.8782 9.2259 19.901C8.93273 19.9237 8.64907 20.0153 8.398 20.1684C6.72642 21.1868 4.81217 19.2736 5.8305 17.6009C5.98336 17.35 6.07485 17.0665 6.09752 16.7735C6.1202 16.4805 6.07343 16.1863 5.96101 15.9148C5.84859 15.6433 5.6737 15.4022 5.45055 15.211C5.22739 15.0198 4.96228 14.884 4.67675 14.8146C2.77442 14.3531 2.77442 11.6469 4.67675 11.1854C4.96253 11.1162 5.22793 10.9804 5.45133 10.7892C5.67474 10.598 5.84984 10.3568 5.96239 10.0851C6.07494 9.81347 6.12176 9.51907 6.09902 9.2259C6.07629 8.93273 5.98466 8.64907 5.83158 8.398C4.81325 6.72642 6.72642 4.81217 8.39908 5.8305C9.48242 6.48917 10.8864 5.90633 11.1854 4.67675Z"
 			stroke="currentColor"
@@ -40,8 +40,8 @@ export const SettingsIcon = () =>
 		/>
 	</svg>
 
-export const SnippetsIcon = () =>
-	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const SnippetsIcon = (props: React.SVGProps<SVGSVGElement>) =>
+	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
 		<path
 			d="M7.58333 8.66634L3.25 12.9997L7.58333 17.333M18.4167 8.66634L22.75 12.9997L18.4167 17.333M15.1667 4.33301L10.8333 21.6663"
 			stroke="currentColor"
@@ -51,8 +51,8 @@ export const SnippetsIcon = () =>
 		/>
 	</svg>
 
-export const TeamsIcon = () =>
-	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const TeamsIcon = (props: React.SVGProps<SVGSVGElement>) =>
+	<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
 		<path
 			d="M3.25 22.75V20.5833C3.25 19.4341 3.70655 18.3319 4.5192 17.5192C5.33186 16.7065 6.43406 16.25 7.58333 16.25H11.9167C13.0659 16.25 14.1681 16.7065 14.9808 17.5192C15.7935 18.3319 16.25 19.4341 16.25 20.5833V22.75M17.3333 3.39084C18.2655 3.6295 19.0916 4.1716 19.6816 4.93167C20.2716 5.69175 20.5918 6.62657 20.5918 7.58876C20.5918 8.55094 20.2716 9.48576 19.6816 10.2458C19.0916 11.0059 18.2655 11.548 17.3333 11.7867M22.75 22.75V20.5834C22.7445 19.6269 22.4227 18.6992 21.8349 17.9448C21.247 17.1904 20.4261 16.6516 19.5 16.4125M5.41667 7.58333C5.41667 8.73261 5.87321 9.83481 6.68587 10.6475C7.49853 11.4601 8.60073 11.9167 9.75 11.9167C10.8993 11.9167 12.0015 11.4601 12.8141 10.6475C13.6268 9.83481 14.0833 8.73261 14.0833 7.58333C14.0833 6.43406 13.6268 5.33186 12.8141 4.5192C12.0015 3.70655 10.8993 3.25 9.75 3.25C8.60073 3.25 7.49853 3.70655 6.68587 4.5192C5.87321 5.33186 5.41667 6.43406 5.41667 7.58333Z"
 			stroke="currentColor"

diff --git a/src/php/Admin/Menus/Manage_Menu.php b/src/php/Admin/Menus/Manage_Menu.php
@@ -90,7 +90,7 @@ public function register_upgrade_menu() {
 		$menu_title = sprintf(
 			'<span class="button button-primary code-snippets-upgrade-button">%s %s</span>',
 			_x( 'Go Pro', 'top-level menu label', 'code-snippets' ),
-			'<span class="dashicons dashicons-external"></span>'
+			'<span class="dashicons dashicons-external" aria-hidden="true"></span>'
 		);
 
 		$hook = add_submenu_page(

diff --git 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 <span class="code-snippets-external-icon dashicons dashicons-external"></span>',
+			'%s <span class="code-snippets-external-icon dashicons dashicons-external" aria-hidden="true"></span>',
 			esc_html__( 'Safe Mode', 'code-snippets' )
 		);