Hey @derekjackson-das, with ARIA comboboxes/listboxes, dropdown items never get real DOM focus, focus stays on the input, and the options just use aria-activedescendant. Because of this, we can’t show a focus ring (like :focus-visible) only for keyboard users on the options. WCAG (see this issue) says it’s fine to always show a visible highlight (like a background or border) for the active item, as long as it’s big enough and has good contrast, that counts as the “focus indicator”. So, it’s actually correct that it shows up for both mouse and keyboard without a focus ring

let me know your thoughts on this

Hey @berry-13! Thanks for reviewing this PR! And apologies, I did not describe the root of the issue well. I wasn't thinking of this as a technical issue and meeting Success Criteria (SC) in WCAG but rather making sure important UI is visible.

The issue I meant to address in this PR was that the indicator for the current active element in the new LLM menu, the highlight color, did not provide enough contrast. While we can probably say we technically meet the Success Criteria outlined in WCAG 2.1, I think of those as the bare minimum. There is often a lot of room for improvement still. Because the guidelines for non-text contrast of important elements is a minimum of 3:1 and we also have user testing that demonstrates people with low vision could not identify the LLM they were choosing due to the low contrast I suggested this update. So I approached this thinking about usability and best practice. I find the updates in WCAG 2.2 on focus requirements and the WCAG 2.1 non-text contrast criteria point us in good direction of having the indicator meet the 3:1 contrast at a minimum.

You are right about focus in the browser and the :focus pseudo-classes not fitting this component exactly ... the outline indicator is not available on elements that don’t get proper browser focus so I added the outline to an active element, but it is not the only way to indicate the currently active element and there are definitely other good solutions.

For example, using the highlight as the focus indicator on its own is a good solution but some users need it to be more visibly apparent. One good example of this type of indicator are the menus we see in operating systems.

Another approach could be an icon or graphic that indicates the current, active element, like a line or symbol.

What do you think? Could we improve the visibility of these options in the menus? And do you have another preference that we should use to make them more visible? If the outline is not ideal I could work on something else. This was just the solution I immediately gravitated to.

However, the focus is missing from the main "select a model" menu button in light mode so we should at least fix that, yes? I could also separate the PR into two, one for focus on the main menu and one for navigation in the sub-menu while looking at other ways to improve contrast/visibility in the sub-menus.