Remove focus border (outline) on safari

[shaynlink]

First sorry for my English 😅

Isn't really a bug, focus border (aka outline) is a default css in all navigator, it's not working on chrome but it's on safari.

Why remove outline ?
What is outline ? outline is a default css style active when a div (or other component) is focused, for indicate to user that this component is used.
But when outline is active, on toggle you have an unpleasant feeling and you want to click outside the component for remove outline (please say me I'm not alone 😟).
So this feeling is not good for user experience, because for one click component like toggle you need click two time (one time for interact with component and one time outside component for remove outline).
You can keep outline for multi interact component like input, but isn't good for one click component like toggle, button or for parent/global component like card.

Steps to reproduce

1. Click on toggle
2. See outline

Expected behaviour
Outline not apparead

Screenshots

Environment / Context

• Desktop (I don't have iPhone, so idk for safari mobile)
• Operating System: MacOS 12.2
• Browser and version: Safari stable 15.3
• Device: MacBook Pro 2020 M1

[mariusflorescu]

@shaynlink thank you for reporting !

[Joaovsa7]

Isn't an outline good for accessibility? I think that we should consider this point before removing it.

What do you think about it?

[Perni1984]

yes it is - better to style the outline in a proper way than to remove it.

https://www.a11yproject.com/posts/never-remove-css-outlines/

[calebpanza]

I have a card based design that I would prefer to not have a focus state on at all. Is there any way to remove it, currently?

[stale]

Hello 👋, to help manage issues we automatically close stale issues. This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention? > This issue will be closed in 10 days if no further activity occurs. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this is still present in the latest release, please feel free to create a new issue with up-to-date information.

[Perni1984]

@calebpanza you should be able to use the css prop to overwrite any styling you don't need (https://stitches.dev/docs/overriding-styles#the-css-prop)