From 9f68aad9b0915eff1b4c6ccada120b2c3ef7ca79 Mon Sep 17 00:00:00 2001
From: OlenaKashuba <amely.jazz@gmail.com>
Date: Wed, 19 Jul 2023 17:02:08 +0100
Subject: [PATCH 1/3] fix(accordion, progress): delete aria-label for
 non-interactive elements

---
 src/components/molecules/Progress/Progress.tsx | 2 +-
 src/components/organisms/Accordion/README.md   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/Progress/Progress.tsx b/src/components/molecules/Progress/Progress.tsx
index a15fd3b43..c889c54ab 100644
--- a/src/components/molecules/Progress/Progress.tsx
+++ b/src/components/molecules/Progress/Progress.tsx
@@ -110,7 +110,7 @@ const Progress = ({ totalSteps, currentStep, withStep = false, progressColor, ..
         role="progressbar"
         aria-valuemax={totalSteps}
         aria-valuenow={currentStep}
-        aria-label={`Static progress bar showing step ${currentStep} of ${totalSteps}`}
+        aria-valuetext={`Static progress bar showing step ${currentStep} of ${totalSteps}`}
         {...rest}
       >
         {renderPoints()}
diff --git a/src/components/organisms/Accordion/README.md b/src/components/organisms/Accordion/README.md
index a25ba0347..17633c9d0 100644
--- a/src/components/organisms/Accordion/README.md
+++ b/src/components/organisms/Accordion/README.md
@@ -34,7 +34,7 @@ const AccordionExample = () => {
   };
 
   return (
-    <Accordion aria-label="accordion example">
+    <Accordion>
       {items.map(({ id, header, section, size }, index) => (
         <div key={id}>
           <Accordion.Header id={id} index={index} textSize={size} onClick={onClick}>

From 138a9b72c16f77def8d8e8dcbb308f770b382f9d Mon Sep 17 00:00:00 2001
From: OlenaKashuba <amely.jazz@gmail.com>
Date: Wed, 19 Jul 2023 17:23:00 +0100
Subject: [PATCH 2/3] fix(progress): add hidden label for progress

---
 .../molecules/Progress/Progress.tsx           |  12 ++
 .../__snapshots__/Progress.test.tsx.snap      | 141 ++++++++++++------
 .../ProductTemplateHeader.test.tsx.snap       |  39 +++--
 .../ProductTemplateProgress.test.tsx.snap     |  39 +++--
 4 files changed, 169 insertions(+), 62 deletions(-)

diff --git a/src/components/molecules/Progress/Progress.tsx b/src/components/molecules/Progress/Progress.tsx
index c889c54ab..af9522643 100644
--- a/src/components/molecules/Progress/Progress.tsx
+++ b/src/components/molecules/Progress/Progress.tsx
@@ -77,6 +77,16 @@ const ProgressPoint = styled.span<ProgressPointProps>`
   transform: translate(-50%, -50%);
 `;
 
+const HiddenText = styled.span`
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+
 const getStepPosition = (steps: number, stepIndex: number) => {
   const position = (100 / (steps - 1)) * stepIndex;
   if (position < 0) {
@@ -106,11 +116,13 @@ const Progress = ({ totalSteps, currentStep, withStep = false, progressColor, ..
 
   return (
     <ProgressWrapper>
+      <HiddenText id="in-progress">In progress</HiddenText>
       <ProgressBar
         role="progressbar"
         aria-valuemax={totalSteps}
         aria-valuenow={currentStep}
         aria-valuetext={`Static progress bar showing step ${currentStep} of ${totalSteps}`}
+        aria-labelledby="in-progress"
         {...rest}
       >
         {renderPoints()}
diff --git a/src/components/molecules/Progress/__snapshots__/Progress.test.tsx.snap b/src/components/molecules/Progress/__snapshots__/Progress.test.tsx.snap
index f0bbf3dda..6c682cc38 100644
--- a/src/components/molecules/Progress/__snapshots__/Progress.test.tsx.snap
+++ b/src/components/molecules/Progress/__snapshots__/Progress.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<Progress /> Accessibility renders the component with props with no a11
   margin-right: 6px;
 }
 
-.c1 {
+.c2 {
   position: relative;
   width: 100%;
   border-radius: 100px;
@@ -14,7 +14,7 @@ exports[`<Progress /> Accessibility renders the component with props with no a11
   height: 4px;
 }
 
-.c7 {
+.c8 {
   width: 37.5%;
   position: relative;
   border-radius: 100px;
@@ -25,7 +25,7 @@ exports[`<Progress /> Accessibility renders the component with props with no a11
   transition: width 0.5s ease-in-out;
 }
 
-.c7 > span {
+.c8 > span {
   position: absolute;
   top: 10px;
   right: 0;
@@ -35,7 +35,7 @@ exports[`<Progress /> Accessibility renders the component with props with no a11
   color: #2C3236;
 }
 
-.c2 {
+.c3 {
   position: absolute;
   top: 50%;
   left: 0%;
@@ -49,7 +49,7 @@ exports[`<Progress /> Accessibility renders the component with props with no a11
   transform: translate(-50%,-50%);
 }
 
-.c3 {
+.c4 {
   position: absolute;
   top: 50%;
   left: 25%;
@@ -63,7 +63,7 @@ exports[`<Progress /> Accessibility renders the component with props with no a11
   transform: translate(-50%,-50%);
 }
 
-.c4 {
+.c5 {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -77,7 +77,7 @@ exports[`<Progress /> Accessibility renders the component with props with no a11
   transform: translate(-50%,-50%);
 }
 
-.c5 {
+.c6 {
   position: absolute;
   top: 50%;
   left: 75%;
@@ -91,7 +91,7 @@ exports[`<Progress /> Accessibility renders the component with props with no a11
   transform: translate(-50%,-50%);
 }
 
-.c6 {
+.c7 {
   position: absolute;
   top: 50%;
   left: 100%;
@@ -105,20 +105,36 @@ exports[`<Progress /> Accessibility renders the component with props with no a11
   transform: translate(-50%,-50%);
 }
 
+.c1 {
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 <div>
   <div
     class="c0"
   >
+    <span
+      class="c1"
+      id="in-progress"
+    >
+      In progress
+    </span>
     <div
-      aria-label="Static progress bar showing step 2 of 5"
+      aria-labelledby="in-progress"
       aria-valuemax="5"
       aria-valuenow="2"
-      class="c1"
+      aria-valuetext="Static progress bar showing step 2 of 5"
+      class="c2"
       role="progressbar"
     >
-      <span
-        class="c2"
-      />
       <span
         class="c3"
       />
@@ -131,9 +147,12 @@ exports[`<Progress /> Accessibility renders the component with props with no a11
       <span
         class="c6"
       />
-      <div
+      <span
         class="c7"
       />
+      <div
+        class="c8"
+      />
     </div>
   </div>
 </div>
@@ -145,7 +164,7 @@ exports[`<Progress /> Props renders empty progress bar 1`] = `
   margin-right: 6px;
 }
 
-.c1 {
+.c2 {
   position: relative;
   width: 100%;
   border-radius: 100px;
@@ -153,7 +172,7 @@ exports[`<Progress /> Props renders empty progress bar 1`] = `
   height: 4px;
 }
 
-.c7 {
+.c8 {
   width: 0%;
   position: relative;
   border-radius: 100px;
@@ -164,7 +183,7 @@ exports[`<Progress /> Props renders empty progress bar 1`] = `
   transition: width 0.5s ease-in-out;
 }
 
-.c7 > span {
+.c8 > span {
   position: absolute;
   top: 10px;
   right: 0;
@@ -174,7 +193,7 @@ exports[`<Progress /> Props renders empty progress bar 1`] = `
   color: #2C3236;
 }
 
-.c4 {
+.c5 {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -188,7 +207,7 @@ exports[`<Progress /> Props renders empty progress bar 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c5 {
+.c6 {
   position: absolute;
   top: 50%;
   left: 75%;
@@ -202,7 +221,7 @@ exports[`<Progress /> Props renders empty progress bar 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c6 {
+.c7 {
   position: absolute;
   top: 50%;
   left: 100%;
@@ -216,7 +235,7 @@ exports[`<Progress /> Props renders empty progress bar 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c2 {
+.c3 {
   position: absolute;
   top: 50%;
   left: 0%;
@@ -230,7 +249,7 @@ exports[`<Progress /> Props renders empty progress bar 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c3 {
+.c4 {
   position: absolute;
   top: 50%;
   left: 25%;
@@ -244,19 +263,35 @@ exports[`<Progress /> Props renders empty progress bar 1`] = `
   transform: translate(-50%,-50%);
 }
 
+.c1 {
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 <div
   class="c0"
 >
+  <span
+    class="c1"
+    id="in-progress"
+  >
+    In progress
+  </span>
   <div
-    aria-label="Static progress bar showing step 0 of 5"
+    aria-labelledby="in-progress"
     aria-valuemax="5"
     aria-valuenow="0"
-    class="c1"
+    aria-valuetext="Static progress bar showing step 0 of 5"
+    class="c2"
     role="progressbar"
   >
-    <span
-      class="c2"
-    />
     <span
       class="c3"
     />
@@ -269,9 +304,12 @@ exports[`<Progress /> Props renders empty progress bar 1`] = `
     <span
       class="c6"
     />
-    <div
+    <span
       class="c7"
     />
+    <div
+      class="c8"
+    />
   </div>
 </div>
 `;
@@ -282,7 +320,7 @@ exports[`<Progress /> Props renders full progress bar 1`] = `
   margin-right: 6px;
 }
 
-.c1 {
+.c2 {
   position: relative;
   width: 100%;
   border-radius: 100px;
@@ -290,7 +328,7 @@ exports[`<Progress /> Props renders full progress bar 1`] = `
   height: 4px;
 }
 
-.c7 {
+.c8 {
   width: 100%;
   position: relative;
   border-radius: 100px;
@@ -301,7 +339,7 @@ exports[`<Progress /> Props renders full progress bar 1`] = `
   transition: width 0.5s ease-in-out;
 }
 
-.c7 > span {
+.c8 > span {
   position: absolute;
   top: 10px;
   right: 0;
@@ -311,7 +349,7 @@ exports[`<Progress /> Props renders full progress bar 1`] = `
   color: #2C3236;
 }
 
-.c2 {
+.c3 {
   position: absolute;
   top: 50%;
   left: 0%;
@@ -325,7 +363,7 @@ exports[`<Progress /> Props renders full progress bar 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c3 {
+.c4 {
   position: absolute;
   top: 50%;
   left: 25%;
@@ -339,7 +377,7 @@ exports[`<Progress /> Props renders full progress bar 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c4 {
+.c5 {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -353,7 +391,7 @@ exports[`<Progress /> Props renders full progress bar 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c5 {
+.c6 {
   position: absolute;
   top: 50%;
   left: 75%;
@@ -367,7 +405,7 @@ exports[`<Progress /> Props renders full progress bar 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c6 {
+.c7 {
   position: absolute;
   top: 50%;
   left: 100%;
@@ -381,19 +419,35 @@ exports[`<Progress /> Props renders full progress bar 1`] = `
   transform: translate(-50%,-50%);
 }
 
+.c1 {
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 <div
   class="c0"
 >
+  <span
+    class="c1"
+    id="in-progress"
+  >
+    In progress
+  </span>
   <div
-    aria-label="Static progress bar showing step 5 of 5"
+    aria-labelledby="in-progress"
     aria-valuemax="5"
     aria-valuenow="5"
-    class="c1"
+    aria-valuetext="Static progress bar showing step 5 of 5"
+    class="c2"
     role="progressbar"
   >
-    <span
-      class="c2"
-    />
     <span
       class="c3"
     />
@@ -406,9 +460,12 @@ exports[`<Progress /> Props renders full progress bar 1`] = `
     <span
       class="c6"
     />
-    <div
+    <span
       class="c7"
     />
+    <div
+      class="c8"
+    />
   </div>
 </div>
 `;
diff --git a/src/components/templates/ProductTemplate/ProductTemplateHeader/__snapshots__/ProductTemplateHeader.test.tsx.snap b/src/components/templates/ProductTemplate/ProductTemplateHeader/__snapshots__/ProductTemplateHeader.test.tsx.snap
index b66069fe3..152979317 100644
--- a/src/components/templates/ProductTemplate/ProductTemplateHeader/__snapshots__/ProductTemplateHeader.test.tsx.snap
+++ b/src/components/templates/ProductTemplate/ProductTemplateHeader/__snapshots__/ProductTemplateHeader.test.tsx.snap
@@ -87,7 +87,7 @@ exports[`<ProductTemplateHeader /> renders with all the props 1`] = `
   margin-right: 6px;
 }
 
-.c8 {
+.c9 {
   position: relative;
   width: 100%;
   border-radius: 100px;
@@ -95,7 +95,7 @@ exports[`<ProductTemplateHeader /> renders with all the props 1`] = `
   height: 4px;
 }
 
-.c11 {
+.c12 {
   width: 50%;
   position: relative;
   border-radius: 100px;
@@ -106,7 +106,7 @@ exports[`<ProductTemplateHeader /> renders with all the props 1`] = `
   transition: width 0.5s ease-in-out;
 }
 
-.c11 > span {
+.c12 > span {
   position: absolute;
   top: 10px;
   right: 0;
@@ -116,7 +116,7 @@ exports[`<ProductTemplateHeader /> renders with all the props 1`] = `
   color: #2C3236;
 }
 
-.c9 {
+.c10 {
   position: absolute;
   top: 50%;
   left: 0%;
@@ -130,7 +130,7 @@ exports[`<ProductTemplateHeader /> renders with all the props 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c10 {
+.c11 {
   position: absolute;
   top: 50%;
   left: 100%;
@@ -144,6 +144,18 @@ exports[`<ProductTemplateHeader /> renders with all the props 1`] = `
   transform: translate(-50%,-50%);
 }
 
+.c8 {
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .c6 {
   max-width: 525px;
 }
@@ -214,21 +226,28 @@ exports[`<ProductTemplateHeader /> renders with all the props 1`] = `
       <div
         class="c7"
       >
+        <span
+          class="c8"
+          id="in-progress"
+        >
+          In progress
+        </span>
         <div
-          aria-label="Static progress bar showing step 1 of 2"
+          aria-labelledby="in-progress"
           aria-valuemax="2"
           aria-valuenow="1"
-          class="c8"
+          aria-valuetext="Static progress bar showing step 1 of 2"
+          class="c9"
           role="progressbar"
         >
           <span
-            class="c9"
+            class="c10"
           />
           <span
-            class="c10"
+            class="c11"
           />
           <div
-            class="c11"
+            class="c12"
           />
         </div>
       </div>
diff --git a/src/components/templates/ProductTemplate/ProductTemplateProgress/__snapshots__/ProductTemplateProgress.test.tsx.snap b/src/components/templates/ProductTemplate/ProductTemplateProgress/__snapshots__/ProductTemplateProgress.test.tsx.snap
index 0d44ef4fe..99d0b582a 100644
--- a/src/components/templates/ProductTemplate/ProductTemplateProgress/__snapshots__/ProductTemplateProgress.test.tsx.snap
+++ b/src/components/templates/ProductTemplate/ProductTemplateProgress/__snapshots__/ProductTemplateProgress.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<ProductTemplateProgress /> renders with all the props 1`] = `
   margin-right: 6px;
 }
 
-.c2 {
+.c3 {
   position: relative;
   width: 100%;
   border-radius: 100px;
@@ -14,7 +14,7 @@ exports[`<ProductTemplateProgress /> renders with all the props 1`] = `
   height: 4px;
 }
 
-.c5 {
+.c6 {
   width: 50%;
   position: relative;
   border-radius: 100px;
@@ -25,7 +25,7 @@ exports[`<ProductTemplateProgress /> renders with all the props 1`] = `
   transition: width 0.5s ease-in-out;
 }
 
-.c5 > span {
+.c6 > span {
   position: absolute;
   top: 10px;
   right: 0;
@@ -35,7 +35,7 @@ exports[`<ProductTemplateProgress /> renders with all the props 1`] = `
   color: #2C3236;
 }
 
-.c3 {
+.c4 {
   position: absolute;
   top: 50%;
   left: 0%;
@@ -49,7 +49,7 @@ exports[`<ProductTemplateProgress /> renders with all the props 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c4 {
+.c5 {
   position: absolute;
   top: 50%;
   left: 100%;
@@ -63,6 +63,18 @@ exports[`<ProductTemplateProgress /> renders with all the props 1`] = `
   transform: translate(-50%,-50%);
 }
 
+.c2 {
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .c0 {
   max-width: 525px;
 }
@@ -80,21 +92,28 @@ exports[`<ProductTemplateProgress /> renders with all the props 1`] = `
     <div
       class="c1"
     >
+      <span
+        class="c2"
+        id="in-progress"
+      >
+        In progress
+      </span>
       <div
-        aria-label="Static progress bar showing step 1 of 2"
+        aria-labelledby="in-progress"
         aria-valuemax="2"
         aria-valuenow="1"
-        class="c2"
+        aria-valuetext="Static progress bar showing step 1 of 2"
+        class="c3"
         role="progressbar"
       >
         <span
-          class="c3"
+          class="c4"
         />
         <span
-          class="c4"
+          class="c5"
         />
         <div
-          class="c5"
+          class="c6"
         />
       </div>
     </div>

From b9f93fd4b654e2a990897516b30e8422bec84df4 Mon Sep 17 00:00:00 2001
From: OlenaKashuba <amely.jazz@gmail.com>
Date: Tue, 31 Oct 2023 10:37:32 +0000
Subject: [PATCH 3/3] fix(inappropriate aria use): inaproppriate aria use

---
 .../molecules/Progress/Progress.tsx           | 11 +--
 .../__snapshots__/Progress.test.tsx.snap      | 72 +++++++++----------
 .../ProductTemplateHeader.test.tsx.snap       | 24 +++----
 .../ProductTemplateProgress.test.tsx.snap     | 24 +++----
 4 files changed, 61 insertions(+), 70 deletions(-)

diff --git a/src/components/molecules/Progress/Progress.tsx b/src/components/molecules/Progress/Progress.tsx
index af9522643..255b3240d 100644
--- a/src/components/molecules/Progress/Progress.tsx
+++ b/src/components/molecules/Progress/Progress.tsx
@@ -5,6 +5,7 @@ import { colors, typography } from '../../../constants';
 import { Colors } from '../../../constants/colors';
 import Text from '../../atoms/Text/Text';
 import { useThemeContext } from '../../styles/Theme';
+import HiddenText from '../../atoms/HiddenText/HiddenText';
 
 export interface ProgressionStyleProps {
   /**
@@ -77,16 +78,6 @@ const ProgressPoint = styled.span<ProgressPointProps>`
   transform: translate(-50%, -50%);
 `;
 
-const HiddenText = styled.span`
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-`;
-
 const getStepPosition = (steps: number, stepIndex: number) => {
   const position = (100 / (steps - 1)) * stepIndex;
   if (position < 0) {
diff --git a/src/components/molecules/Progress/__snapshots__/Progress.test.tsx.snap b/src/components/molecules/Progress/__snapshots__/Progress.test.tsx.snap
index 6c682cc38..720e6e69a 100644
--- a/src/components/molecules/Progress/__snapshots__/Progress.test.tsx.snap
+++ b/src/components/molecules/Progress/__snapshots__/Progress.test.tsx.snap
@@ -1,6 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Progress /> Accessibility renders the component with props with no a11y violations 1`] = `
+.c1 {
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .c0 {
   margin-left: 6px;
   margin-right: 6px;
@@ -105,18 +117,6 @@ exports[`<Progress /> Accessibility renders the component with props with no a11
   transform: translate(-50%,-50%);
 }
 
-.c1 {
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 <div>
   <div
     class="c0"
@@ -159,6 +159,18 @@ exports[`<Progress /> Accessibility renders the component with props with no a11
 `;
 
 exports[`<Progress /> Props renders empty progress bar 1`] = `
+.c1 {
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .c0 {
   margin-left: 6px;
   margin-right: 6px;
@@ -263,18 +275,6 @@ exports[`<Progress /> Props renders empty progress bar 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c1 {
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 <div
   class="c0"
 >
@@ -315,6 +315,18 @@ exports[`<Progress /> Props renders empty progress bar 1`] = `
 `;
 
 exports[`<Progress /> Props renders full progress bar 1`] = `
+.c1 {
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .c0 {
   margin-left: 6px;
   margin-right: 6px;
@@ -419,18 +431,6 @@ exports[`<Progress /> Props renders full progress bar 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c1 {
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 <div
   class="c0"
 >
diff --git a/src/components/templates/ProductTemplate/ProductTemplateHeader/__snapshots__/ProductTemplateHeader.test.tsx.snap b/src/components/templates/ProductTemplate/ProductTemplateHeader/__snapshots__/ProductTemplateHeader.test.tsx.snap
index 152979317..ccd274773 100644
--- a/src/components/templates/ProductTemplate/ProductTemplateHeader/__snapshots__/ProductTemplateHeader.test.tsx.snap
+++ b/src/components/templates/ProductTemplate/ProductTemplateHeader/__snapshots__/ProductTemplateHeader.test.tsx.snap
@@ -82,6 +82,18 @@ exports[`<ProductTemplateHeader /> renders with all the props 1`] = `
   line-height: 0;
 }
 
+.c8 {
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .c7 {
   margin-left: 6px;
   margin-right: 6px;
@@ -144,18 +156,6 @@ exports[`<ProductTemplateHeader /> renders with all the props 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c8 {
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 .c6 {
   max-width: 525px;
 }
diff --git a/src/components/templates/ProductTemplate/ProductTemplateProgress/__snapshots__/ProductTemplateProgress.test.tsx.snap b/src/components/templates/ProductTemplate/ProductTemplateProgress/__snapshots__/ProductTemplateProgress.test.tsx.snap
index 99d0b582a..2551da8b8 100644
--- a/src/components/templates/ProductTemplate/ProductTemplateProgress/__snapshots__/ProductTemplateProgress.test.tsx.snap
+++ b/src/components/templates/ProductTemplate/ProductTemplateProgress/__snapshots__/ProductTemplateProgress.test.tsx.snap
@@ -1,6 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ProductTemplateProgress /> renders with all the props 1`] = `
+.c2 {
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .c1 {
   margin-left: 6px;
   margin-right: 6px;
@@ -63,18 +75,6 @@ exports[`<ProductTemplateProgress /> renders with all the props 1`] = `
   transform: translate(-50%,-50%);
 }
 
-.c2 {
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 .c0 {
   max-width: 525px;
 }