DatePicker sin input har "label" i id

Hei. Ser at DatePicker sin input har merkelig id. <input type="text" id="my-date-input-label" role="combobox" ....>. Den burde ha id="my-date-input". Jeg så i kildekoden til DatePicker og det ser riktig ut der. Kan ikke se hvorfor den får label på slutten i id. Jeg antar den blir satt av fluent ui.

Fra source filen til DatePicker

const generatedId = generateId();
const mainId = id ? id : 'datepicker-' + generatedId;
const inputId = mainId + '-input';

Ser også at ComboBox får to input i id id="my-combobox-input-input".

Det samme med TextField, har to input i id id="my-input-input".

At det er to input er for så vidt greit, men at det er label i id'en til DatePicker er problematisk.

Av historiske grunner så er det lagt på noen ekstra wrappere på label / input-elementene i designsystemets DatePicker. Denne komponenten vil om ikke alt for lenge bli erstattet av en omskrevet versjon hvor vi ikke vil være avhenging av FluentUI. Derfor vil det ikke jobbet noe videre med denne komponenten.

Her har du en oversikt over HTML-strukturen på skatteetatens og fluentui sine komponenter

@skatteetaten/frontend-components

// Gitt at DatePicker blir kjørt med prop 'id' satt til "testid" så:
const mainId = id ? id : "datepicker-" + generateId();
const inputId = mainId + "-input";
const labelId = mainId + "-label";

HTML-kode med variabler

<div id="{id}">
  <label id="{labelId}" for="{inputId + '-label'}">Velg dato</label>
  <div id="{inputId}">
    <input id="{inputId + '-label'}" type="text" />
  </div>
</div>;

Generert HTML-kode

<div id="testid">
  <label id="testid-label" for="testid-input-label">Velg dato</label>
  <div id="testid-input">
    <input id="testid-input-label" type="text" />
  </div>
</div>;

@fluentui/react;

<label id="testid" for="testid-label">Velg dato</label>
<input id="testid-label" type="text" />

Skatteetaten / frontend-components

DatePicker sin input har "label" i id #31