From fae85ebe533557378ea2c8c9338a485ddc4e6741 Mon Sep 17 00:00:00 2001
From: Yurii Zusik <yurii.zusik@bigcommerce.com>
Date: Wed, 23 Sep 2020 11:33:44 +0300
Subject: [PATCH] fix(storefront): BCTHEME-265 Return heading to product card

---
 CHANGELOG.md                                     | 1 +
 assets/scss/components/citadel/cards/_cards.scss | 5 +++--
 templates/components/amp/products/card.html      | 4 ++--
 templates/components/products/card.html          | 4 ++--
 templates/pages/brands.html                      | 4 ++--
 templates/pages/compare.html                     | 4 ++--
 6 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 441e0577bb..1965cc34dd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 # Changelog
 
+- Return heading to product card. [#1847](https://github.com/bigcommerce/cornerstone/pull/1847)
 - Quick search query param needs to be fixed while navigating to search page. [#230](https://jira.bigcommerce.com/browse/BCTHEME-230)
 
 ## Draft
diff --git a/assets/scss/components/citadel/cards/_cards.scss b/assets/scss/components/citadel/cards/_cards.scss
index b9a48cafab..add4817e04 100644
--- a/assets/scss/components/citadel/cards/_cards.scss
+++ b/assets/scss/components/citadel/cards/_cards.scss
@@ -72,11 +72,12 @@
 .card-title {
     font-size: $card-title-fontSize;
     margin: $card-title-margin;
-
+    
     > a {
         color: $card-title-color;
         text-decoration: $card-title-textDecoration;
-
+        display: block;
+        
         // scss-lint:disable NestingDepth
         &:hover {
             color: $card-title-color-hover;
diff --git a/templates/components/amp/products/card.html b/templates/components/amp/products/card.html
index d5aa6d6e9b..b53b594292 100644
--- a/templates/components/amp/products/card.html
+++ b/templates/components/amp/products/card.html
@@ -22,9 +22,9 @@
         {{#if brand.name}}
             <p class="card-text" data-test-info-type="brandName">{{brand.name}}</p>
         {{/if}}
-        <span class="card-title">
+        <h3 class="card-title">
             <a data-vars-product-link="{{url}}" data-vars-product-id="{{id}}" data-vars-product-name="{{name}}" href="{{url}}">{{name}}</a>
-        </span>
+        </h3>
 
         <div class="card-text" data-test-info-type="price">
             {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
diff --git a/templates/components/products/card.html b/templates/components/products/card.html
index 537adc8b2a..4866275c70 100644
--- a/templates/components/products/card.html
+++ b/templates/components/products/card.html
@@ -74,9 +74,9 @@
         {{#if brand.name}}
             <p class="card-text" data-test-info-type="brandName">{{brand.name}}</p>
         {{/if}}
-        <span class="card-title">
+        <h3 class="card-title">
             <a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>{{name}}</a>
-        </span>
+        </h3>
 
         <div class="card-text" data-test-info-type="price">
             {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
diff --git a/templates/pages/brands.html b/templates/pages/brands.html
index 5614e9c4c4..30404ec421 100644
--- a/templates/pages/brands.html
+++ b/templates/pages/brands.html
@@ -27,9 +27,9 @@ <h1 class="page-heading">{{lang 'brand.label'}}</h1>
                         </a>
                     </figure>
                     <div class="card-body">
-                        <span class="card-title">
+                        <h3 class="card-title">
                             <a href="{{url}}">{{name}}</a>
-                        </span>
+                        </h3>
                     </div>
                 </article>
             </li>
diff --git a/templates/pages/compare.html b/templates/pages/compare.html
index 0985028d66..e7cb3a7dd9 100644
--- a/templates/pages/compare.html
+++ b/templates/pages/compare.html
@@ -32,9 +32,9 @@ <h1 class="page-heading">{{lang 'compare.header' products=comparisons.length}}</
                             {{#if brand.name}}
                                 <p class="card-text"><a href="{{brand.url}}">{{ brand.name }}</a></p>
                             {{/if}}
-                            <span class="card-title">
+                            <h3 class="card-title">
                                 <a href="{{url}}">{{ name }}</a>
-                            </span>
+                            </h3>
                             {{#or ../customer (if ../theme_settings.restrict_to_login '!==' true)}}
                                 {{#if price_range}}
                                     {{> components/products/price-range}}