From 42623ce32ab534c07509d2781a066ee7e684bf68 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Sat, 4 Apr 2020 02:47:15 +0700
Subject: [PATCH] fix(a11y): replace div with button element

---
 src/components/PlayPauseButton.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/components/PlayPauseButton.js b/src/components/PlayPauseButton.js
index 2dfacd5..065356f 100644
--- a/src/components/PlayPauseButton.js
+++ b/src/components/PlayPauseButton.js
@@ -14,6 +14,14 @@ class PlayPauseButton extends React.Component {
 
   handleOnTouchStart = () => !isBrowser && this.props.togglePlay();
 
+  handleKeyDown = e => {
+    // Toggle play when user presses Enter
+    // The Space keypress event is ignored to avoid collision with the GlobalHotKeys
+    if (e.keyCode === 13) {
+      this.handleOnClick();
+    }
+  };
+
   static getDerivedStateFromProps(nextProps, prevState) {
     // set initial load to render the initial message accordingly
     if (prevState.initialLoad && nextProps.playing) {
@@ -25,10 +33,14 @@ class PlayPauseButton extends React.Component {
   render() {
     return (
       <div
+        aria-label={this.props.playing ? "Pause" : "Play"}
         className={this.state.initialLoad ? "cta" : ""}
         id="playContainer"
         onClick={this.handleOnClick}
+        onKeyDown={this.handleKeyDown}
         onTouchStart={this.handleOnTouchStart}
+        role="button"
+        tabIndex={0}
       >
         {this.props.playing ? <Pause /> : <Play />}
       </div>