When working on a website, writing your CSS and you remove outline, ensure that your all interactive components have visible focusable state. when you use outline: none, for components or you set it on all elements, it will be impossible for people that use keyboard for navigation to see where they are. If you want to style your focusable state, use :focus-within pseudo class.
button: {
outline: none;
}
button:focus-visible {
border: 1px solid red;
} Overall, it is good to remove focus state and use focus-visible for interactive elements. This removes a visual noise while it maintains focus state for all elements that are tabbed or accessed using an accessibility device.
Open: Screenshot 2025-03-21 at 16.23.29.png
