From e9c377b84a2de02a448260aedb94f92fffa96047 Mon Sep 17 00:00:00 2001
From: AsyncBanana <58297401+AsyncBanana@users.noreply.github.com>
Date: Mon, 18 Oct 2021 13:33:13 -0400
Subject: [PATCH] Made blog index landmark elements more accessible (#1578)

* Made blog index landmark elements more accessible

* Fixed CSS

* Hopefully the CSS actually works now
---
 examples/blog/src/components/BlogPostPreview.astro | 6 ++----
 examples/blog/src/pages/index.astro                | 6 +++---
 www/src/components/BlogPostPreview.astro           | 4 +---
 www/src/pages/blog/index.astro                     | 6 +++---
 www/src/scss/blog.scss                             | 2 +-
 5 files changed, 10 insertions(+), 14 deletions(-)
diff --git a/examples/blog/src/components/BlogPostPreview.astro b/examples/blog/src/components/BlogPostPreview.astro
index 0451a8c57..6a553366d 100644
--- a/examples/blog/src/components/BlogPostPreview.astro
+++ b/examples/blog/src/components/BlogPostPreview.astro
@@ -10,10 +10,8 @@ const { post } = Astro.props;
     <p class="publish-date">{post.publishDate}</p>
     <a href={post.url}><h1 class="title">{post.title}</h1></a>
   </header>
-  <main>
-    <p>{post.description}</p>
-    <a href={post.url}>Read more</a>
-  </main>
+  <p>{post.description}</p>
+  <a href={post.url}>Read more</a>
 </article>
 
 <style>
diff --git a/examples/blog/src/pages/index.astro b/examples/blog/src/pages/index.astro
index b082088c8..224e9db1d 100644
--- a/examples/blog/src/pages/index.astro
+++ b/examples/blog/src/pages/index.astro
@@ -76,15 +76,15 @@ allPosts = allPosts.sort((a, b) => new Date(b.publishDate).valueOf() - new Date(
   <body>
     <BlogHeader />
     <div class="layout">
-      <article class="content">
+      <main class="content">
         <section class="intro">
           <h1 class="latest">{title}</h1>
           <p>{description}</p>
         </section>
-        <section>
+        <section aria-label="Blog post list">
           {allPosts.map(p => <BlogPostPreview post={p} />)}
         </section>
-      </article>
+      </main>
     </div>
   </body>
 </html>
diff --git a/www/src/components/BlogPostPreview.astro b/www/src/components/BlogPostPreview.astro
index fc99d877a..8ec716736 100644
--- a/www/src/components/BlogPostPreview.astro
+++ b/www/src/components/BlogPostPreview.astro
@@ -14,9 +14,7 @@ const { title, publishDate, href } = Astro.props;
     <p class="publish-date">{publishDate}</p>
     <a href={href}><h1 class="title">{title}</h1></a>
   </header>
-  <main>
-    <slot />{' '}<a href={href}>Read more →</a>
-  </main>
+  <slot />{' '}<a href={href}>Read more →</a>
 </article>
 
 <style>
diff --git a/www/src/pages/blog/index.astro b/www/src/pages/blog/index.astro
index 11d1aefb1..5ea37c043 100644
--- a/www/src/pages/blog/index.astro
+++ b/www/src/pages/blog/index.astro
@@ -61,12 +61,12 @@ let lang = 'en';
   <body>
     <BlogHeader />
     <div class="layout">
-      <article class="content">
+      <main class="content">
         <section class="intro">
           <h1 class="latest">The Astro Blog</h1>
           <p>{description}</p>
         </section>
-        <section>
+        <section aria-label="Blog post list">
           <BlogPostPreview title="Astro 0.21 Preview: Vite + WASM = ⚡️" publishDate="October 6, 2021" href="/blog/astro-021-preview">
             <span>Get a sneak preview of what's next for Astro, including our new Vite build engine and WASM-powered Go compiler.</span>
           </BlogPostPreview>
@@ -95,7 +95,7 @@ let lang = 'en';
             <span>We're excited to announce Astro as a new way to build static websites and deliver lightning-fast performance without sacrificing a modern developer experience.</span>
           </BlogPostPreview>
         </section>
-      </article>
+      </main>
     </div>
   </body>
 </html>
diff --git a/www/src/scss/blog.scss b/www/src/scss/blog.scss
index 08dc0262c..20b4511af 100644
--- a/www/src/scss/blog.scss
+++ b/www/src/scss/blog.scss
@@ -116,7 +116,7 @@ body {
   gap: 1em;
 }
 
-.layout > article {
+.layout > :is(main,article) {
   grid-column: 2;
 }
 
