Focus Styling - Addressing the "Gotcha"

Gotcha: Poor Accessibility

placeholder="Click me - hard to see focus?">

Problem: This input uses focus:outline-none but does NOT provide an alternative like focus:ring or a clear focus:border-color . This makes it very difficult for keyboard users to see which element is focused, which is an accessibility issue.

Corrected: Good Accessibility

Solution: This input also uses focus:outline-none , but it correctly adds focus:border-purple-500 and focus:ring-2 focus:ring-purple-400 . This provides a clear visual indicator for focused state, maintaining accessibility.