feat(theme): add custom label for social links (#2466)

Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
vuejs · Jun 7, 2023 · c995b9f · c995b9f
1 parent 7a2bde3
commit c995b9f
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/docs/reference/default-theme-config.md b/docs/reference/default-theme-config.md
@@ -214,7 +214,9 @@ export default {
         icon: {
           svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Dribbble</title><path d="M12...6.38z"/></svg>'
         },
-        link: '...'
+        link: '...',
+        // You can include a custom label for accessibility too (optional but recommended):
+        ariaLabel: 'cool link'
       }
     ]
   }
@@ -225,6 +227,7 @@ export default {
 interface SocialLink {
   icon: SocialLinkIcon
   link: string
+  ariaLabel?: string
 }
 
 type SocialLinkIcon =

diff --git a/src/client/theme-default/components/VPSocialLink.vue b/src/client/theme-default/components/VPSocialLink.vue
@@ -6,6 +6,7 @@ import { icons } from '../support/socialIcons'
 const props = defineProps<{
   icon: DefaultTheme.SocialLinkIcon
   link: string
+  ariaLabel?: string
 }>()
 
 const svg = computed(() => {
@@ -18,7 +19,7 @@ const svg = computed(() => {
   <a
     class="VPSocialLink"
     :href="link"
-    :aria-label="typeof icon === 'string' ? icon : ''"
+    :aria-label="ariaLabel ?? (typeof icon === 'string' ? icon : '')"
     target="_blank"
     rel="noopener"
     v-html="svg"

diff --git a/src/client/theme-default/components/VPSocialLinks.vue b/src/client/theme-default/components/VPSocialLinks.vue
@@ -10,10 +10,11 @@ defineProps<{
 <template>
   <div class="VPSocialLinks">
     <VPSocialLink
-      v-for="{ link, icon } in links"
+      v-for="{ link, icon, ariaLabel } in links"
       :key="link"
       :icon="icon"
       :link="link"
+      :ariaLabel="ariaLabel"
     />
   </div>
 </template>

diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
@@ -251,6 +251,7 @@ export namespace DefaultTheme {
   export interface SocialLink {
     icon: SocialLinkIcon
     link: string
+    ariaLabel?: string
   }
 
   export type SocialLinkIcon =