Tabindex for Button inside Link
I've got this html
The button is styled with css while the link has no styles/all the styles have been removed.
The issue I have is when tabbing through the site, focus first goes to the link, and then to the button. However, I only need one of these to be tabbed to as they are essentially a single component. What's the best way to fix this?
If I add
tabindex="-1" to the button, functionally everything is good, but the focus styling on the button don't display.
While if I add it to the link, I'm worried this will effect accessibility. Will it? or this the proper solution?12 Replies
having a button in a link period is bad accessibility and semantic html
if its a link use a <a href if its a function on the site (i.e. form submit) use a button
So I'm using vue, the button is really a custom component where the root element is a
button. The link is also a component, but it comes from a library.
The button component is designed to just make a thing look like a button. Would it be best to change this component to conditionally only use button when it is a button rather than a link?just style the link how you want if its a link
and it would be the link itself when needed
or use the button component if its a button
I mean yea you could do that, would be based on how I wanted to pass logic to the button. Idk how Vue* handles events really.
I typically would want two components
one that is a button built to handle the events, and a link to just be well a link 😄
Vue uses real <a hrefs ya?
or does it need to be a <Link component ?
I tend to also just make a global style still based on .btn class xD
use for both if I want it to look like a button
yeah
I thought about just doing that, the issue is though the button component has children elements (to do icons and that) so it's more than just styling
then ya I would do some conditional props like if you provide an href to make the button an
<a> element
or just copy the component and make a link one
you never wanna do the <a><button> though
tabindex is only one issue that creates xDwhat about styling the
a with display: contentsits just not semantic, and terrible accessible
just dont
oki 😛
😄
the only reason you are doing it for styles
which is something you can 100% work around 😉
no reason for it ever though* big "just don't"
Got it working.
I made a new
my-btn-link component. This component has no styling of it's own, it just uses the same class that my-btn uses to get the styles.
Only down side is that there is a little bit off duplicate code to define the internals of the two components, but it's pretty small so I guess that's ok.