Add titles to social icons and update URLs

Added titles to the social icons for better accessibility and updated the URLs for each social platform in the navigation component. Also added an aria-label to the LanguagePicker component and included the icon title in the Icon.astro file.

src/components/ui/LanguagePicker.astro

@@ -7,6 +7,7 @@ import Icon from "./icons/Icon.astro";
   <button
     id="hs-dropdown-default"
     type="button"
+    aria-label="Change language"
     class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-1.5 py-1.5 text-sm font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 hover:text-[#fa5a15] dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-[#fb713b] dark:focus:outline-none"
   >
     <Icon name="earth" />

src/components/ui/icons/Icon.astro

@@ -27,7 +27,7 @@ let paths: Path[] = icon.paths || [];
       stroke-width={icon.strokeWidth}
       stroke-linecap={icon.strokeLinecap}
       stroke-linejoin={icon.strokeLinejoin}
-    >
+    ><title>{icon.title}</title>
       {paths.map((path: Path) => (
         <path d={path.d} class={path.class || ""} />
       ))}

src/components/ui/icons/icons.ts

@@ -285,6 +285,7 @@ export const Icons = {
       "h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400",
     viewBox: "0 0 24 24",
     fill: "currentColor",
+    title: "Twitter",
   },
   facebookFooter: {
     paths: [
@@ -296,6 +297,7 @@ export const Icons = {
       "h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400",
     viewBox: "0 0 24 24",
     fill: "currentColor",
+    title: "Facebook",
   },
   githubFooter: {
     paths: [
@@ -307,6 +309,7 @@ export const Icons = {
       "h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400",
     viewBox: "0 0 24 24",
     fill: "currentColor",
+    title: "GitHub",
   },
   googleFooter: {
     paths: [
@@ -318,6 +321,7 @@ export const Icons = {
       "h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400",
     viewBox: "0 0 24 24",
     fill: "currentColor",
+    title: "Google",
   },
   slackFooter: {
     paths: [
@@ -329,6 +333,7 @@ export const Icons = {
       "h-4 w-4 flex-shrink-0 fill-current text-neutral-700 dark:text-neutral-400",
     viewBox: "0 0 24 24",
     fill: "currentColor",
+    title: "Slack",
   },
   quotation: {
     paths: [

src/utils/navigation.ts

@@ -28,11 +28,11 @@ const footerLinks = [
 ];
 // An object of links for social icons
 const socialLinks = {
-  facebook: "#",
-  x: "#",
+  facebook: "https://www.facebook.com/",
+  x: "https://twitter.com/",
   github: "https://github.com/mearashadowfax/ScrewFast",
-  google: "#",
-  slack: "#",
+  google: "https://www.google.com/",
+  slack: "https://slack.com/",
 };
 
 export default {