Merge pull request #163 from Safelite/bugfix/CSR-314

CSR-314: changes to back button to allow specialty focus outline

src/common-components/button-back/button-back.vue

@@ -1,13 +1,25 @@
 <template>
   <button
     @click="handleClick"
-    class="back-button-wrapper p-2" 
+    class="back-button-wrapper" 
     :aria-label="backButtonAccessibleText"
   >
-    <div class="button-back">
-      <div class="arrow-left"></div>
-      <div class="box"></div>
-    </div>
+    <svg xmlns="http://www.w3.org/2000/svg" width="34px" height="30px" viewBox="-2.2 -6 30 30">
+      <g id="Layer_3">
+        <path class="outer" fill="#FFFFFF" d="M19.934-1.434h-8.486c-1.683,0-2.999,0.528-4.021,1.614L1.685,6.146C0.78,7.079,0.338,8.027,0.338,9.041
+              c0,1.028,0.444,1.979,1.359,2.908l5.753,5.938c1.054,1.093,2.403,1.647,4.007,1.647l8.475,0.01c2.861,0,4.568-1.692,4.568-4.528
+              V3.094C24.5,0.259,22.793-1.434,19.934-1.434L19.934-1.434z"/>
+      </g>
+      <g id="Layer_2">
+        <path class="inner" fill="#727676" d="M19.934,17.989c2.041,0,3.066-1.006,3.066-3.028V3.039c0-2.022-1.025-3.028-3.066-3.028h-8.486
+          c-1.143,0-2.129,0.292-2.929,1.143L2.766,7.13C2.131,7.784,1.838,8.37,1.838,8.985c0,0.605,0.283,1.201,0.928,1.855l5.762,5.947
+          c0.811,0.84,1.787,1.191,2.93,1.191L19.934,17.989z M10.773,13.253c-0.439,0-0.801-0.371-0.801-0.82
+          c0-0.215,0.078-0.42,0.235-0.566l2.861-2.861l-2.861-2.862c-0.156-0.156-0.234-0.352-0.234-0.566c0-0.458,0.362-0.801,0.801-0.801
+          c0.224,0,0.41,0.069,0.556,0.225l2.881,2.872l2.891-2.881c0.166-0.166,0.353-0.234,0.566-0.234c0.439,0,0.801,0.352,0.801,0.801
+          c0,0.225-0.078,0.4-0.234,0.576l-2.871,2.871l2.861,2.852c0.146,0.156,0.234,0.352,0.234,0.576c0,0.449-0.361,0.82-0.811,0.82
+          c-0.225,0-0.43-0.098-0.586-0.244l-2.852-2.871l-2.852,2.871C11.203,13.165,10.999,13.253,10.773,13.253z"/>
+      </g>
+    </svg>
   </button>
 </template>
 
@@ -31,59 +43,24 @@ export default {
 
 <style lang="scss">
 .back-button-wrapper {
-  border: none;
-  background: transparent;
-  text-decoration: none;
-  border-bottom: none;
-  // Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
-  margin-bottom: -.75rem;
-  margin-top: -.75rem;
+  padding: 0;
+  position: relative;
+  top: -1px;
 
-  .button-back {
-    display: inline-flex;
-    position: relative;
-    height: 18px;
-    width: 23px;
-    overflow: hidden;
-     // Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
-    margin-bottom: -2px;
-    .arrow-left {
-      position: absolute;
-      width: 18px;
-      height: 18px;
-      left: 4px;
-      background-color: $gray-550;
-      transform: rotate(45deg);
-      border-radius: 4px;
-    }
-    .box {
-      content: "";
-      position: absolute;
-      background: $gray-550;
-      height: 100%;
-      width: 11px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      left: 12px;
-      border-radius: 5px;
-      &:before, &:after {
-        position: absolute;
-        left: 1px;
-        top: 3px;
-        content: " ";
-        height: 12px;
-        width: 2px;
-        background-color: $white;
-        border-radius: 2px;
-      }
-      &:before {
-        transform: rotate(45deg);
-      }
-      &:after {
-        transform: rotate(-45deg);
-      }
+  &:focus {
+    outline: none;
+
+    svg .outer {
+      fill: $white;
+      stroke-width: 2.5px;
+      stroke: $blue;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      transform: translate(-2.7px, -1.8px) scale(1.2);
     }
   }
+  &:focus-visible {
+      outline: none;
+  }
 }
 </style>

src/common-components/funnel-sub-header/funnel-sub-header.vue

@@ -55,6 +55,7 @@ export default {
 <style lang="scss">
   h5 {
     color: $gray-550;
+    line-height: 32px;
 
     button {
       border: none;
@@ -62,7 +63,4 @@ export default {
       color: inherit;
     }
   }
-  .back-button-wrapper {
-    margin-left: 0;
-  }
 </style>