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 =