Accessibility bug: VersionSwitcher does not have visible focus indicator

[ashleemboyer]

Description

1. Environment

• Date encountered: Thursday, November 2nd, 2023
• Device: MacBook Air M1 2020
• OS: Ventura 13.5.1
• Browser: Google Chrome Version 117.0.5938.132

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.

Screen.Recording.2023-11-02.at.2.02.22.PM.mov

6. Relevant Code Links

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

chakra-ui-docs/src/components/version-switcher.tsx

Line 24 in c0aa420

variant='unstyled'

7. Relevant Resources

• WCAG 2.1 Success Criterion 2.4.7 Focus Visible (Level AA): "Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible."

[ashleemboyer]

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

#1668