feat(a11y): Add focus to model select and improve visibility in submenus

[derekjackson-das]

Summary

With the new model select component focus was no longer visible when it was the active element because there were multiple focus-visible styles with more specificity than the applications global style. I removed the styles so the focus-visible style matches the applications overall style and in light and dark modes.

Further improved the visibility of menu and sub-menu options so that contrast meets new Web Content Accessibility Guidelines and older non-text contrast requirements.

Please review the submenu items as it does effect the visual style.

Files touched:

• client/src/styles.css
• client/src/components/Chat/Menus/Endpoints/CustomMenu.tsx
• client/src/components/Chat/Menus/Endpoints/ModelSelector.tsx

Screen recording of the focus change: https://share.zight.com/v1uz68vy

Change Type

Accessibility

• Bug fix (non-breaking change which fixes an issue)

Testing

Please describe your test process and include instructions so that we can reproduce your test. If there are any important variables for your testing configuration, list them here.

Manual Keyboard and Automated (axe dev tools) accessibility testing.

Test Configuration:

Chrome/MacOS
Firefox/MacOS

Checklist

Please delete any irrelevant options.

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• My changes do not introduce new warnings

[berry-13]

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

[derekjackson-das]

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.

[berry-13]

hey, I completely forgot to respond earlier. the line graphic you shared in your last screenshot looks much better and could definitely enhance accessibility for all users. thanks!