Determine/document correct way to use GlListbox with GlFormGroup

To label a GlListbox, the natural choice would be to wrap it in a GlFormGroup.

Using something like this, it appears to render correctly:

<gl-form-group label="Group by" label-for="group-by-listbox">
  <gl-listbox id="group-by-listbox" v-model="groupBy" :items="$options.groupByOptions" />
</gl-form-group>

Renders as:

The problem is, the a11y properties don't seem right. I want the pushbutton to have the text "Group by Component" (assuming "Component" was the selected value in the listbox). But, it doesn't:

So, I tried to add an id to the group and pass aria-labelledby to the listbox:

<gl-form-group id="group-by-listbox-label" label="Group by" label-for="group-by-listbox">
  <gl-listbox
    id="group-by-listbox"
    v-model="groupBy"
    :items="$options.groupByOptions"
    aria-labelledby="group-by-listbox-label"
  />
</gl-form-group>

But that ends up doubling the selected value, because the form group's id is applied to the div that wraps the label and listbox:

The question is: what's the correct way to connect the two?