search

chakra-ui / chakra-ui-docs

Documentation website for chakra ui
https://chakra-ui.com
MIT License
300 stars 478 forks source link

Accessibility bug: VersionSwitcher does not have visible focus indicator #1667

Closed ashleemboyer closed 7 months ago

ashleemboyer commented 8 months ago

Description

1. Environment

2. Steps to Reproduce

  1. Go to the home page
  2. Press TAB until the "Search the docs" <button> is focused
  3. Press TAB one more time

3. Expected Result

The <select> rendered by VersionSwitcher should have a visible indicator.

4. Actual Result

The <select> rendered by VersionSwitcher does not have a visible focus indicator.

5. Screen recording

Here's a screen recording (with no sound) demonstrating the Actual Result I observed when running through the Steps to Reproduce.

https://github.com/chakra-ui/chakra-ui-docs/assets/43934258/53a65971-3c76-42fe-8b34-18bac04df2aa

6. Relevant Code Links

This variant='unstyled' property appears to be the line that is removing the visible focus indicator:

https://github.com/chakra-ui/chakra-ui-docs/blob/c0aa42001f0c79ce54e3c28797c7b7fb48573c75/src/components/version-switcher.tsx#L24

7. Relevant Resources

ashleemboyer commented 8 months ago

Just created a pull request that aims to fix this issue with 2 lines of code! 🤞🏻

https://github.com/chakra-ui/chakra-ui-docs/pull/1668