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.

Sign up for GitHub

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

Jump to bottom

[Bug Report][3.3.10] VListItem missing anchor title #17908

Closed
bogdanciuca opened this issue Jul 29, 2023 · 3 comments · Fixed by #17940
Closed

[Bug Report][3.3.10] VListItem missing anchor title #17908

bogdanciuca opened this issue Jul 29, 2023 · 3 comments · Fixed by #17940
Assignees
@johnleider
Labels
a11y Accessibility issue C: VListItem VListItem T: bug Functionality that does not work as intended/expected
Milestone
v3.3.x

Comments

@bogdanciuca
Copy link
Contributor

bogdanciuca commented Jul 29, 2023 •
edited

Problem to solve

Similar to VBtn and VTab, VListItem can be used as an anchor. Due to the fact that title is already used as a prop for the component, it can't be used as an anchor title, thus limiting accessibility and SEO.

Proposed solution

Define another prop for VListItem, e.g. linkTitle or anchorTitle and assign its value to the tag's title property (when the component is rendered as a link).

Accepted solution

Use item's title prop instead, see discussion for further details.
@bogdanciuca bogdanciuca mentioned this issue Jul 29, 2023
Closed
@johnleider johnleider self-assigned this Aug 1, 2023
@johnleider johnleider added a11y Accessibility issue C: VListItem VListItem and removed S: triage labels Aug 1, 2023
@bogdanciuca bogdanciuca changed the title [Feature Request] VListItem suport for anchor title [Bug Report][3.3.10] VListItem anchor title Aug 1, 2023
@bogdanciuca bogdanciuca changed the title [Bug Report][3.3.10] VListItem anchor title [Bug Report][3.3.10] VListItem missing anchor title Aug 1, 2023
@bogdanciuca bogdanciuca mentioned this issue Aug 1, 2023
Merged
@johnleider johnleider added T: bug Functionality that does not work as intended/expected and removed S: triage labels Aug 8, 2023
@johnleider johnleider added this to the v3.3.x milestone Aug 8, 2023
johnleider pushed a commit that referenced this issue Aug 8, 2023
@bogdanciuca
fix(VListItem): add anchor title (#17940)
bf76c7a 
fixes #17908
prashantsinghb pushed a commit to prashantsinghb/vuetify that referenced this issue Aug 9, 2023
@bogdanciuca @prashantsinghb
fix(VListItem): add anchor title (vuetifyjs#17940)
ba1bf9b 
fixes vuetifyjs#17908
@KaelWD
Copy link
Member

KaelWD commented Aug 10, 2023

I brought this up when we added the title prop, if you want title as an attribute you have to use :title.attr="'Title'" instead.

@johnleider
Copy link
Member

I brought this up when we added the title prop, if you want title as an attribute you have to use :title.attr="'Title'" instead.

Add it to the docs

KaelWD added a commit that referenced this issue Aug 10, 2023
@KaelWD
docs(VListItem): add note about native title attribute
c7a32c3 
closes #17908
@bogdanciuca
Copy link
Contributor Author

@KaelWD thanks for the suggestion. However, it seems that title.attr doesn't work with SSG / SSR, only with CSR. I've opened a follow up issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@johnleider johnleider

Labels
a11y Accessibility issue C: VListItem VListItem T: bug Functionality that does not work as intended/expected
Projects
None yet
Milestone
v3.3.x
3 participants
@johnleider @KaelWD @bogdanciuca