Improve the accessibility of select elements [#3566199]

Overview

There are few problems in the context of select elements:

The select isn’t really recognizable. Per se it is compliant with WCAG2.2 1.4.11 due to the fact that the black dropdown indicator (---gray-12 - rgba(0, 0, 0, 0.847)) against the light grey background of the select (#f0f0f3) has a high enough color contrast (see “Dropdown indicator” on https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html), But the dropdown indicator that identifies a select element as a focusable/clickable select element is not in close proximity to the label - already for someone using a screen magnification solution that poses a problem. The sole visual cue connecting the label and the dropdown indicator is the background color in slight grey, but that background color #f0f0f3 against the background of the sidebar (#ffffff) has only a color contrast ratio of 1.14:1.

the window of the color contrast checker pika in macos next to a clipping of the right sidebar in drupal canvas showing a collapsed variant select element with the default primary and two text fields labeled label and link underneath

In forced color mode the background is not visible at all, you only see the label and the dropdown indicator - the visual disconnect is even more striking that way.

a collapsed variant select element with the default primary and two text fields labeled label and link underneath in forced color mode

The styling of the select differs across browsers, the problem is in Safari it isn’t meeting WCAG2.2 SC 2.5.8 because the height of the select element is only 20px. The required minimum to meet SC 2.5.8 would be a height of 24 pixels. In Firefox and Edge the height is 32px. (tested on Drupal CMS 2.x with the Byte theme in Firefox Developer Edition 147.0b4, Edge 143.0.3650.80 and Safari 26.2)

three windows with a select element next to each other on the left firefox, in the middle edge, and on the right safar

The list of available options is only expanded by pressing the space bar, pressing the return button has no effect (https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-sele...)

Discussed the issue with @the_g_bomb and @itmaybejj

Proposed resolution

Either increase the background color of the select element against the white background of the right sidebar to a color contrast of at least 3:1 or use a border with a color that has also a color contrast of at least 3:1 against the background color of the sidebar while dropping the grey background of the select element and use the white background as well. And make sure that the select label still has a color contrast of at least 4.5:1 against the chosen background color and the dropdown indicator a color contrast of at least 3:1.
Ensure that the border for the select element is visible in forced color mode.
Increase the height of the select element to 32px in Safari as well (exceptions might apply in this case in regard to wcag compliance after the element is rendered in browser styles with no other clickable element in close proximity. but it is preferable to keep the experience consistent across browser)
The list of options should also expand by pressing the return button