refactor: better focus-visible a11y

[Barsnes]

This PR aims to tackle a11y focus visibility.
Currently some items does not show visible focus, and some items uses the wrong semantic element.

This does not enhance anything else related to a11y, except a few instances where doing so improves focusing elements.

[190km]

all the changes look good, just for the input I imagine it was removed originally to avoid destroying the UX, because the focus ring around the input doesn't look very good.

[Barsnes]

all the changes look good, just for the input I imagine it was removed originally to avoid destroying the UX, because the focus ring around the input doesn't look very good.

Thanks for the feedback. I'd argue the input should have some focus indication, but I'll gladly make changes to the focus ring on the input, perhaps make it smaller?

[190km]

all the changes look good, just for the input I imagine it was removed originally to avoid destroying the UX, because the focus ring around the input doesn't look very good.

Thanks for the feedback. I'd argue the input should have some focus indication, but I'll gladly make changes to the focus ring on the input, perhaps make it smaller?

yes, I think it would look better if it was smaller and darker

[Barsnes]

all the changes look good, just for the input I imagine it was removed originally to avoid destroying the UX, because the focus ring around the input doesn't look very good.

Thanks for the feedback. I'd argue the input should have some focus indication, but I'll gladly make changes to the focus ring on the input, perhaps make it smaller?

yes, I think it would look better if it was smaller and darker

Here are some suggestions:
1: focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1

2: focus-visible:ring-1 focus-visible:ring-ring

3: focus-visible:ring-2 focus-visible:ring-ring

4: focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-gray-400

I have committed option 3 to the branch

[Barsnes]

I have noticed a few spots I missed, so will set this back to draft for now.

[Siumauricio]

I don't like to much the colors, using ring-border feels more right according to the colors instead of white color

[Barsnes]

I don't like to much the colors, using ring-border feels more right according to the colors instead of white color

This is up to you in the end, so I have gone ahead and committed ring-border for focus-visible on the input.
Let me know if there are any other changes you'd like

[Siumauricio]

@Barsnes Go ahead with the changes