refactor(a11y): add linkTitle in social links for more meaningful voiceover

src/components/Socials.astro

@@ -16,7 +16,7 @@ const { centered = false } = Astro.props;
       <LinkButton
         href={social.href}
         className="link-button"
-        title={social.name}
+        title={social.linkTitle}
       >
         <Fragment set:html={socialIcons[social.name]} />
       </LinkButton>

src/config.ts

@@ -20,97 +20,116 @@ export const LOGO_IMAGE = {
 export const SOCIALS: SocialsObject = [
   {
     name: "Github",
+    linkTitle: ` ${SITE.title} on Github`,
     href: "https://github.com/satnaing/astro-paper",
     active: true,
   },
   {
     name: "Facebook",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on Facebook`,
     active: true,
   },
   {
     name: "Instagram",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on Instagram`,
     active: true,
   },
   {
     name: "LinkedIn",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on LinkedIn`,
     active: true,
   },
   {
     name: "Mail",
     href: "mailto:yourmail@gmail.com",
+    linkTitle: `Send an email to ${SITE.title}`,
     active: false,
   },
   {
     name: "Twitter",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on Twitter`,
     active: false,
   },
   {
     name: "Twitch",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on Twitch`,
     active: false,
   },
   {
     name: "YouTube",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on YouTube`,
     active: false,
   },
   {
     name: "WhatsApp",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on WhatsApp`,
     active: false,
   },
   {
     name: "Snapchat",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on Snapchat`,
     active: false,
   },
   {
     name: "Pinterest",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on Pinterest`,
     active: false,
   },
   {
     name: "TikTok",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on TikTok`,
     active: false,
   },
   {
     name: "CodePen",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on CodePen`,
     active: false,
   },
   {
     name: "Discord",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on Discord`,
     active: false,
   },
   {
     name: "GitLab",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on GitLab`,
     active: false,
   },
   {
     name: "Reddit",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on Reddit`,
     active: false,
   },
   {
     name: "Skype",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on Skype`,
     active: false,
   },
   {
     name: "Steam",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on Steam`,
     active: false,
   },
   {
     name: "Telegram",
     href: "https://github.com/satnaing/astro-paper",
+    linkTitle: `${SITE.title} on Telegram`,
     active: false,
   },
 ];

src/types.ts

@@ -14,6 +14,7 @@ export type SocialsObject = {
   name: SocialMedia;
   href: string;
   active: boolean;
+  linkTitle: string;
 }[];
 
 export type SocialIcons = {