Flatpickr: Add id to altInput so a label can be added for it

Created on 24 Jan 2017  路  3Comments  路  Source: flatpickr/flatpickr

When using the altInput option, an alternative field is added to display a human-readable date.

The alternative field doesn't have an id. By giving the altInput field an id, a label can be associated with the altInput field. Now when the user clicks the label, the calendar opens.

Most helpful comment

I must ask you to reconsider, @chmln.

Association between label and input is important. Besides being super convenient for regular users (click label, go to field), it's imperative for a good screenreader experience.

There are a couple of ways to associate labels with inputs:

  1. Wrap input in the label
  2. Use the for-attribute

And there are a couple of ways to set a label on an input:

  1. Using the title-attribute
  2. Using the aria-label attribute

You don't need id and for to associate an input with a label.

With above statement, you seem to favor the former. That is fine. But with all respect, you can't expect everyone to follow your standards. There are valid use-cases for each of the above. Flatpickr currently doesn't provide any means to associate the altInput with a label, which is inconvenient for regular users and very confusing for users that depend on screenreaders. Don't neglect them.

With just 6 LOC, Flatpickr gets support for at least one strategy. Please do reconsider.

All 3 comments

Hello,

You don't need id and for to associate an input with a label.
Consider omitting those for calendar inputs.

I don't think this particular issue warrants extra code.
But thank you for contributing regardless :+1:

I must ask you to reconsider, @chmln.

Association between label and input is important. Besides being super convenient for regular users (click label, go to field), it's imperative for a good screenreader experience.

There are a couple of ways to associate labels with inputs:

  1. Wrap input in the label
  2. Use the for-attribute

And there are a couple of ways to set a label on an input:

  1. Using the title-attribute
  2. Using the aria-label attribute

You don't need id and for to associate an input with a label.

With above statement, you seem to favor the former. That is fine. But with all respect, you can't expect everyone to follow your standards. There are valid use-cases for each of the above. Flatpickr currently doesn't provide any means to associate the altInput with a label, which is inconvenient for regular users and very confusing for users that depend on screenreaders. Don't neglect them.

With just 6 LOC, Flatpickr gets support for at least one strategy. Please do reconsider.

Bump. This is currently breaking our screen reader accessibility. Would be great to had support for passing in an HTML ID

Was this page helpful?
0 / 5 - 0 ratings

Related issues

titiyoyo picture titiyoyo  路  3Comments

ibarral picture ibarral  路  3Comments

719media picture 719media  路  3Comments

mchaves-ciandt picture mchaves-ciandt  路  3Comments

T-Hugs picture T-Hugs  路  3Comments