Enhance focused <select> a11y by changing the rendering of the arrow

[julien-deramond]

Description

When a <select> is focused (without the validation state), the border in light mode changes from gray to black. This is the only change that users can see while focusing on this input control.
For the regular <input>s, at least, they can see the blinking text cursor.

The idea would be to change the rendering of the arrow:

• Regular state: filled triangle (black in light mode)
• Focused state (no validation): outlined triangle (black border in light mode)

Some questions to tackle while studying this topic:

• What about the error/success validation state with the outline when focused
• The outlined triangle + filled triangle would mean 4 images in the CSS because of background-image
• Inconsistency between the global visible focus rendering, and the specific one for basic form controls (when they are not in error/success)
• What about the dropdowns that have almost the same rendering but their visible focus is not handled the same way (outline)