Accessibility: Differentiate external footer links with icon and tooltip

Author: Kakashi786

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>
+