Focus Styling: Addressing the "Gotcha"

Incorrect: Potential Accessibility Issue (Gotcha)

This field uses focus:outline-none without a sufficient alternative like focus:ring . This can be an accessibility issue.

Correct: Accessible Custom Focus

This field uses focus:outline-none but provides alternatives: focus:border-indigo-500 and focus:ring-2 . This is accessible.

The "Gotcha" with focus styling is removing the browser's default focus outline (often using focus:outline-none ) without providing a clear and equally noticeable alternative. This can make it difficult for keyboard navigators and users with visual impairments to see which element is currently focused. Always ensure your custom focus styles are highly visible (e.g., using rings, distinct borders, or background changes).