From 6ea823f0119f4d85cb85f771b6eb043e841199c6 Mon Sep 17 00:00:00 2001 From: Thomas Heartman 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: image Without the prop: image Because the component is used in multiple places, this also fixes this issue in the project flag list (and maybe elsewhere too): image --- .../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 = ({ inputProps={{ 'aria-label': environmentName }} onClick={onClick} data-testid={'permission-switch'} - disableRipple disabled={value !== isChecked} />