From c995b9f61d90aa7671371373c5772ab59b516fc5 Mon Sep 17 00:00:00 2001 From: Agustin Banchio Date: Wed, 7 Jun 2023 08:50:44 +0100 Subject: [PATCH] feat(theme): add custom label for social links (#2466) Co-authored-by: Divyansh Singh <40380293+brc-dd@users.noreply.github.com> --- docs/reference/default-theme-config.md | 5 ++++- src/client/theme-default/components/VPSocialLink.vue | 3 ++- src/client/theme-default/components/VPSocialLinks.vue | 3 ++- types/default-theme.d.ts | 1 + 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/reference/default-theme-config.md b/docs/reference/default-theme-config.md index 80c17139..386ecbb0 100644 --- a/docs/reference/default-theme-config.md +++ b/docs/reference/default-theme-config.md @@ -214,7 +214,9 @@ export default { icon: { svg: 'Dribbble' }, - 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 index d5f08785..c884229e 100644 --- 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(() => { diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts index d4cde64c..3a37eb57 100644 --- 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 =