refactor: updates button to div, adds event handlers, and adds video …

…example to gallery (#365) * refactor: updates button to div and adds video example to gallery * chore: prevents default on space bar key down
carbon-design-system · Aug 26, 2019 · cadb414 · cadb414 · vercel · Aug 26, 2019
1 parent 915ea83
commit cadb414
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 15 deletions.
diff --git a/packages/example/src/pages/components/ImageGallery.mdx b/packages/example/src/pages/components/ImageGallery.mdx
@@ -60,6 +60,13 @@ Click on an image to open the gallery.
 ![IBM Cloud Server](/images/IBM_Cloud_Server.png)
 
 </ImageGalleryImage>
+<ImageGalleryImage alt="IBM Cloud Platform Prototype" title="IBM Cloud Platform" col={4}>
+
+<Video src="/videos/hero-video.mp4" poster="/images/poster.png">
+  <track default src="/videos/vtt/hero-video.vtt" srcLang="en" />
+</Video>
+
+</ImageGalleryImage>     
 <ImageGalleryImage alt="IBM Cloud Think" title="IBM Cloud Think" col={4}>
 
 ![IBM Cloud Think](/images/IBM_Cloud_Think_Keynote.jpg)

diff --git a/packages/gatsby-theme-carbon/src/components/Video/Video.js b/packages/gatsby-theme-carbon/src/components/Video/Video.js
@@ -63,22 +63,53 @@ const Video = ({ vimeoId, title, ...props }) => {
       });
   }
 
+  function onVimeoKeyDown(event) {
+    const player = getVimeoPlayer();
+
+    event.preventDefault();
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      if (isPlaying) {
+        player
+          .pause()
+          .then(() => {
+            setIsPlaying(false);
+          })
+          .catch(error => {
+            console.error(error);
+          });
+        return;
+      }
+      player
+        .play()
+        .then(() => {
+          setIsPlaying(true);
+        })
+        .catch(error => {
+          console.error(error);
+        });
+    }
+  }
+
   if (vimeoId) {
     return (
       <div className={videoContainer}>
-        <button
+        <div
           className={buttonClassName}
-          type="button"
+          role="button"
           onClick={onVimeoClick}
+          onKeyDown={onVimeoKeyDown}
+          tabIndex="0"
         >
           {isPlaying ? <Pause32 /> : <Play32 />}
           <span className="bx--assistive-text">
             {isPlaying ? 'Pause' : 'Play'}
           </span>
-        </button>
+        </div>
         <div className={cx(video, vimeo)}>
           <div className="embedVideo-container">
             <iframe
+              tabIndex="-1"
               allow="autoplay"
               title={title}
               src={`https://player.vimeo.com/video/${vimeoId}`}
@@ -117,14 +148,40 @@ const Video = ({ vimeoId, title, ...props }) => {
     setIsPlaying(false);
   }
 
+  function onKeyDown(event) {
+    event.preventDefault();
+
+    if (event.key === ' ' || event.key === 'Enter') {
+      if (isPlaying) {
+        videoRef.current.pause();
+        setIsPlaying(false);
+        return;
+      }
+      return videoRef.current
+        .play()
+        .then(() => {
+          setIsPlaying(true);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }
+  }
+
   return (
     <div className={videoContainer}>
-      <button className={buttonClassName} type="button" onClick={onClick}>
+      <div
+        className={buttonClassName}
+        role="button"
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+        tabIndex="0"
+      >
         {isPlaying ? <Pause32 /> : <Play32 />}
         <span className="bx--assistive-text">
           {isPlaying ? 'Pause' : 'Play'}
         </span>
-      </button>
+      </div>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <video
         className={video}

diff --git a/packages/gatsby-theme-carbon/src/components/Video/Video.module.scss b/packages/gatsby-theme-carbon/src/components/Video/Video.module.scss
@@ -11,9 +11,7 @@
   width: 100%;
 }
 
-button.video-button {
-  @include button-reset($width: false);
-
+div.video-button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -31,23 +29,23 @@ button.video-button {
   transition: all $duration--moderate-01 motion(entrance, productive);
 }
 
-button.video-button:focus {
+div.video-button:focus {
   outline: 2px solid $focus;
   outline-offset: -2px;
 }
 
-button.video-button:hover {
+div.video-button:hover {
   background-color: $gray-90;
   opacity: 0.8;
 }
 
-button.video-button > svg {
+div.video-button > svg {
   fill: $white-0;
   margin-left: 4px;
   transition: all $duration--moderate-01 motion(entrance, productive);
 }
 
-button.video--is-playing > svg {
+div.video--is-playing > svg {
   margin-left: 0px;
 }
 
@@ -68,7 +66,7 @@ button.video--is-playing > svg {
   }
 }
 
-.video-container:not(:hover) button.video--is-playing,
-.video-container:not(:hover) button.video--is-playing > svg {
-  visibility: hidden;
+.video-container:not(:hover) div.video--is-playing,
+.video-container:not(:hover) div.video--is-playing > svg {
+  opacity: 0;
 }