From 1f8f348d5dac8be20285efade27f62c401bda710 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Fri, 26 Mar 2021 09:23:45 +0000
Subject: [PATCH] add skip link functionality to videos (#13113)

---
 .../javascripts/initializers/initScrolling.js |  2 +-
 app/views/videos/index.html.erb               | 39 ++++++++++---------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/initializers/initScrolling.js b/app/assets/javascripts/initializers/initScrolling.js
index 7ef567767..99596668c 100644
--- a/app/assets/javascripts/initializers/initScrolling.js
+++ b/app/assets/javascripts/initializers/initScrolling.js
@@ -380,7 +380,7 @@ function fetchNextPageIfNearBottom() {
       fetchNextPodcastPage(indexContainer);
     };
   } else if (indexWhich === 'videos') {
-    scrollableElem = document.getElementById('video-collection');
+    scrollableElem = document.getElementById('main-content');
     fetchCallback = function fetch() {
       fetchNextVideoPage(indexContainer);
     };
diff --git a/app/views/videos/index.html.erb b/app/views/videos/index.html.erb
index ee06d3c3d..07623e960 100644
--- a/app/views/videos/index.html.erb
+++ b/app/views/videos/index.html.erb
@@ -20,22 +20,25 @@
 <% end %>
 
 <div class="home video-page-title" id="index-container" data-which="videos" data-params="<%= params.to_json(only: %i[tag username q]) %>">
-  <header>
-    <h1><%= community_name %> on Video</h1>
-  </header>
-  <div class="video-collection" id="video-collection">
-    <% @video_articles.each do |video_article| %>
-      <a class="single-video-article single-article" href="<%= video_article.path %>" id="video-article-<%= video_article.id %>">
-          <div class="video-image" style="background-image: url(<%= video_article.cloudinary_video_url %>)">
-            <span class="video-timestamp"><%= video_article.video_duration_in_minutes %></span>
-          </div>
-          <p><strong><%= video_article.title %></strong></p>
-          <p class="video-username"><%= video_article.user.name %></p>
-      </a>
-    <% end %>
-  </div>
-  <div class="subvideos"></div>
-  <div class="loading-articles" id="loading-articles">
-    loading...
-  </div>
+
+  <main id="main-content">
+    <header class="video-page-title">
+      <h1><%= community_name %> on Video</h1>
+    </header>
+    <div class="video-collection" id="video-collection">
+      <% @video_articles.each do |video_article| %>
+        <a class="single-video-article single-article" href="<%= video_article.path %>" id="video-article-<%= video_article.id %>">
+            <div class="video-image" style="background-image: url(<%= video_article.cloudinary_video_url %>)">
+              <span class="video-timestamp"><%= video_article.video_duration_in_minutes %></span>
+            </div>
+            <p><strong><%= video_article.title %></strong></p>
+            <p class="video-username"><%= video_article.user.name %></p>
+        </a>
+      <% end %>
+    </div>
+    <div class="subvideos"></div>
+    <div class="loading-articles" id="loading-articles">
+      loading...
+    </div>
+  </main>
 </div>