code-hike / codehike

Marvellous code walkthroughs
https://codehike.org
MIT License
4.39k stars 135 forks source link

copy button is not accessible #335

Closed Mantish closed 1 year ago

Mantish commented 1 year ago

Hi, We're using the copy button feature which is really useful but is not accessible.

The problem is that they're not actual HTML buttons, so they can't be used by keyboard / screen reader users.

I think the easiest solution is to use a <button> element with the proper attributes like aria-label. If that is not possible, a button role should be assigned, but also there needs to be a focus outline with keyboard, along with a tabindex of 0. In addition, it would need a hook or listener that looks for enter or spacebar to activate the copy item.