From 938d84085f05e21b7c6b865a57a873de7a63f1b0 Mon Sep 17 00:00:00 2001
From: Rami Yushuvaev <ramiy@elementor.com>
Date: Fri, 1 May 2026 23:04:37 +0300
Subject: [PATCH] Fix: improve accessibility in welcome screen

---
 src/js/components/WelcomeMenu/Changelog.tsx   |  3 +++
 src/js/components/WelcomeMenu/WelcomeMenu.tsx | 19 +++++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/js/components/WelcomeMenu/Changelog.tsx b/src/js/components/WelcomeMenu/Changelog.tsx
index 942de09f..e2248263 100644
--- a/src/js/components/WelcomeMenu/Changelog.tsx
+++ b/src/js/components/WelcomeMenu/Changelog.tsx
@@ -64,6 +64,9 @@ export const Changelog = () =>
 				target="_blank" rel="noreferrer"
 			>
 				{__('View changelog', 'code-snippets')}
+				<span className="screen-reader-text">
+					{__('(opens in a new tab)', 'code-snippets')}
+				</span>
 			</a>
 		</div>
 		<div className="code-snippets-changelog-entries">
diff --git a/src/js/components/WelcomeMenu/WelcomeMenu.tsx b/src/js/components/WelcomeMenu/WelcomeMenu.tsx
index c78f3820..e2e92e95 100644
--- a/src/js/components/WelcomeMenu/WelcomeMenu.tsx
+++ b/src/js/components/WelcomeMenu/WelcomeMenu.tsx
@@ -20,10 +20,13 @@ const HeroImage = () => {
 					rel="noopener noreferrer"
 				>
 					{__('Read more', 'code-snippets')}
+					<span className="screen-reader-text">
+						{__('(opens in a new tab)', 'code-snippets')}
+					</span>
 				</a>
 			</div>
 			<figure>
-				{!isImageLoaded && <div className="code-snippets-loading-spinner"></div>}
+				{!isImageLoaded && <div className="code-snippets-loading-spinner" aria-hidden="true"></div>}
 				<img
 					src={DATA?.hero.image_url}
 					alt={__('Latest news image', 'code-snippets')}
@@ -49,7 +52,16 @@ const Partners: React.FC<PartnersProps> = ({ partners }) =>
 					</figure>
 					<div className="code-snippets-header-wrapper">
 						<h3>{title}</h3>
-						<a href={follow_url} target="_blank" rel="noopener noreferrer" aria-label={sprintf( /* translators: %s: partner name. */ __('Visit %s', 'code-snippets'), title)}>
+						<a
+							href={follow_url}
+							target="_blank"
+							rel="noopener noreferrer"
+							aria-label={sprintf(
+								/* translators: %s: partner name. */
+								__('Visit %s (opens in a new tab)', 'code-snippets'),
+								title
+							)}
+						>
 							{__('Visit', 'code-snippets')}
 						</a>
 					</div>
@@ -76,6 +88,9 @@ const Articles: React.FC<ArticlesProps> = ({ articles }) =>
 						<p className="item-description">{description}</p>
 						<a href={follow_url} className="button button-secondary" target="_blank" rel="noopener noreferrer">
 							{__('Read more', 'code-snippets')}
+							<span className="screen-reader-text">
+								{__('(opens in a new tab)', 'code-snippets')}
+							</span>
 						</a>
 					</div>
 				</li>)}