fix: ensure primary content areas wrapped in main landmark element (n…

…odejs#3340) The pages on the site are not wrapped in a <main> sectioning element, so the goal of this PR is to ensure that each page includes this semantic markup. Including a <main> landmark on a page improves accessibility by helping assistive tech quickly identify the primary content of the page.
danielleadams · Feb 17, 2021 · 9305e9d · 9305e9d
1 parent 8bb3865
commit 9305e9d
Show file tree

Hide file tree

Showing 16 changed files with 34 additions and 32 deletions.
diff --git a/layouts/about-release-schedule.hbs b/layouts/about-release-schedule.hbs
@@ -5,7 +5,7 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container has-side-nav">
 
       {{> navigation key='about'}}
@@ -26,7 +26,7 @@
       </article>
 
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>

diff --git a/layouts/about.hbs b/layouts/about.hbs
@@ -5,7 +5,7 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container has-side-nav">
 
       {{> navigation key='about'}}
@@ -15,7 +15,7 @@
       </article>
 
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>

diff --git a/layouts/black-lives-matter.hbs b/layouts/black-lives-matter.hbs
@@ -2,8 +2,10 @@
 <html lang="{{site.locale}}"{{#if site.rtl}} dir="rtl"{{/if}}>
 {{> blm-html-head }}
 <body>
-  {{> blm-header }}
-  {{{ contents }}}
+  <main>
+    {{> blm-header }}
+    {{{ contents }}}
+  </main>
   {{> blm-footer }}
 </body>
 </html>
diff --git a/layouts/blog-index.hbs b/layouts/blog-index.hbs
@@ -5,7 +5,7 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container">
       <h2>News from {{ pagination.year }}</h2>
 
@@ -40,7 +40,7 @@
       </nav>
       {{/if}}
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>

diff --git a/layouts/blog-post.hbs b/layouts/blog-post.hbs
@@ -5,7 +5,7 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container">
 
       <article>
@@ -18,7 +18,7 @@
       </article>
 
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>

diff --git a/layouts/category-index.hbs b/layouts/category-index.hbs
@@ -5,7 +5,7 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container">
       {{#if title}}
         <h2>{{ title }}</h2>
@@ -27,7 +27,7 @@
       </ul>
 
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>

diff --git a/layouts/contribute.hbs b/layouts/contribute.hbs
@@ -5,7 +5,7 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container has-side-nav">
 
       {{> navigation key='getinvolved'}}
@@ -15,7 +15,7 @@
       </article>
 
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>

diff --git a/layouts/docs.hbs b/layouts/docs.hbs
@@ -5,7 +5,7 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container has-side-nav">
 
       {{> navigation key='docs'}}
@@ -17,7 +17,7 @@
       </article>
 
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>

diff --git a/layouts/download-current.hbs b/layouts/download-current.hbs
@@ -5,7 +5,7 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container">
       <article>
         <div class="download-header">
@@ -18,7 +18,7 @@
       </article>
 
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>

diff --git a/layouts/download-releases.hbs b/layouts/download-releases.hbs
@@ -5,7 +5,7 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container">
       <article>
         <h1>{{title}}</h1>
@@ -58,7 +58,7 @@
       </article>
 
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>

diff --git a/layouts/download.hbs b/layouts/download.hbs
@@ -5,7 +5,7 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container">
       <article>
         <div class="download-header">
@@ -18,7 +18,7 @@
       </article>
 
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>

diff --git a/layouts/index.hbs b/layouts/index.hbs
@@ -5,7 +5,7 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container">
 
       <div id="home-intro">
@@ -77,7 +77,7 @@
       </div>
 
     </div>
-  </div>
+  </main>
 
   {{> footer className="no-margin-top" }}
 </body>

diff --git a/layouts/knowledge-base-index.hbs b/layouts/knowledge-base-index.hbs
@@ -5,7 +5,7 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container has-side-nav">
 
       {{!-- {{> navigation key='docs'}} --}}
@@ -23,7 +23,7 @@
       </article>
 
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>

diff --git a/layouts/knowledge-post.hbs b/layouts/knowledge-post.hbs
@@ -5,7 +5,7 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container">
 
       <article>
@@ -18,7 +18,7 @@
       </article>
 
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>

diff --git a/layouts/page.hbs b/layouts/page.hbs
@@ -5,11 +5,11 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container">
       {{{ contents }}}
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>

diff --git a/layouts/security.hbs b/layouts/security.hbs
@@ -5,15 +5,15 @@
 <body>
   {{> header }}
 
-  <div id="main">
+  <main id="main">
     <div class="container">
 
       <article>
         {{{ contents }}}
       </article>
 
     </div>
-  </div>
+  </main>
 
   {{> footer }}
 </body>