[JS] Add keyboard invocation for media elements (#4577)

* [JS] Add keyboard invocation for media elements Fixes VSO #24081306 * PR feedback
microsoft · Aug 12, 2020 · 046e336 · 046e336
1 parent f0fcae7
commit 046e336
Showing 1 changed file with 30 additions and 19 deletions.
diff --git a/source/nodejs/adaptivecards/src/card-elements.ts b/source/nodejs/adaptivecards/src/card-elements.ts
@@ -2180,6 +2180,31 @@ export class Media extends CardElement {
         }
     }
 
+    private handlePlayButtonInvoke(event: UIEvent) : void
+    {
+        if (this.hostConfig.media.allowInlinePlayback) {
+            event.preventDefault();
+            event.cancelBubble = true;
+
+            if (this.renderedElement) {
+                let mediaPlayerElement = this.renderMediaPlayer();
+
+                this.renderedElement.innerHTML = "";
+                this.renderedElement.appendChild(mediaPlayerElement);
+
+                mediaPlayerElement.play();
+            }
+        }
+        else {
+            if (Media.onPlay) {
+                event.preventDefault();
+                event.cancelBubble = true;
+
+                Media.onPlay(this);
+            }
+        }
+    }
+
     private renderPoster(): HTMLElement {
         const playButtonArrowWidth = 12;
         const playButtonArrowHeight = 15;
@@ -2226,26 +2251,12 @@ export class Media extends CardElement {
             playButtonOuterElement.style.alignItems = "center";
             playButtonOuterElement.style.justifyContent = "center";
             playButtonOuterElement.onclick = (e) => {
-                if (this.hostConfig.media.allowInlinePlayback) {
-                    e.preventDefault();
-                    e.cancelBubble = true;
-
-                    if (this.renderedElement) {
-                        let mediaPlayerElement = this.renderMediaPlayer();
-
-                        this.renderedElement.innerHTML = "";
-                        this.renderedElement.appendChild(mediaPlayerElement);
-
-                        mediaPlayerElement.play();
-                    }
-                }
-                else {
-                    if (Media.onPlay) {
-                        e.preventDefault();
-                        e.cancelBubble = true;
+                this.handlePlayButtonInvoke(e);
+            }
 
-                        Media.onPlay(this);
-                    }
+            playButtonOuterElement.onkeypress = (e: KeyboardEvent) => {
+                if (e.keyCode == 13 || e.keyCode == 32) { // space or enter
+                    this.handlePlayButtonInvoke(e);
                 }
             }