Remove focus ring for mouse clicks on buttons, text links, menu items and menu collapsibles

[uxkai]

Description:

I would like to propose an adjustment to the visibility of the focus ring for mouse clicks on our UI elements that don't require any user input, like buttons and menu items. Currently, the focus ring is visible when these elements are clicked with the mouse, which may not provide the best user experience for all users.

Note: I also noticed the behavior described below in all Tailwind UI examples on their website.

Proposed changes:

Remove focus ring for mouse clicks on buttons, text links, menu items, and menu collapsibles:
   - Make the focus ring for these elements visible only when navigating with the keyboard (i.e., when using the Tab key). This can be achieved by utilizing the focus-visible class from Tailwind CSS.

Keep focus ring visible for mouse clicks on elements that require user input:
   - This behavior is currently already in place: Maintain the focus ring visibility for mouse clicks on elements that require user input: text inputs, text areas, select elements, toggles, checkboxes, and radio buttons. Of course, the focus ring also remains crucial for users navigating with the keyboard.

Benefits:

• Improved user experience: Keyboard users will still have clear visual feedback, while mouse users won't see the focus ring unnecessarily, resulting in a cleaner interface.
• Enhanced accessibility: Ensuring focus indicators for input fields keeps the application accessible to all users.

Next steps:

• Implement the focus-visible class on buttons, text links, menu items, and menu collapsibles.
• Test the changes across various browsers to ensure consistent behavior.