I would definitely go with the wrapping <a>
in that case you don't have to think about setting tabIndex=0
, role=link
and also you can skip adding the extra JavaScript to make the button clickable and binding the enter key for the same action as well.
Or if the "link" is not taking the user to another location and just show a modal window or some other fancy function you should wrap the <div>
with a <button>
in that case you can also skip binding the spacebar to the action too, as it is inherited. (But if you really can't do that you should add role=button
to the wrapping <a>
)
Now you can focus on styling and remember to use both :hover
and :focus