From 6ea823f0119f4d85cb85f771b6eb043e841199c6 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 7 Apr 2025 14:50:07 +0200
Subject: [PATCH] fix: restore focus style to the env switch (#9707)

Removes the "disableRipple" prop from the FeatureToggleSwitch component,
thereby restoring its focus styles, so that keyboard users can see where
their focus is at.

I don't know the reason this was added originally (the PR doesn't say
anything about it), but the prop changes nothing when hovering with the
mouse, but it does remove focus styles for keyboard navigation.

By removing it, we can bring the focus style back. As far as I can tell,
there's no other difference between the two states.

Both of these screenies have focus on the toggle, but in the first
screenie there's no way to tell.

With the prop:
<img width="397" alt="image"
src="https://github.com/user-attachments/assets/b9a5d764-ec5a-4d3b-b79d-0b52d7bd6891"
/>


Without the prop:
<img width="445" alt="image"
src="https://github.com/user-attachments/assets/3c95c7a6-91de-4ed2-9942-e9fc794e9d40"
/>

Because the component is used in multiple places, this also fixes this
issue in the project flag list (and maybe elsewhere too):
<img width="336" alt="image"
src="https://github.com/user-attachments/assets/6582c58b-fabe-40ce-a141-06b22189a462"
/>
---
 .../FeatureToggleSwitch/FeatureToggleSwitch.tsx                  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx
index 20bf331e94..538521e7c2 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx
@@ -56,7 +56,6 @@ export const FeatureToggleSwitch: VFC<FeatureToggleSwitchProps> = ({
                     inputProps={{ 'aria-label': environmentName }}
                     onClick={onClick}
                     data-testid={'permission-switch'}
-                    disableRipple
                     disabled={value !== isChecked}
                 />
             </StyledBoxContainer>