Between
<button onClick={...}>Click me</button>
and
<span onClick={...}>
<button>Click me</button>
</span>
are there any differences for the user? I know that the click event will always bubble up to the span element, but are there any accessibility issues or unintended consequences that could arise from this?
There is a massive difference!
If you tab to a <button> so it is focused you can activate it using Enter and it will activate the click handler. It will not do this with a <span> (even if you add tabindex="0" to the <span> so it is focusable).
Also having a click handler on a <span> around a <button> will cause issues as you then have nested active elements. This means that when you click on the <button> that is within a <span> there is no way of knowing which element is supposed to fire an event (is it the <span> click handler or the <button> click handler?)
The question is, why do you want to attach the handler to the <span> as it may be that there is a better way to do what you are attempting. Let me know and I will see if I can help you structure things better / work around the problem!
since your question is about accessibility, you sure shouldn't do this because you have a native element for "clicking things" in HTML, but if you insist you can make a span work as a button by:
if you didn't do this the screen readers users will have a difficult time in your website
this link contains an example how button can be considered a div with extra attributes: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role
In that setup, you should be fine. If however you had a <span> inside of the <button>, then that's when you'll run into issues because a button should not contain children elements, only the value.
<button type="button" onclick="alert("Yo");"></button>
= works
<button type="button"><span onclick="alert("Yo");"></button> = fails
And then I believe Firefox handles these events differently to Chrome, but the latest builds should be ok.
when you call the onclick on span you dont need to use event.preventDefault. but when you use button or a you need to use event.preventDefault. that the basic difference
Why do you need the button element? Just use <span onclick="onClick()> You can style the span with css. Personally I think button is redundant.