diff options
| author |  AsyncBanana <58297401+AsyncBanana@users.noreply.github.com>
| 2021-10-18 13:33:13 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-10-18 19:33:13 +0200 |
| commit | e9c377b84a2de02a448260aedb94f92fffa96047 (patch) | |
| tree | 5145c34865d2b32d440c4ea366e74ec54ebab598 | |
| parent | 3e51037262fd529961acccb199c4ce29a0ee2e33 (diff) | |
| download | astro-e9c377b84a2de02a448260aedb94f92fffa96047.tar.gz astro-e9c377b84a2de02a448260aedb94f92fffa96047.tar.zst astro-e9c377b84a2de02a448260aedb94f92fffa96047.zip | |
Made blog index landmark elements more accessible (#1578)
* Made blog index landmark elements more accessible
* Fixed CSS
* Hopefully the CSS actually works now
| -rw-r--r-- | examples/blog/src/components/BlogPostPreview.astro | 6 | ||||
| -rw-r--r-- | examples/blog/src/pages/index.astro | 6 | ||||
| -rw-r--r-- | www/src/components/BlogPostPreview.astro | 4 | ||||
| -rw-r--r-- | www/src/pages/blog/index.astro | 6 | ||||
| -rw-r--r-- | 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; } |