DEV Community

loading...

Discussion on: Stop choosing DX over UX. Or maybe not?

ashleyjsheridan profile image
Ashley Sheridan

You've removed the hover and focus styles, and left in a comment from the original React example that warns about making sure they get set correctly, but you don't do that. Focus styles are absolutely essential for those users who rely on keyboard for navigation. Try it yourself, visit a website and move around without a mouse. Notice how the visual focus indicator moves to each interactive element as you tab to it? Now imagine how difficult that navigation would be if there were no focus rings or borders on elements.

Never remove focus styles. You can change them if you feel you need something more in keeping with your design, but never remove them.

Thread Thread
stereobooster profile image
stereobooster Author

You've removed ... focus styles,

":focus-visible": {
    "box-shadow": inset
      ? `inset 0 0 0 3px ${color}`
      : `0 0 0 2px #fff, 0 0 0 5px ${color}`,
  },
Enter fullscreen mode Exit fullscreen mode

(Safari and IE require polyfill)

You've removed the hover

That is how CSS reset works - everything is removed, developer suppose to provide their own style

const MyButton = styled(BaseButton)`
  border: 1px solid black;
  :hover {
     background: pink;
  }
`
Enter fullscreen mode Exit fullscreen mode

There is even a comment

reset built-in styles of a button https://css-tricks.com/overriding-default-button-styles/

Don't forget to provide styles for:

 - default state
 - `:hover`
 - `:active` (See also https://bugzilla.mozilla.org/show_bug.cgi?id=68851)
 - `:disabled`
 - `:focus-visible`
Enter fullscreen mode Exit fullscreen mode