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

…ceover
satnaing · Nov 28, 2022 · c9f796f · c9f796f
1 parent 307b55f
commit c9f796f
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/src/components/Socials.astro b/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>

diff --git a/src/config.ts b/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,
   },
 ];
diff --git a/src/types.ts b/src/types.ts
@@ -14,6 +14,7 @@ export type SocialsObject = {
   name: SocialMedia;
   href: string;
   active: boolean;
+  linkTitle: string;
 }[];
 
 export type SocialIcons = {