From 1d2a9a2dd8c6a55448b17bdffb177b3b88d7c2b7 Mon Sep 17 00:00:00 2001
From: Kakashi786 <reactdev593@gmail.com>
Date: Sun, 3 Aug 2025 19:30:25 +0530
Subject: [PATCH] Accessibility: Differentiate external footer links with icon
 and tooltip

---
 src/components/Footer/index.astro | 35 +++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/Footer/index.astro b/src/components/Footer/index.astro
index 8cb5d3026b..5d3a10d439 100644
--- a/src/components/Footer/index.astro
+++ b/src/components/Footer/index.astro
@@ -50,13 +50,35 @@ const bannerEntry = await getEntry("banner", currentLocale);
     <div class="lg:col-start-2 mt-xl lg:mt-0">
       <div class="mb-5" id="socials-footer-category">{t("Socials")}</div>
       <ul aria-labelledby="socials-footer-category">
-        <li><a href="https://github.com/processing/p5.js">GitHub</a></li>
-        <li><a href="https://www.instagram.com/p5xjs/">Instagram</a></li>
-        <li><a href="https://twitter.com/p5xjs">X</a></li>
-        <li><a href="https://www.youtube.com/@ProcessingFoundation">YouTube</a></li>     
-        <li><a href="https://discord.gg/SHQ8dH25r9">Discord</a></li>
         <li>
-          <a href="https://discourse.processing.org/c/p5js">{t("Forum")}</a>
+          <a href="https://github.com/processing/p5.js" target="_blank" rel="noopener noreferrer" title="Opens in new tab">
+            GitHub ↗
+          </a>
+        </li>
+        <li>
+          <a href="https://www.instagram.com/p5xjs/" target="_blank" rel="noopener noreferrer" title="Opens in new tab">
+            Instagram ↗
+          </a>
+        </li>
+        <li>
+          <a href="https://twitter.com/p5xjs" target="_blank" rel="noopener noreferrer" title="Opens in new tab">
+            X ↗
+          </a>
+        </li>
+        <li>
+          <a href="https://www.youtube.com/@ProcessingFoundation" target="_blank" rel="noopener noreferrer" title="Opens in new tab">
+            YouTube ↗
+          </a>
+        </li>
+        <li>
+          <a href="https://discord.gg/SHQ8dH25r9" target="_blank" rel="noopener noreferrer" title="Opens in new tab">
+            Discord ↗
+          </a>
+        </li>
+        <li>
+          <a href="https://discourse.processing.org/c/p5js" target="_blank" rel="noopener noreferrer" title="Opens in new tab">
+            {t("Forum")} ↗
+          </a>
         </li>
       </ul>
     </div>
@@ -65,3 +87,4 @@ const bannerEntry = await getEntry("banner", currentLocale);
 {bannerEntry && !bannerEntry.data.hidden && (<Banner entry={bannerEntry} />)}
 
 <style></style>
+