fix(storefront): BCTHEME-194 Review link in quick modal focused twice

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Review link in quick modal focused twice. [#1797](https://github.com/bigcommerce/cornerstone/pull/1797)
 - Fixed product image doesn't change on click when viewing a product with multiple images in IE11 [#1748](https://github.com/bigcommerce/cornerstone/pull/1748)
 - Fixed alt text on image change in product view [#1747](https://github.com/bigcommerce/cornerstone/pull/1747)
 - Added tooltip for modal close buttons. [#1773](https://github.com/bigcommerce/cornerstone/pull/1773)

assets/scss/components/stencil/productView/_productView.scss

@@ -197,20 +197,17 @@
 
 .productView-reviewLink {
     display: inline-block;
-    margin-left: spacing("half");
+    margin-left: spacing("quarter");
     vertical-align: middle;
+    color: stencilColor("color-textSecondary");
 
-    &--new {
-        padding: 0;
+    // scss-lint:disable NestingDepth
+    &:hover {
+        color: stencilColor("color-textSecondary--hover");
     }
 
-    > a {
-        color: stencilColor("color-textSecondary");
-
-        // scss-lint:disable NestingDepth
-        &:hover {
-            color: stencilColor("color-textSecondary--hover");
-        }
+    &--new {
+        padding: 0;
     }
 }
 

assets/scss/components/stencil/search/_search.scss

@@ -96,8 +96,4 @@
 
 .search-nav {
     position: relative;
-
-    .search-tabs-widget-description {
-        @include ariaDescribeElement
-    }
 }

assets/scss/tools/_aria.scss

@@ -0,0 +1,11 @@
+.aria-description {
+    &--hidden {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 1px;
+        width: 1px;
+        overflow: hidden;
+        margin-left: -10000px;
+    }
+}

assets/scss/tools/_tools.scss

@@ -1,4 +1,4 @@
 @import "list";
 @import "string";
 @import "image";
-@import "mixins";
+@import "aria";

templates/components/products/product-view.html

@@ -98,29 +98,25 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
                     {{/if}}
                     <span title="{{lang 'products.reviews.rating_aria_label' current_rating=product.rating max_rating=5}}"
                           tabindex="0"
-                          role="text"
                     >
                         {{> components/products/ratings rating=product.rating}}
                     </span>
-                    <span class="productView-reviewLink">
-                        {{#if product.num_reviews '>' 0}}
-                            <a href="{{product.url}}#product-reviews">
-                                {{lang 'products.reviews.link_to_review' total=product.num_reviews}}
-                            </a>
-                        {{else}}
+                    {{#if product.num_reviews '>' 0}}
+                        <a href="{{product.url}}#product-reviews" class=" ">
                             {{lang 'products.reviews.link_to_review' total=product.num_reviews}}
-                        {{/if}}
-                    </span>
+                        </a>
+                    {{else}}
+                        <span>{{lang 'products.reviews.link_to_review' total=product.num_reviews}}</span>
+                    {{/if}}
                 {{/if}}
                 {{#if settings.show_product_reviews}}
-                    <button class="productView-reviewLink productView-reviewLink--new">
-                        <a href="{{product.url}}{{#if is_ajax}}#write_review{{/if}}"
-                           {{#unless is_ajax}}data-reveal-id="modal-review-form"{{/unless}}
-                           role="button"
-                        >
-                           {{lang 'products.reviews.new'}}
-                        </a>
-                    </button>
+                    <a href="{{product.url}}{{#if is_ajax}}#write_review{{/if}}"
+                       class="productView-reviewLink productView-reviewLink--new"
+                       {{#unless is_ajax}}data-reveal-id="modal-review-form"{{/unless}}
+                       role="button"
+                    >
+                       {{lang 'products.reviews.new'}}
+                    </a>
                     {{> components/products/modals/writeReview}}
                 {{/if}}
             </div>

templates/pages/search.html

@@ -22,7 +22,7 @@
         </div>
     {{/if}}
     <nav class="navBar navBar--sub search-nav">
-        <span id="search-tabs-widget-description" class="search-tabs-widget-description">
+        <span id="search-tabs-widget-description" class="aria-description--hidden">
             {{lang 'search.tabs_accesibility_hint'}}
         </span>
         <ul role="tablist" class="navBar-section account-navigation" data-search-page-tabs>