From 5abe88c69b1a93f5e070b49c548fd6f5a5d69d8e Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Tue, 23 Feb 2021 08:33:26 +0000
Subject: [PATCH] Add skip links to readinglist, podcasts, and listings
 (#12769)

* add skip link functionality to readinglist, listings and podcasts

* fix initscrolling reference to podcasts
---
 app/assets/javascripts/initializers/initScrolling.js      | 2 +-
 app/javascript/listings/components/AllListings.jsx        | 2 +-
 app/javascript/readingList/readingList.jsx                | 2 +-
 app/views/podcast_episodes/index.html.erb                 | 2 +-
 .../podcasts/user_visits_podcasts_root_page_spec.rb       | 8 ++++----
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/initializers/initScrolling.js b/app/assets/javascripts/initializers/initScrolling.js
index e4b66a96b..7ef567767 100644
--- a/app/assets/javascripts/initializers/initScrolling.js
+++ b/app/assets/javascripts/initializers/initScrolling.js
@@ -375,7 +375,7 @@ function fetchNextPageIfNearBottom() {
   var scrollableElem;
 
   if (indexWhich === 'podcast-episodes') {
-    scrollableElem = document.getElementById('articles-list');
+    scrollableElem = document.getElementById('main-content');
     fetchCallback = function fetch() {
       fetchNextPodcastPage(indexContainer);
     };
diff --git a/app/javascript/listings/components/AllListings.jsx b/app/javascript/listings/components/AllListings.jsx
index fae6005db..c08e52bfa 100644
--- a/app/javascript/listings/components/AllListings.jsx
+++ b/app/javascript/listings/components/AllListings.jsx
@@ -13,7 +13,7 @@ export const AllListings = ({
   loadNextPage,
 }) => {
   return (
-    <main class="crayons-layout__content">
+    <main class="crayons-layout__content" id="main-content">
       <div className="listings-columns" id="listings-results">
         {listings.map((listing) => (
           <SingleListing
diff --git a/app/javascript/readingList/readingList.jsx b/app/javascript/readingList/readingList.jsx
index 80aa723f5..b60194469 100644
--- a/app/javascript/readingList/readingList.jsx
+++ b/app/javascript/readingList/readingList.jsx
@@ -220,7 +220,7 @@ export class ReadingList extends Component {
             onClick={this.toggleTag}
           />
 
-          <main className="crayons-layout__content">
+          <main className="crayons-layout__content" id="main-content">
             <div className="crayons-card mb-4">
               {items.length > 0 ? itemsToRender : this.renderEmptyItems()}
             </div>
diff --git a/app/views/podcast_episodes/index.html.erb b/app/views/podcast_episodes/index.html.erb
index 19efb7264..2a7a62ac5 100644
--- a/app/views/podcast_episodes/index.html.erb
+++ b/app/views/podcast_episodes/index.html.erb
@@ -19,7 +19,7 @@
      data-feed="<%= params[:timeframe] || "base-feed" %>"
      data-articles-since="<%= Timeframe.datetime_iso8601(params[:timeframe]) %>">
   <%= render "podcast_episodes/sidebar" %>
-  <div class="articles-list" id="articles-list">
+  <main class="articles-list" id="main-content">
     <div class="substories" id="substories">
       <% if @podcast_episodes %>
         <%= render "podcast_episodes/episodes_feed" %>
diff --git a/spec/system/podcasts/user_visits_podcasts_root_page_spec.rb b/spec/system/podcasts/user_visits_podcasts_root_page_spec.rb
index c2e464b76..b24444aad 100644
--- a/spec/system/podcasts/user_visits_podcasts_root_page_spec.rb
+++ b/spec/system/podcasts/user_visits_podcasts_root_page_spec.rb
@@ -12,7 +12,7 @@ RSpec.describe "User visits /pod page", type: :system do
   before { visit "/pod" }
 
   it "displays the podcasts", js: true do
-    within "#articles-list" do
+    within "#main-content" do
       expect(page).to have_link(nil, href: podcast_episode1.path)
       expect(page).to have_link(nil, href: podcast_episode2.path)
       expect(page).to have_link(nil, href: podcast_episode3.path)
@@ -20,20 +20,20 @@ RSpec.describe "User visits /pod page", type: :system do
   end
 
   it "displays the podcasts with published_at" do
-    within "#articles-list" do
+    within "#main-content" do
       expect(page).to have_selector("time.published-at", count: 2)
       expect(page).to have_selector("span.time-ago-indicator-initial-placeholder", count: 2)
     end
   end
 
   it "doesn't display an unreachable podcast" do
-    within "#articles-list" do
+    within "#main-content" do
       expect(page).not_to have_link(nil, href: un_podcast_episode.path)
     end
   end
 
   it "doesn't dsplay a podcast that is not published" do
-    within "#articles-list" do
+    within "#main-content" do
       expect(page).not_to have_link(nil, href: unpublished_episode.path)
     end
   end