[a11y] play button not recognized as button

Because the play/pause button is a <div> and not a <button>, screen-readers don’t recognize it as interactive. There are two options that I see: Either change the div tag to a button tag, or use the role attribute (as in role="button"). Once we’re dealing with the play button, I noticed that there is no text associated with the button. Maybe we should put an aria-label, and/or an aria-checked to indicate the state https://github.com/freeCodeCamp/coderadio-client/blob/c721fbfaeedc0b1e529c0552426a267d21a0e596/src/components/Footer.js#L89-L9

Connected to #20

[huyenltnguyen]

@b3u Thanks for letting me know. I will gladly take this from you then.

Looking forward to your future contributions. But in the meantime, happy coding (and stay safe) 😃

[huyenltnguyen]

@b3u Thanks for reporting the issue 👍 Feel free to tackle it if you are interested.

For the solution, I don’t think there is a reason for the button to be a <div>, so I think changing it to <button> should be fine. My approach would be similar to yours, but I would use aria-pressed in place of aria-checked since it seems to be associated with button more (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role):

<button type="button" aria-label="play" aria-pressed={isPlaying}>
  { isPlaying ? <Pause /> : <Play /> }
</button>