How to work with label. ID is not attached to input.

[michaelpumo]

I'm submitting a ...

[ ] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[X] Other, please describe

Tell about your platform

• flatPickr version : 8.1.1
• Nuxt.js version : 2.3.4
• Browser name and version : Chrome 71.0.3578.98

Current behavior Unsure if this is a bug per se but I am trying to use a HTML label element for accessibility reasons. However, attaching an ID attribute to <flat-pickr id="hello" /> results in the ID being applied to the hidden field and NOT the generated input tag. This breaks the accessibility and the ability to focus the element with a label.

Expected behavior I would expect attributes added to the <flat-pickr /> element to bind to the visible / readable input that is generated in the DOM.

Minimal reproduction of the problem with instructions

<label for="hello">I am a label</label>
<flat-pickr id="hello" />

[ankurk91]

Are you using altInput in your flatpickr config?

[ankurk91]

This is a known issue, Similar https://github.com/ankurk91/vue-flatpickr-component/issues/104

[michaelpumo]

Hello @ankurk91 I am using the altInput option as you say:

Config:

config: {
  static: true,
  altFormat: 'J F Y',
  altInput: true,
  minDate: 'today',
  maxDate: new Date().fp_incr(365),
  disableMobile: true,
  disable: [
    (date) => {
      return (date.getDay() === 6 || date.getDay() === 0)
    },
    '2019-12-25',
    '2020-01-01',
    '2020-12-25',
    '2021-01-01'
  ]
}

The thing is, if I apply a class attribute to the calendar then that works just fine. It seems to only be the ID attribute that stays on the hidden element.

[leads]

I am now coming across this issue. There should be a label for the select and for the year input

[michaelpumo]

I believe this is actually an issue with Vue.js itself.

[leads]

I don't think it is Vue. It is flatpickr itself.

[tmorehouse]

From my testing, FlatPicker is not A11Y friendly (no screen reader announcements, keyboard accessibility is not at all presnet)