Merge pull request #25287 from guardian/a11y/PodcastIllogicalTabOrder

fix: More logical tab order for podcasts
guardian · Aug 10, 2022 · 60f0136 · 60f0136
2 parents 740919e + a2becea
commit 60f0136
Showing 1 changed file with 21 additions and 22 deletions.
diff --git a/applications/app/views/fragments/audioBody.scala.html b/applications/app/views/fragments/audioBody.scala.html
@@ -40,16 +40,6 @@
         @fragments.headTonal(audio, page)
 
         <div class="podcast gs-container">
-            <figure class="podcast__player podcast__section"
-                data-component="main audio"
-                id="audio-component-container"
-                data-media-id="@audio.elements.mainAudio.map(_.properties.id)"
-                data-source="@audio.downloadUrl"
-                data-download-url="@audio.downloadUrl.getOrElse("#")"
-                data-duration="@audio.duration"
-                >
-            </figure>
-
             @for( series <- audio.tags.tags.find(_.properties.podcast.nonEmpty)
             ; podcast <- series.properties.podcast
             ; image <- podcast.image
@@ -124,12 +114,33 @@
                 @fragments.contentMeta(audio, page, false)
             </div>
 
+            <div class="meta__social podcast__share podcast__section" data-component="share">
+                @fragments.social(audio.sharelinks.pageShares)
+                <div class="meta__numbers">
+                    <div class="u-h meta__number js-sharecount">
+                    </div>
+                    <div class="u-h meta__number" data-discussion-id="@audio.content.discussionId" data-commentcount-format="content" data-discussion-closed="@{
+                        !audio.trail.isCommentable
+                    }">
+                    </div>
+                </div>
+            </div>
+
             @if(audio.fields.standfirst.isDefined) {
                 <div class="podcast__standfirst">
                     @fragments.standfirst(audio)
                 </div>
             }
 
+            <figure class="podcast__player podcast__section"
+                    data-component="main audio"
+                    id="audio-component-container"
+                    data-media-id="@audio.elements.mainAudio.map(_.properties.id)"
+                    data-source="@audio.downloadUrl"
+                    data-download-url="@audio.downloadUrl.getOrElse("#")"
+            data-duration="@audio.duration"
+            >
+            </figure>
 
             <div class="from-content-api podcast__body">
                 @if(audio.fields.body.nonEmpty) {
@@ -161,18 +172,6 @@
                 </a>
             </div>
 
-            <div class="meta__social podcast__share podcast__section" data-component="share">
-                @fragments.social(audio.sharelinks.pageShares)
-                <div class="meta__numbers">
-                    <div class="u-h meta__number js-sharecount">
-                    </div>
-                    <div class="u-h meta__number" data-discussion-id="@audio.content.discussionId" data-commentcount-format="content" data-discussion-closed="@{
-                        !audio.trail.isCommentable
-                    }">
-                    </div>
-                </div>
-            </div>
-
             <div class="podcast__submeta podcast__section">
                 @fragments.submeta(audio)
             </div>