From ed3dfb0c0aa4a78985acebaa3e6568a41f6136f0 Mon Sep 17 00:00:00 2001
From: Guilhem CARRON <gcarron@grandlyon.com>
Date: Thu, 27 Jan 2022 08:59:18 +0000
Subject: [PATCH] fix(ecogesture): Fix focus buttons on IOS
---
.../EcogestureSelectionDetail.tsx | 3 +++
.../EcogestureSelectionDetail.spec.tsx.snap | 21 +++++++++++--------
.../ecogestureSelectionDetail.scss | 9 +++++++-
3 files changed, 23 insertions(+), 10 deletions(-)
diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
index 055a3402a..5f79549fc 100644
--- a/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx
+++ b/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)}
>
diff --git a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap b/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
index 04807f72f..2eaf1e7ab 100644
--- a/src/components/EcogestureSelection/__snapshots__/EcogestureSelectionDetail.spec.tsx.snap
+++ b/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"
>
diff --git a/src/components/EcogestureSelection/ecogestureSelectionDetail.scss b/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
index db61bfa25..51956d804 100644
--- a/src/components/EcogestureSelection/ecogestureSelectionDetail.scss
+++ b/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;
+ }
}
}
--
GitLab