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?