Why is the Checkbox component "jumping" when hovered on/off?
I've created the Checkbox component in React, but when I hover over it, the component appears to "jump". Why does it happen if the height of the component doesn't change?
https://stackblitz.com/edit/vitejs-vite-fkhdvvb4?file=src%2Fcheckbox%2FCheckbox.tsx
6 Replies
On your "checked" state you are removing the border, this makes the checkbox smaller, hence the "jump".
Changing
border:noneto. border-color: transparent; should remove the jump.or u can also use outline
this does not change the amount of space the element takes
outline is best reserved for accessibility
for example, a keyboard user will rely on outlines to know where the focus is
people that nuke the outlines and mess with them to uselessness make it hard/impossible for people to use the keyboard to navigate the website
and in extension, anybody with mobility difficulties that cant use a mouse will be unable to use your site
hmm ok
to expand on this, the accessibility issue comes when you entirely remove the outline from a focusable element. In this case, overwriting it with the checked state would make it hard to tell what's going on when the element is checked, which could be solved by having a specific :checked:focus state.
it's fine to use outline on non-focusable elements, or on focusable elements as long as you have a clear visual distinction between the focused and unfocused states
that is absolutely true
however, it's easier if people just dont touch it, since people tend to forget those small touches and just nuke it all
i see so many resets with the dreaded
* { outline: none }