[Fix] Theme selector incorrectly focus on first item after selection

[willie-hung]

Description

This PR removes the initial focusing state when opening up the theme selector popup.

Issues Resolved

Fixes #1163

Demo

Before

before.mov

After

After.mov

Misc

Also fix a typo in guide_version_selector.tsx.

Check List

• New functionality includes testing.
• New functionality has been documented.
• All tests pass
  • yarn lint
  • yarn test-unit
• Update CHANGELOG.md
• Commits are signed per the DCO using --signoff

[willie-hung]

Hi @kgcreative, could you please assist in determining the best UX for this scenario? Thank you!

[kgcreative]

This is a challenging one. When opening via mouse, we shouldn't have a focus selector, however, per WCAG accessibility standards, there is an expectation that when you open a control via keyboard interaction, that we move keyboard focus to the first item in the opened control. As such, if we can't differentiate between keyboard or mouse input, the existing behavior is the more correct one.

Additional context: https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html

[willie-hung]

Thanks for sharing your insights, @kgcreative! Based on what you've described, would you suggest implementing a mechanism where if the element is opened via keyboard (for example, pressing the Tab key), we highlight the selector, but if not, we skip the highlighting?

[kgcreative]

Thanks for sharing your insights, @kgcreative! Based on what you've described, would you suggest implementing a mechanism where if the element is opened via keyboard (for example, pressing the Tab key), we highlight the selector, but if not, we skip the highlighting?

This may be a larger issue. I would explore using :focus-visible instead of :focus, since that does use browser heuristics to determine whether an element should have a visible focus indicator or not.

cc: @BSFishy + @joshuarrrr

[BSFishy]

I feel like this is the wrong way to go about this. I think that changing the default value for focus would be breaking for UX. Additionally, OuiContextMenuPanelDescriptor offers initialFocusedItemIndex, which I think would be a better way to implement this. Just set that value to whatever value is currently selected. That way we don't even need to differentiate if the panel was opened by keyboard or mouse

[kgcreative]

Yeah, this needs to be a component level change, not changing the fous behavior in the implementation