[a11y] play button not recognized as button

[binyamin]

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

[binyamin]

I can tackle this, if you want me to...

[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>

[binyamin]

@huyenltnguyen I would be happy to tackle this. I realized that when the button changes state, it becomes a button with a different purpose. I think I will change the aria-label to play/pause, instead of aria-pressed. How does that sound. Fyi, I will need to change some styles for the button.

[huyenltnguyen]

@b3u Oh yeah, I just tried toggling the button and checking the DOM. The SVGs and their title change when the user toggles the button, so aria-label should be changed here to reflect the switch.

Anyway, have fun with it. Let me know if I could be of any help :)

[binyamin]

@huyenltnguyen I'm having trouble with my screen reader. I think it's best if you work on this, since I can't test it well enough anyways.

[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) :)