From 7d853b514a5b6d6405d2019e414b237e1e123571 Mon Sep 17 00:00:00 2001
From: PFM <info@eyesight.jp>
Date: Thu, 7 Sep 2017 23:18:41 +0900
Subject: [PATCH] Use <button> instead of <div role="button"> (#4835)

---
 .../mastodon/components/video_player.js        | 12 ++++++------
 app/javascript/styles/components.scss          | 18 ++----------------
 2 files changed, 8 insertions(+), 22 deletions(-)

diff --git a/app/javascript/mastodon/components/video_player.js b/app/javascript/mastodon/components/video_player.js
index 2c834fb665..2a2d91c33d 100644
--- a/app/javascript/mastodon/components/video_player.js
+++ b/app/javascript/mastodon/components/video_player.js
@@ -146,29 +146,29 @@ export default class VideoPlayer extends React.PureComponent {
     if (!this.state.visible) {
       if (sensitive) {
         return (
-          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler__video' onClick={this.handleVisibility}>
+          <button style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler' onClick={this.handleVisibility}>
             {spoilerButton}
             <span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
             <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
-          </div>
+          </button>
         );
       } else {
         return (
-          <div role='button' tabIndex='0' style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler__video' onClick={this.handleVisibility}>
+          <button style={{ width: `${width}px`, height: `${height}px`, marginTop: '8px' }} className='media-spoiler' onClick={this.handleVisibility}>
             {spoilerButton}
             <span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
             <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
-          </div>
+          </button>
         );
       }
     }
 
     if (this.state.preview && !autoplay) {
       return (
-        <div role='button' tabIndex='0' className='media-spoiler-video' style={{ width: `${width}px`, height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
+        <button className='media-spoiler-video' style={{ width: `${width}px`, height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
           {spoilerButton}
           <div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div>
-        </div>
+        </button>
       );
     }
 
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 7fd16f6b3d..75485d6b62 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -2347,22 +2347,6 @@ button.icon-button.active i.fa-retweet {
   height: 100%;
 }
 
-.media-spoiler__video {
-  align-items: center;
-  background: $base-overlay-background;
-  color: $primary-text-color;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  border: 0;
-  width: 100%;
-  height: 100%;
-  justify-content: center;
-  position: relative;
-  text-align: center;
-  z-index: 100;
-}
-
 .media-spoiler__warning {
   display: block;
   font-size: 14px;
@@ -3821,6 +3805,8 @@ button.icon-button.active i.fa-retweet {
   cursor: pointer;
   margin-top: 8px;
   position: relative;
+  border: 0;
+  display: block;
 }
 
 .media-spoiler-video-play-icon {