fix(storefront): BCTHEME-1764 Update layout with correct usage of mai…

…n tag
bigcommerce · Jan 30, 2024 · 9be4ef3 · 9be4ef3
1 parent 53e5b5e
commit 9be4ef3
Show file tree

Hide file tree

Showing 21 changed files with 43 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Update layout with correct usage of main tag [#2421](https://github.com/bigcommerce/cornerstone/pull/2421)
 - Dispatch an event on productOptionsChanged [#2400](https://github.com/bigcommerce/cornerstone/pull/2400)
 - Check lang helpers usage and existence of key in translation file [#2403](https://github.com/bigcommerce/cornerstone/pull/2403)
 - Display fees on cart page [#2376](https://github.com/bigcommerce/cornerstone/pull/2376)

diff --git a/templates/components/common/body.html b/templates/components/common/body.html
@@ -1,8 +1,8 @@
-<main class="body" id="main-content" role="main" data-currency-code="{{currency_selector.active_currency_code}}">
+<div class="body" id="main-content" data-currency-code="{{currency_selector.active_currency_code}}">
     {{#block "hero"}} {{/block}}
     <div class="container">
         {{#block "page"}} {{/block}}
     </div>
     {{> components/common/modal/modal}}
     {{> components/common/alert/alert-modal}}
-</main>
+</div>
diff --git a/templates/pages/account/add-return.html b/templates/pages/account/add-return.html
@@ -4,7 +4,7 @@
 <h1 class="page-heading">{{lang 'account.returns.new_return' }}</h1>
 {{> components/account/navigation account_page='returns'}}
 
-<div class="account account--fixed account--addReturn">
+<main class="account account--fixed account--addReturn">
     <div class="account-body">
         <section class="account-content">
 
@@ -100,7 +100,7 @@ <h3 class="account-heading">{{lang 'account.returns.from_order' id=forms.return.
 
         </section>
     </div>
-</div>
+</main>
 
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/account/inbox.html b/templates/pages/account/inbox.html
@@ -4,7 +4,7 @@
 <h1 class="page-heading">{{lang 'account.messages.heading' }}</h1>
 {{> components/account/navigation account_page='messages'}}
 
-<div class="account account--fixed">
+<main class="account account--fixed">
     <div class="account-body">
         <section class="account-content">
             {{#if forms.inbox.error}}
@@ -17,7 +17,7 @@ <h1 class="page-heading">{{lang 'account.messages.heading' }}</h1>
             {{> components/account/messages-form}}
         </section>
     </div>
-</div>
+</main>
 
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/account/orders/all.html b/templates/pages/account/orders/all.html
@@ -10,7 +10,7 @@
 <h1 class="page-heading">{{lang 'account.orders.heading' }}</h1>
 {{> components/account/navigation account_page='orders'}}
 
-<div class="account account--fixed">
+<main class="account account--fixed">
     <div class="account-head">
         {{#if customer.store_credit.value '>' 0}}
             <div class="alertBox alertBox--storeCredit">
@@ -28,7 +28,7 @@ <h1 class="page-heading">{{lang 'account.orders.heading' }}</h1>
             {{/if}}
         </section>
     </div>
-</div>
+</main>
 
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/account/returns.html b/templates/pages/account/returns.html
@@ -4,7 +4,7 @@
 <h1 class="page-heading">{{lang 'account.returns.heading' }}</h1>
 {{> components/account/navigation account_page='returns'}}
 
-<div class="account account--fixed">
+<main class="account account--fixed">
     <div class="account-body">
         <section class="account-content">
             {{#if customer.returns}}
@@ -14,7 +14,7 @@ <h1 class="page-heading">{{lang 'account.returns.heading' }}</h1>
             {{/if}}
         </section>
     </div>
-</div>
+</main>
 
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/auth/account-created.html b/templates/pages/auth/account-created.html
@@ -1,10 +1,10 @@
 {{#partial "page"}}
-    <section class="page">
-        <div class="page-content page-content--textCenter">
+    <main class="page">
+        <section class="page-content page-content--textCenter">
             <h1 class="page-heading">{{lang 'create_account.created.heading'}}</h1>
             <p>{{lang 'create_account.created.intro' store_name=settings.store_name email=customer.email}}</p>
             <a class="button button--primary" href="{{create_account.continue_url}}">{{lang 'create_account.created.continue'}}</a>
-        </div>
-    </section>
+        </section>
+    </main>
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/blog.html b/templates/pages/blog.html
@@ -18,7 +18,7 @@
 
 {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
 
-<section class="page">
+<main class="page">
     {{#unless theme_settings.hide_blog_page_heading }}
         <h1 class="page-heading">{{ blog.name }}</h1>
     {{/unless}}
@@ -28,7 +28,7 @@ <h1 class="page-heading">{{ blog.name }}</h1>
     {{/each}}
 
     {{> components/common/paginator pagination.blog}}
-</section>
+</main>
 
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/brand.html b/templates/pages/brand.html
@@ -31,7 +31,7 @@ <h1 class="page-heading">{{brand.name}}</h1>
         {{> components/brand/sidebar}}
     </aside>
 
-    <div class="page-content" id="product-listing-container">
+    <main class="page-content" id="product-listing-container">
         {{#if brand.search_error }}
             <p>{{lang 'search.errorMessage'}}</p>
         {{else}}
@@ -42,7 +42,7 @@ <h1 class="page-heading">{{brand.name}}</h1>
             {{/if}}
             {{{region name="brand_below_content"}}}
         {{/if}}
-    </div>
+    </main>
 </div>
 
 {{/partial}}

diff --git a/templates/pages/brands.html b/templates/pages/brands.html
@@ -6,7 +6,7 @@
 
 {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
 
-<section class="page">
+<main class="page">
     <h1 class="page-heading">{{lang 'brand.label'}}</h1>
     {{{region name="brands_below_header"}}}
     <ul class="brandGrid">
@@ -37,6 +37,6 @@ <h3 class="card-title">
     </ul>
     {{> components/common/paginator pagination.brands}}
     {{{region name="brands_below_content"}}}
-</section>
+</main>
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/category.html b/templates/pages/category.html
@@ -47,10 +47,10 @@ <h1 class="page-heading">{{category.name}}</h1>
         {{/if}}
     {{/if}}
 
-    <div class="page-content" id="product-listing-container">
+    <main class="page-content" id="product-listing-container">
         {{> components/category/product-listing}}
         {{{region name="category_below_content"}}}
-    </div>
+    </main>
 </div>
 
 {{/partial}}

diff --git a/templates/pages/compare.html b/templates/pages/compare.html
@@ -3,7 +3,7 @@
 {{inject 'compareRemoveMessage' (lang 'compare.no_remove')}}
 {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
 <h1 class="page-heading">{{lang 'compare.header' products=comparisons.length}}</h1>
-<div class="page">
+<main class="page">
     <div class="page-content">
 
         <table class="compareTable">
@@ -135,7 +135,7 @@ <h3 class="card-title">
         </table>
 
     </div>
-</div>
+</main>
 
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/contact-us.html b/templates/pages/contact-us.html
@@ -2,7 +2,7 @@
 
 {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
 
-<section class="page">
+<main class="page">
     {{#unless theme_settings.hide_contact_us_page_heading }}
         <h1 class="page-heading">{{page.title}}</h1>
     {{/unless}}
@@ -27,7 +27,7 @@ <h1 class="page-heading">{{page.title}}</h1>
 
     </div>
 
-</section>
+</main>
 
 {{/partial}}
 

diff --git a/templates/pages/errors/403.html b/templates/pages/errors/403.html
@@ -2,7 +2,7 @@
 
 {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
 
-<div class="page">
+<main class="page">
     <section class="page-content page-content--centered">
         <h1 class="page-heading">{{lang 'forbidden.page_heading'}}</h1>
         <p class="u-textAlignCenter">
@@ -12,7 +12,7 @@ <h1 class="page-heading">{{lang 'forbidden.page_heading'}}</h1>
         </p>
         {{> components/common/search-box}}
     </section>
-</div>
+</main>
 
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/errors/404.html b/templates/pages/errors/404.html
@@ -2,7 +2,7 @@
 
 {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
 
-<div class="page">
+<main class="page">
     <section class="page-content page-content--centered">
         <h1 class="page-heading">{{lang 'page_not_found.page_heading'}}</h1>
         <p class="u-textAlignCenter">
@@ -11,7 +11,7 @@ <h1 class="page-heading">{{lang 'page_not_found.page_heading'}}</h1>
 
         {{> components/common/search-box}}
     </section>
-</div>
+</main>
 
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/errors/generic.html b/templates/pages/errors/generic.html
@@ -1,13 +1,13 @@
 {{#partial "page"}}
 
-<div class="page">
+<main class="page">
     <section class="page-content page-content--centered">
         <h1 class="page-heading">{{lang 'server_error.page_heading'}}</h1>
         <p class="u-textAlignCenter">
             {{lang 'server_error.message'}}
         </p>
     </section>
-</div>
+</main>
 
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/gift-certificate/balance.html b/templates/pages/gift-certificate/balance.html
@@ -4,7 +4,7 @@
 <h1 class="page-heading">{{lang 'gift_certificate.heading' }}</h1>
 {{> components/gift-certificate/navigation gift_page='balance'}}
 
-<div class="account account--fixed">
+<main class="account account--fixed">
     <h3>{{lang 'gift_certificate.balance.heading'}}</h3>
     <p>
         <strong>{{lang 'gift_certificate.balance.intro' }}</strong>
@@ -31,6 +31,6 @@ <h3>{{gift_certificate.code}}</h3>
             </div>
         </div>
     </form>
-</div>
+</main>
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/gift-certificate/purchase.html b/templates/pages/gift-certificate/purchase.html
@@ -4,7 +4,7 @@
 <h1 class="page-heading">{{lang 'gift_certificate.heading' }}</h1>
 {{> components/gift-certificate/navigation gift_page='purchase'}}
 
-<div class="account account--fixed">
+<main class="account account--fixed">
 
     {{#each forms.gift_certificate.errors}}
         {{> components/common/alert/alert-error this}}
@@ -120,6 +120,6 @@ <h1 class="page-heading">{{lang 'gift_certificate.heading' }}</h1>
                 value="{{lang 'forms.gift_certificate.purchase.submit_value' }}">
         </div>
     </form>
-</div>
+</main>
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/gift-certificate/redeem.html b/templates/pages/gift-certificate/redeem.html
@@ -4,7 +4,7 @@
 <h1 class="page-heading">{{lang 'gift_certificate.heading' }}</h1>
 {{> components/gift-certificate/navigation gift_page='redeem'}}
 
-<div class="account account--fixed">
+<main class="account account--fixed">
     <h3>{{lang 'gift_certificate.redeem.heading'}}</h3>
     <p><strong>{{lang 'gift_certificate.redeem.intro' store_name=settings.store_name }}</strong></p>
     <ol>
@@ -13,6 +13,6 @@ <h3>{{lang 'gift_certificate.redeem.heading'}}</h3>
         <li>{{{lang 'gift_certificate.redeem.item3' cart_url=urls.cart }}}</li>
         <li>{{lang 'gift_certificate.redeem.item4' }}</li>
     </ol>
-</div>
+</main>
 {{/partial}}
 {{> layout/base}}
diff --git a/templates/pages/page.html b/templates/pages/page.html
@@ -2,7 +2,7 @@
 
 {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
 
-<section class="page">
+<main class="page">
     {{#unless theme_settings.hide_page_heading }}
         <h1 class="page-heading">{{ page.title }}</h1>
     {{/unless}}
@@ -37,7 +37,7 @@ <h6><a href="{{url}}" target="_blank">{{title}}</a></h6>
             {{/each}}
         </ul>
     {{/if}}
-</section>
+</main>
 
 {{/partial}}
 

diff --git a/templates/pages/search.html b/templates/pages/search.html
@@ -63,7 +63,7 @@
             {{> components/faceted-search/index product_results}}
         </aside>
     {{/if}}
-    <div class="page-content">
+    <main class="page-content">
         {{#if forms.search.has_suggestions}}
             <div class="panel panel--large">
                 <div class="panel-body">
@@ -136,7 +136,7 @@ <h5 class="suggestion-title">{{lang 'forms.search.suggestions.title'}}</h5>
         </div>
 
         {{{region name="search_below_content"}}}
-    </div>
+    </main>
 </section>
 
 {{/partial}}