Focus visible on model menu selection

[derekjackson-das]

The focus on the model select button in the Model Select Menu is not visible

Issue Description

When focus moves to the model select button it is not seen. It is also unclear in the menu and sub-menus. The light grey on grey that indicates the current active element is below the 3:1 contrast requirement for non-text elements and the WCAG 2.2 recommended contrast for focus.

WCAG Criteria

2.4.7 Focus Visible - AA
WCAG 2.2 - 2.4.13 Focus Appearance

Notes

Likely should remove these styles. They are interfering with the other styles used that honor dark and light modes.

Screenshot or Screen Recording

https://share.zight.com/OAu1woeJ

[danny-avila]

Thanks, will merge this once we review the effect on styles, namely that there is no "cutting off" of borders in the various components.

[derekjackson-das]

Adding some user feedback we received around the new menu from some user testing as a little more support and context to this issue.

1. Switch system/Quad Stick user: "noticed that my focus did not appear on the GPT-4o-mini button. This may be because the button was already selected, but the lack of visual focus representation left me confused about where I was in the navigation process. I initially assumed my focus had jumped elsewhere on the page, leading to unnecessary searching and disorientation."
2. ZoomText user: "The outline of the selection field, where I could choose and change the default model, was light grey on a white background, making it hard to distinguish. I suggest making the outline darker to improve visibility and ensure it is easy to see."