diff --git a/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx b/src/components/EcogestureSelection/EcogestureSelectionDetail.tsx index 055a3402acc7a20affe9c2c2ec7d0ceebc8716c9..5f79549fc7b92f9214766f98ab9fa43a3454a5d3 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 04807f72f8a09f0e5297a783496455859fa7612a..2eaf1e7ab2f2ffca19057a87b6a1c90cef18aa60 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 db61bfa253cdd25701e539fd2863ae849e296265..51956d80474f8324f80b90625194f83d22252cfa 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; + } } }