[All Form Controls][SCREEN READER]: `prepend` and `append` labels are not announced when main control receives focus

[1Copenut]

:warning: Quick note: this issue was originally just for EuiSuperSelect, but then we realized it applied to all form controls with prepend/append.

Description

EuiSuperSelect allows users to add a prepend and/or append prop to render a <label/> or custom React element next to the default listbox button. This label does not create an association with the button or the hidden input for screen readers. Additionally, the input[type="hidden"] is ignored by screen readers. Users do not get the benefit of that appended or prepended label as our component exists today.

Proposed change

I'm proposing we adjust the <button> element inside super_select_control.tsx to include a discretionary aria-labelledby attribute. By moving the id attribute to the button itself, and adding an ID to prepended or appended elements, we can build a combined accessible label.

WCAG success criteria

• SC 1.3.1: Info and Relationships (Level A)

Screenshots