diff options
| author |  Caleb Jasik <calebjasik@jasik.xyz>
| 2021-07-22 19:12:37 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-07-22 19:12:37 -0500 |
| commit | 4fd6cfe668e8aaf3f92817379fc8e123a6caf24f (patch) | |
| tree | bff152867cea51138825b7c1aed539ebdaed7616 /docs/src/layouts/Main.astro | |
| parent | 7b600d597bb2c2f95c8faeedc47b4d4b27c397a7 (diff) | |
| download | astro-4fd6cfe668e8aaf3f92817379fc8e123a6caf24f.tar.gz astro-4fd6cfe668e8aaf3f92817379fc8e123a6caf24f.tar.zst astro-4fd6cfe668e8aaf3f92817379fc8e123a6caf24f.zip | |
📘 DOC: improve a11y (#806)
* Add `tabindex="0"` to `<pre>` so that they are navigable by keyboard users if they overflow.
* Landmark elements should have unique names https://dequeuniversity.com/rules/axe/4.3/landmark-unique
* Page must have one main landmark https://dequeuniversity.com/rules/axe/4.3/landmark-one-main
- Main landmark must not be contained by another landmark https://dequeuniversity.com/rules/axe/4.3/landmark-main-is-top-level
* Heading level cannot increase by more than one
* Ensure that links with the same accessible name serve a similar purpose
https://dequeuniversity.com/rules/axe/4.3/identical-links-same-purpose
* Just update the accessible name and require context for the visible link name
* Fix CSS from the removal of the second <main>
* Revert heading level change
Diffstat (limited to '')
| -rw-r--r-- | docs/src/layouts/Main.astro | 19 |
1 files changed, 10 insertions, 9 deletions
diff --git a/docs/src/layouts/Main.astro b/docs/src/layouts/Main.astro index ad2dc34f1..90b19dfcf 100644 --- a/docs/src/layouts/Main.astro +++ b/docs/src/layouts/Main.astro @@ -132,7 +132,7 @@ if (currentPage) { height: 100%; } - .layout.centered #article main { + .layout.centered #article > article > section { display: flex; flex-direction: column; margin: auto; @@ -143,11 +143,11 @@ if (currentPage) { text-align: center; } - .layout.centered #article main :global(> *) { + .layout.centered #article > article > section :global(> *) { margin: 0; } - .layout.centered #article main h1 { + .layout.centered #article > article > section h1 { font-size: 5rem; } @@ -160,7 +160,7 @@ if (currentPage) { flex-direction: column; } - .content > main { + .content > section { margin-bottom: 4rem; } @@ -256,7 +256,7 @@ if (currentPage) { <body> <header> - <nav class="nav-wrapper"> + <nav class="nav-wrapper" title="Top Navigation"> <div class="menu-toggle"> <MenuToggle client:idle/> </div> @@ -291,24 +291,25 @@ if (currentPage) { </header> <main class={centered ? "layout centered" : "layout"}> - <aside class="sidebar" id="sidebar-site"> + <aside class="sidebar" id="sidebar-site" title="Documentation Sections"> <SiteSidebar currentPage={currentPage?.slice(1) ?? ''} /> </aside> <div id="article"> <article class="content"> - <main> + <section> <h1 class="content-title" id="overview">{content?.title}</h1> <slot /> - </main> + </section> {currentPage && <ArticleFooter path={currentFile} />} </article> </div> - <aside class="sidebar" id="sidebar-content"> + <aside class="sidebar" id="sidebar-content" title="Table of Contents"> {currentPage && <DocSidebar client:idle headers={headers} editHref={githubEditUrl} />} </aside> </main> <script type="module" src="/nav.js" /> + <script type="module" src="/make-scrollable-code-focusable.js" /> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-TEL60V1WM9"></script> |