Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from Jun 7, 2023

Conversation

AgustinBanchio
Copy link
Contributor

Currently, the accessibility label for social links is derived from the icon name. When using a custom icon with an SVG, the aria-label is empty.

This PR adds an optional field to SocialLink called label.

When a SocialLink includes the label string, it will be used as the aria-label. This allows custom icons to have a label and improve accessibility, and also to overwrite the default labels if so desired.

Behaviour is unchanged if the new optional field is not present.

This PR also updates the documentation and includes an example.

I understand that the word label might be confusing and users could be expecting the default theme to render this label as an icon subtext instead of it being an accessibility label. Please let me know if you think a different name would be more suitable.

@brc-dd brc-dd merged commit c995b9f into vuejs:main Jun 7, 2023
8 checks passed
@AgustinBanchio AgustinBanchio deleted the custom-social-link-accessibility branch June 7, 2023 21:44
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants