HTML <canvas> Accessibility
PaulieScanlon opened this issue · comments
Hi team. I've been experimenting with Rive and accessibility and noticed that when i add role or aria-label attributes to RiveComponent they appear in the DOM on the containing div rather than on the HTML canvas element.
Is this by design?
// usage
<RiveComponent className={className} role="img" aria-label="fun time animation" />;// output
<div class="fun-time-animation" role="img" aria-label="fun time animation">
<canvas style="vertical-align: top; width: 500px; height: 500px;" width="1000" height="1000"></canvas>
</div>I'm currently using "rive-react": "^1.0.4"
Hey @PaulieScanlon - thanks for bringing this up. It's more of an oversight than anything by design. As a quick solution here, we can add an option to the options param like canvasProps that pass along props like the ones you're looking to do to the canvas as a non-breaking change.
Potentially in the next major, we could certainly have a setup where we have containerProps and then any props you set on RiveComponent itself in the jsx would pass on to the canvas, as that's the more interesting part of RiveComponent.
@PaulieScanlon Can you try testing with our new dependency @rive-app/react-canvas v2.0.0? There should be no API changes needed on your end, but the attributes you're passing in should propagate to the canvas instead of that wrapping div now.
Hey @zplata Yep. Confrimed. I've upgraded to "rive-react": "^2.0.0" and now both the role and aria-label are passed on to the Canvas. Brills job team!!