Make play button a button instead of div

More attempts to make mg acessible

diff --git a/mediagoblin/static/css/audio.css b/mediagoblin/static/css/audio.css
index 5c50e7274e026a524b26b8492d7c6fa5527400cf..de388094fadf993266dddc4d0df08b1d0245eaf9 100644 (file)
--- a/mediagoblin/static/css/audio.css
+++ b/mediagoblin/static/css/audio.css
@@ -24,10 +24,11 @@
     font-size: 40px;
     width: 50px;
     text-shadow: 0 0 10px black;
+    background: none;
+    border: none;
 }
     .audio-control-play-pause.playing {
         color: #b71500;
-        letter-spacing: -17px;
         margin-left: -7px;
     }
     .audio-control-play-pause.paused {

diff --git a/mediagoblin/templates/mediagoblin/media_displays/audio.html b/mediagoblin/templates/mediagoblin/media_displays/audio.html
index 0ab1b694861a1377e72d045c8df278dbd6cbddf7..191eff1482d078abf04e0988bc26eab5e78d6bf3 100644 (file)
--- a/mediagoblin/templates/mediagoblin/media_displays/audio.html
+++ b/mediagoblin/templates/mediagoblin/media_displays/audio.html
@@ -33,7 +33,7 @@
           <div class="playhead"></div>
           <div class="buffered-indicators"></div>
           <div class="seekbar"></div>
-          <div class="audio-control-play-pause paused" aria-label="Play">▶</div>
+          <button class="audio-control-play-pause paused" aria-label="Play">▶</button>
           <div class="audio-currentTime" aria-label="current time">00:00</div>
           <input type="range" class="audio-volume" value="1" min="0" max="1" step="0.001" aria-label="volume" />
          <img src="{{ request.app.public_store.file_url(