Ensure all relevant components have a focus state

[felixjung]

Describe the bug

At the moment, not all of our components have a focus state. Here is an article describing the topic. The short summary is that this is very helpful for screen readers, people with keyboards, etc.

We should do a review of components and add focus states where necessary.

Expected behavior

Components like links, buttons, etc. should all have a focus state that is visible to the user.

[larimaza]

I went ahead and tested all components that are in the live docs to refine this issue. All components have acceptable focus states except for:

• Input/textArea in the "Invalid" and "Warning" states: changes from red to blue and that color contrast is not enough (possible solution: increasing stroke thickness in focused state). However, there's always the blinking cursor as feedback and we could decide whether that's enough.

• Selector: is not focusable by keyboard, but that will have to be refactored because it's a div.

• Toggle: only has a focus style on Firefox, and it's a dashed border. Because our other focused states are solid borders, maybe we could change this to match the standard.

• Base button: has two focus styles on Firefox (border and text outline, while the latter is Firefox-only). Should we change this?

• Primary button: I think focused state is way too subtle, even not for the color blind.

• Plain button: only has a focus style on Firefox, and it's a dashed border. Maybe we could change this to underline the text, like the hover state.

• Hamburger: uses default browser focus styles.

• Pagination: only has a focus style on Firefox, except for the arrow buttons.

• Sidebar: is not focusable by keyboard.

• Table: is not focusable by keyboard.

• Tabs: only has a focus style on Firefox.

• Clickable tag: is not focusable by keyboard.

While I was there, I also tested the hover states, here's what I found:

• Checkbox: no hover style. Cursor should also swap to pointer.

• Radio: no hover style. Cursor should also swap to pointer.

• Select: no hover style. Cursor should also swap to pointer.

• Selector: the hover style has a wobbly behavior.

• Toggle: no hover style. Cursor should also swap to pointer.

• CloseButton & IconButton & Hamburger: only hover style is the pointer cursor.

• Tabs: only hover style is the pointer cursor.

Possible solutions for some of the cases above could also be replicating the same hover styles for focus styles. I wrote about this here: https://css-tricks.com/having-a-little-fun-with-custom-focus-styles/

Hope this was helpful, let's get to work 🚀

[github-actions]

🎉 This issue has been resolved in version 2.0.0-alpha.16 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 2.0.0-beta.1 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 2.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀