fix(ecogesture): Fix focus buttons on IOS

src/components/EcogestureSelection/EcogestureSelectionDetail.tsx

@@ -52,6 +52,7 @@ const EcogestureSelectionDetail: React.FC<EcogestureSelectionDetailProps> = ({
           classes={{
             root: 'btn-secondary-negative',
             label: 'text-14-bold',
+            focusVisible: 'noFocus',
           }}
           onClick={() => validate(true, false)}
         >
@@ -63,6 +64,7 @@ const EcogestureSelectionDetail: React.FC<EcogestureSelectionDetailProps> = ({
           classes={{
             root: 'btn-secondary-negative',
             label: 'text-14-bold',
+            focusVisible: 'noFocus',
           }}
           onClick={() => validate(false, true)}
         >
@@ -74,6 +76,7 @@ const EcogestureSelectionDetail: React.FC<EcogestureSelectionDetailProps> = ({
           classes={{
             root: 'btn-secondary-negative',
             label: 'text-14-bold',
+            focusVisible: 'noFocus',
           }}
           onClick={() => validate(false, false)}
         >

src/components/EcogestureSelection/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap

@@ -89,6 +89,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
         aria-label="ecogesture_selection.button_objective"
         classes={
           Object {
+            "focusVisible": "noFocus",
             "label": "text-14-bold",
             "root": "btn-secondary-negative",
           }
@@ -108,7 +109,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
               "disableElevation": "MuiButton-disableElevation",
               "disabled": "Mui-disabled",
               "endIcon": "MuiButton-endIcon",
-              "focusVisible": "Mui-focusVisible",
+              "focusVisible": "Mui-focusVisible noFocus",
               "fullWidth": "MuiButton-fullWidth",
               "iconSizeLarge": "MuiButton-iconSizeLarge",
               "iconSizeMedium": "MuiButton-iconSizeMedium",
@@ -138,7 +139,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
             component="button"
             disabled={false}
             focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
+            focusVisibleClassName="Mui-focusVisible noFocus"
             onClick={[Function]}
             type="button"
           >
@@ -155,7 +156,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
               component="button"
               disabled={false}
               focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
+              focusVisibleClassName="Mui-focusVisible noFocus"
               onClick={[Function]}
               type="button"
             >
@@ -253,6 +254,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
         aria-label="ecogesture_selection.button_doing"
         classes={
           Object {
+            "focusVisible": "noFocus",
             "label": "text-14-bold",
             "root": "btn-secondary-negative",
           }
@@ -272,7 +274,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
               "disableElevation": "MuiButton-disableElevation",
               "disabled": "Mui-disabled",
               "endIcon": "MuiButton-endIcon",
-              "focusVisible": "Mui-focusVisible",
+              "focusVisible": "Mui-focusVisible noFocus",
               "fullWidth": "MuiButton-fullWidth",
               "iconSizeLarge": "MuiButton-iconSizeLarge",
               "iconSizeMedium": "MuiButton-iconSizeMedium",
@@ -302,7 +304,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
             component="button"
             disabled={false}
             focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
+            focusVisibleClassName="Mui-focusVisible noFocus"
             onClick={[Function]}
             type="button"
           >
@@ -319,7 +321,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
               component="button"
               disabled={false}
               focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
+              focusVisibleClassName="Mui-focusVisible noFocus"
               onClick={[Function]}
               type="button"
             >
@@ -417,6 +419,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
         aria-label="ecogesture_selection.button_skip"
         classes={
           Object {
+            "focusVisible": "noFocus",
             "label": "text-14-bold",
             "root": "btn-secondary-negative",
           }
@@ -436,7 +439,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
               "disableElevation": "MuiButton-disableElevation",
               "disabled": "Mui-disabled",
               "endIcon": "MuiButton-endIcon",
-              "focusVisible": "Mui-focusVisible",
+              "focusVisible": "Mui-focusVisible noFocus",
               "fullWidth": "MuiButton-fullWidth",
               "iconSizeLarge": "MuiButton-iconSizeLarge",
               "iconSizeMedium": "MuiButton-iconSizeMedium",
@@ -466,7 +469,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
             component="button"
             disabled={false}
             focusRipple={true}
-            focusVisibleClassName="Mui-focusVisible"
+            focusVisibleClassName="Mui-focusVisible noFocus"
             onClick={[Function]}
             type="button"
           >
@@ -483,7 +486,7 @@ exports[`EcogestureSelectionDetail component should be rendered correctly 1`] =
               component="button"
               disabled={false}
               focusRipple={true}
-              focusVisibleClassName="Mui-focusVisible"
+              focusVisibleClassName="Mui-focusVisible noFocus"
               onClick={[Function]}
               type="button"
             >

src/components/EcogestureSelection/ecogestureSelectionDetail.scss

@@ -47,13 +47,20 @@
       height: 7.375rem;
       width: 6.5rem;
       border-radius: 0.25rem;
-      &:focus {
+      &:focus,
+      &.active,
+      &:disabled,
+      &:hover {
         background: transparent;
       }
+
       span {
         flex-direction: column;
         color: $grey-bright;
       }
     }
+    button.noFocus {
+      background: transparent;
+    }
   }
 }