fix(a11y): make play/pause button more accessible

[huyenltnguyen]

• Improves the accessibility of the app by using a button element for the play/pause button, instead of a div
• Adds some CSS to override the default button styles
• Closes [a11y] play button not recognized as button #71

[ahmaxed]

do we need this?

[ahmaxed]

Thanks for the PR.
I noticed an area above the button is being highlighted

[huyenltnguyen]

Thanks for the review, Ahmad!

I just found an issue with using keypress on this button, in which the global hotkey doesn't honor the stopPropagation set to the button, and captures the space keypress anyway. This causes some issue with the player's play event.

I'm marking the PR WIP for now and will find time to resolve the issue (it would require a dive into the react-hotkeys doc).

[huyenltnguyen]

Hi @ahmadabdolsaheb, this PR is ready for another look now.

I initially replaced the div with a button element. However. a special thing about the button is, its click event can be triggered by Space and Enter keys by default. For the Space keypress, it unfortunately collides with the GlobalHotKeys set in App.js and causes the togglePlay function to run twice. This means if the audio is playing, we toggle it to pause, and quickly toggle it back to play, which is not what we want.

We can easily fix this by calling event.preventDefault() inside handleKeyDown(). This approach does work on Chrome (and probably other browsers), but doesn't work on Firefox due to an existing bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1552419

My workaround is to just keep the component as a div, so that by default its click event isn't triggered by the Space key, and then manually handle the keyDown event. This approach ensures that keyboard navigation and shortcuts are working across browsers.