From 9e53ced79b529802a0ba9468fcbaa50d7e6f2fe4 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <ramiy@elementor.com>
Date: Fri, 10 Apr 2026 14:31:39 +0300
Subject: [PATCH 1/2] Fix: accessible code snippets toolbar

---
 src/js/components/common/Toolbar.tsx | 43 +++++++++++++++-------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/js/components/common/Toolbar.tsx b/src/js/components/common/Toolbar.tsx
index 70b2f069..f9356887 100644
--- a/src/js/components/common/Toolbar.tsx
+++ b/src/js/components/common/Toolbar.tsx
@@ -78,12 +78,13 @@ const UpperNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 			<img
 				src={`${window.CODE_SNIPPETS?.urls.plugin}/assets/icon.svg`}
 				alt={__('Code Snippets logo', 'code-snippets')}
+				aria-hidden="true"
 			/>
 
 			<h1>{__('Code Snippets', 'code-snippets')}</h1>
 		</div>
 
-		<nav>
+		<nav aria-label={__('Navigation links', 'code-snippets')}>
 			<ul>
 				{UPPER_NAV_LINKS.map(({ name, url, label, external }) =>
 					<li key={name}>
@@ -119,25 +120,27 @@ const currentPage = fetchQueryParam('subpage') ?? fetchQueryParam('page')
 
 const LowerNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 	<div className="code-snippets-toolbar-lower">
-		<ul>
-			{LOWER_NAV_LINKS.map(({ name, url, label, pro, icon }) =>
-				<li key={name}>
-					<a
-						href={url ?? buildUrl(window.CODE_SNIPPETS?.urls.manage, { subpage: name })}
-						className={classnames(`${name}-link`, { 'active-link': currentPage?.endsWith(name) })}
-						onClick={event => {
-							if (pro && !isLicensed()) {
-								event.preventDefault()
-								setIsUpsellDialogOpen(true)
-							}
-						}}
-					>
-						{icon}
-						<span>{label}</span>
-						{pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
-					</a>
-				</li>)}
-		</ul>
+		<nav aria-label={__('Code snippets navigation', 'code-snippets')}>
+			<ul>
+				{LOWER_NAV_LINKS.map(({ name, url, label, pro, icon }) =>
+					<li key={name}>
+						<a
+							href={url ?? buildUrl(window.CODE_SNIPPETS?.urls.manage, { subpage: name })}
+							className={classnames(`${name}-link`, { 'active-link': currentPage?.endsWith(name) })}
+							onClick={event => {
+								if (pro && !isLicensed()) {
+									event.preventDefault()
+									setIsUpsellDialogOpen(true)
+								}
+							}}
+						>
+							{icon}
+							<span>{label}</span>
+							{pro && !isLicensed() && <span className="pro-chip">{__('Pro', 'code-snippets')}</span>}
+						</a>
+					</li>)}
+			</ul>
+		</nav>
 	</div>
 
 export const Toolbar = () => {

From fecb95ef4667f130eb59d64e3b69873bf0786afb Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <92088692+rami-elementor@users.noreply.github.com>
Date: Sun, 12 Apr 2026 11:45:36 -0700
Subject: [PATCH 2/2] Update `aria-labels`

---
 src/js/components/common/Toolbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/components/common/Toolbar.tsx b/src/js/components/common/Toolbar.tsx
index f9356887..4626b76e 100644
--- a/src/js/components/common/Toolbar.tsx
+++ b/src/js/components/common/Toolbar.tsx
@@ -84,7 +84,7 @@ const UpperNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 			<h1>{__('Code Snippets', 'code-snippets')}</h1>
 		</div>
 
-		<nav aria-label={__('Navigation links', 'code-snippets')}>
+		<nav aria-label={__('Main links', 'code-snippets')}>
 			<ul>
 				{UPPER_NAV_LINKS.map(({ name, url, label, external }) =>
 					<li key={name}>
@@ -120,7 +120,7 @@ const currentPage = fetchQueryParam('subpage') ?? fetchQueryParam('page')
 
 const LowerNav: React.FC<NavProps> = ({ setIsUpsellDialogOpen }) =>
 	<div className="code-snippets-toolbar-lower">
-		<nav aria-label={__('Code snippets navigation', 'code-snippets')}>
+		<nav aria-label={__('Main features', 'code-snippets')}>
 			<ul>
 				{LOWER_NAV_LINKS.map(({ name, url, label, pro, icon }) =>
 					<li key={name}>