required id property in DateInput, SingleDatePicker, SingleDatePickerInput

[Artur-A]

Hi,

DateInput, SingleDatePicker and SingleDatePickerInput has id property, which is required.
I cannot see why it is done as mandatory field.

Is it done on purpose or the field can be optional?

See src/components/DateInput.jsx#L7

and

        <input
          id={id}
          name={id}

[ljharb]

It's done on purpose. For accessibility, all inputs must be both wrapped in a <label> that it is also linked to with id/htmlFor. IDs must be unique on the page, so a reusable component can't safely generate them. Typically, you'd want to pass them down from the server, since that's the only place you know for sure a component is only being used once on the page.

(also for accessibility, inputs shouldn't be used outside of forms)

[Artur-A]

Thank you Jordan.

Got the idea.
But there are still some confusion in my head. Hope to clear it up:

• label requires id for assistive technologies (like screen readers). At the same time aria-label is already used for the same purpose in DateInput.jsx. And the field aria-label does not require id at all.

• for a form posting name field is required, but it can be done as an optional field and has name property in control instead of id duplication. Some date controls are not placed in the form => name can be optional.

• DateRangePicker control uses optional startDateId and endDateId props and feels them with default string ids. The second instance of DateRangePicker on the screen without ids overriding will break DOM id uniqueness. Under the hood startDateId and endDateId are forwarded to DateInput.id. DateRangePicker ids are made optional, but DateInput, SingleDatePicker, SingleDatePickerInput ids are made as mandatory fields.

• it seems that id can be optional

[ljharb]

You're right, DateRangePicker should have startDateId and endDateId props required as well. Thanks for pointing out the omission!

[h0jeZvgoxFepBQ2C]

This should be renamed to something more obvious, needed to browse the web to understand why startDateId is required. Also it shouldnt be required imo.

[h0jeZvgoxFepBQ2C]

Also I dont use any labels around or a form, I just use the component via onChange callback, so there are no labels at all.

[ljharb]

That's not accessible; a form input must always have a wrapped label that's for-ID linked.

[h0jeZvgoxFepBQ2C]

We are developing internal systems which are not used by people which need these accessible attributes. Also the HTML standard doesn't require them, so I think it's overreach to require these attributes there.

[ljharb]

Employees require a11y affordances just the same as end users - the legal requirements are often stronger for employees, in fact. The HTML standard doesn't require a lot of things, but that's not the authority on UI.