fix some landmark issues in listings (#13602)

app/javascript/listings/__tests__/AllListings.test.jsx

@@ -103,18 +103,13 @@ describe('<AllListings />', () => {
   });
 
   it('should render the given listings', async () => {
-    const { getByTestId, getByText } = renderAllListings();
-
-    // Ensure each listing is present
-    const titleOptions = {
-      selector: 'h2 > a',
-    };
+    const { getByTestId, getByText, getByRole } = renderAllListings();
 
     // 1st listings
     getByTestId('single-listing-20');
 
     // listing title
-    const listing1Title = getByText('Mentor wanted', titleOptions);
+    const listing1Title = getByRole('link', { name: 'Mentor wanted' });
 
     expect(listing1Title.getAttribute('href')).toEqual(
       '/listings/misc/illo-iure-quos-htyashsayas-5hk7',
@@ -149,7 +144,9 @@ describe('<AllListings />', () => {
     getByTestId('single-listing-21');
 
     // listing title
-    const listing2Title = getByText('This is an awesome listing', titleOptions);
+    const listing2Title = getByRole('link', {
+      name: 'This is an awesome listing',
+    });
 
     expect(listing2Title.getAttribute('href')).toEqual(
       '/listings/misc/illo-iure-quos-ereerr-5hk7',
@@ -186,10 +183,9 @@ describe('<AllListings />', () => {
     getByTestId('single-listing-22');
 
     // listing title
-    const listing3Title = getByText(
-      'Illo iure quos perspiciatis',
-      titleOptions,
-    );
+    const listing3Title = getByRole('link', {
+      name: 'Illo iure quos perspiciatis',
+    });
 
     expect(listing3Title.getAttribute('href')).toEqual(
       '/listings/misc/illo-iure-fss-ssasas-5hk7',

app/javascript/listings/components/AllListings.jsx

@@ -13,10 +13,11 @@ export const AllListings = ({
   loadNextPage,
 }) => {
   return (
-    <main class="crayons-layout__content" id="main-content">
+    <div class="crayons-layout__content">
       <div className="listings-columns" id="listings-results">
         {listings.map((listing) => (
           <SingleListing
+            key={`listing-${listing.id}`}
             onAddTag={onAddTag}
             onChangeCategory={onChangeCategory}
             listing={listing}
@@ -28,7 +29,7 @@ export const AllListings = ({
       </div>
 
       {showNextPageButton && <NextPageButton onClick={loadNextPage} />}
-    </main>
+    </div>
   );
 };
 

app/javascript/listings/components/ListingFilters.jsx

@@ -16,7 +16,7 @@ export const ListingFilters = ({
   query,
 }) => {
   return (
-    <aside className="crayons-layout__sidebar-left">
+    <div className="crayons-layout__sidebar-left">
       <ListingFiltersTags
         message={message}
         onKeyUp={onKeyUp}
@@ -31,7 +31,7 @@ export const ListingFilters = ({
         category={category}
         onClick={onSelectCategory}
       />
-    </aside>
+    </div>
   );
 };
 

app/javascript/listings/components/ListingFiltersCategories.jsx

@@ -5,7 +5,7 @@ import { CategoryLinksMobile } from './CategoryLinksMobile';
 
 export const ListingFiltersCategories = ({ categories, category, onClick }) => (
   <div className="listing-filters px-2 m:px-0" id="listing-filters">
-    <nav className="hidden m:block">
+    <nav className="hidden m:block" aria-label="Listings by category">
       <a
         id="listings-link"
         href="/listings"

app/javascript/listings/singleListing/AuthorInfo.jsx

@@ -29,7 +29,7 @@ export const AuthorInfo = ({ listing, onCategoryClick }) => {
   const { category, location, author = {} } = listing;
   const { username, name, profile_image_90 } = author;
   return (
-    <footer className="fs-s flex items-center">
+    <div className="fs-s flex items-center">
       <a
         href={`/${username}`}
         className="crayons-avatar crayons-avatar--l mr-2"
@@ -59,7 +59,7 @@ export const AuthorInfo = ({ listing, onCategoryClick }) => {
           <LocationText location={location} />
         </p>
       </div>
-    </footer>
+    </div>
   );
 };
 

app/javascript/listings/singleListing/Header.jsx

@@ -18,7 +18,7 @@ export const Header = ({ listing, currentUserId, onTitleClick, onAddTag }) => {
   const listingDate = bumped_at ? bumped_at : originally_published_at;
 
   return (
-    <header className="mb-3">
+    <div className="mb-3">
       <h2 className="fs-2xl fw-bold lh-tight mb-1 pr-8">
         <a
           href={`/listings/${category}/${slug}`}
@@ -34,7 +34,7 @@ export const Header = ({ listing, currentUserId, onTitleClick, onAddTag }) => {
       <TagLinks tags={listing.tags || listing.tag_list} onClick={onAddTag} />
 
       <DropdownMenu listing={listing} isOwner={currentUserId === userId} />
-    </header>
+    </div>
   );
 };
 

app/views/listings/index.html.erb

@@ -27,21 +27,26 @@
   <meta name="twitter:card" content="summary_large_image">
 <% end %>
 
-<header class="crayons-layout flex items-center justify-between p-2 l:p-4 l:pb-0">
-  <h1 class="crayons-title">Listings</h1>
+<main id="main-content">
 
-  <div class="flex items-center">
-    <a href="<%= new_listing_path %>" class="crayons-btn crayons-btn--secondary">Create</a>
-    <a href="<%= listings_dashboard_path %>" class="crayons-btn crayons-btn--secondary ml-2">Manage</a>
+  <div class="crayons-layout flex items-center justify-between p-2 l:p-4 l:pb-0">
+    <h1 class="crayons-title">Listings</h1>
+
+    <nav class="flex items-center" aria-label="Listings">
+      <ul class="list-none flex">
+        <li> <a href="<%= new_listing_path %>" class="crayons-btn crayons-btn--secondary">Create</a></li>
+        <li> <a href="<%= listings_dashboard_path %>" class="crayons-btn crayons-btn--secondary ml-2">Manage</a></li>
+      </ul>
+    </nav>
   </div>
-</header>
 
-<div class="listings-container" id="listings-index-container"
-  data-category="<%= params[:category] %>" data-listings="<%= @listings_json %>"
-  data-allcategories="<%= categories_for_display.to_json %>"
-  <% if @displayed_listing %>
-  data-displayedlisting="<%= @displayed_listing_json %> "
-  <% end %>>
-</div>
+  <div class="listings-container" id="listings-index-container"
+    data-category="<%= params[:category] %>" data-listings="<%= @listings_json %>"
+    data-allcategories="<%= categories_for_display.to_json %>"
+    <% if @displayed_listing %>
+    data-displayedlisting="<%= @displayed_listing_json %> "
+    <% end %>>
+  </div>
 
+</main>
 <%= javascript_packs_with_chunks_tag "listings", defer: true %>