1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-04 01:18:20 +02:00

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"
/>
This commit is contained in:
Thomas Heartman 2025-04-07 14:50:07 +02:00 committed by GitHub
parent 588e35e759
commit 6ea823f011
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -56,7 +56,6 @@ export const FeatureToggleSwitch: VFC<FeatureToggleSwitchProps> = ({
inputProps={{ 'aria-label': environmentName }}
onClick={onClick}
data-testid={'permission-switch'}
disableRipple
disabled={value !== isChecked}
/>
</StyledBoxContainer>