Select, Listbox, Combobox does not have label slots

[apsthisdev]

fast_select and fast_list and fast-combobox does not have label slot to show the title or the label .

E.g.

<fast-select>
    <label slot="label">Title</label>
    <fast-option value="1">Option 1</fast-option>
    <fast-option value="2">Option 2</fast-option>
    <fast-option value="3">Option 3</fast-option>
</fast-select>

The fast_radio_group has the label slot and that helps to show the title.

<fast-radio-group>
    <label slot="label">Group label</label>
    <fast-radio>Radio label 1</fast-radio>
    <fast-radio>Radio label 2</fast-radio>
    <fast-radio>Radio label 3</fast-radio>
</fast-radio-group>

[chrisdholt]

Thanks for filing this issue @ameyasubhedar! I think this inconsistency should definitely be addressed. With that said, I'm not sure if the right fix is to add a label or remove the labels from some of the other form controls. One thing we are running in to right now is that certain (though not all) assistive technology is having trouble resolving the link between the light DOM slotted content for labels and the slot in the Shadow DOM. We're about to do a massive a11y audit as part of our June deliverables, and I think that will (hopefully) shed some clear light on the best path forward here.

[radium-v]

Duplicate of #4642

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[chrisdholt]

To be picked up as part of Foundation vNext

[sseira]

It would be great if there was an option to add the label inside the .control and sit above the <slot name="button-container">

Trying to create something like this - which is a pretty standard design direction

[sseira]

In case anyone is trying to achieve the same thing as me, I extended Select and overrode displayValue() to add a label and it seems to be working

export class Select extends SelectFoundation {
  @attr
  label?: string

  /**
   * The value displayed on the button.
   *
   * @public
   */
  // @ts-ignore: Changing return type from string -> ViewTemplate to add label inside control
  public override get displayValue(): ViewTemplate {
    Observable.track(this, 'displayValue')
    return html`<div class="control-inner">
      ${this.label ? html`<label>${this.label}</label>` : ''}
      ${this.firstSelectedOption?.text}
    </div>`
  }
}

label.inside.select.mov

[janechu]

Unfortunately @microsoft/fast-components has been deprecated for some time and @microsoft/fast-foundation is in process to be deprecated per #6955. I believe the Fluent UI web components will solve the issue in a different way as well for their v3 release.