Desktop: Accessibility: Make keyboard focus visible for dropdowns

[personalizedrefrigerator]

Summary

This pull request makes keyboard focus visible when settings <select>s have focus. Previously, these elements had the same appearance when unfocused as when focused.

Related to #10795, WCAG §2.4.7 (see F87).

Notes:

• This currently uses --joplin-border-color3 when :focus-visible.
• For selects, :focus-visible is true after clicking (not just when navigating with the keyboard).

Screenshots

Settings

Before:

After:

Revision viewer

After:

Important

This style is applied using :focus-visible. Because these are <select>s, this style is applied after selecting an item, even without a keyboard.

[laurent22]

I wonder if the contrast is sufficient for this? What would be WCAG guideline for this?

[personalizedrefrigerator]

I wonder if the contrast is sufficient for this? What would be WCAG guideline for this?

I've changed the color to be consistent with the other focus indicators. The WCAG's Understanding Focus Appearance (SC 2.4.13) discusses the appearance of focus indicators (though is a level AAA guideline and we're currently targeting level AA). With the updated indicator:

• SC 2.4.13 contrast requirements
• SC 2.4.13 size requirements

Currently, however, it's the same size as the other focus indicators (a larger size with border styling would cause a layout change). It may make sense to adjust the border width of the focus indicators all at once.