>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3614212. --> Reported by: [tiago](https://www.drupal.org/user/3654948) Related to !25 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>With <em>Alternative input</em> (<code>altInput</code>) enabled, the visible date field has no accessible name.</p> <p>flatpickr turns the original input (the one the <code>label for</code> points at) into <code>type="hidden"</code> and inserts an unlabelled clone next to it. The module never re-associates the label, so:</p> <ul> <li>The visible control has no accessible name. Screen readers announce an unlabelled edit field.</li> <li>Hidden inputs are not labelable, so <code>label.control</code> is <code>null</code>. The label is orphaned, not just pointing at the wrong control.</li> <li>Clicking the label does not focus the field or open the calendar.</li> <li><code>aria-describedby</code> is not carried over, so the description and validation messages are not announced either.</li> </ul> <p>This affects the field widgets, and exposed Views filters that use the <code>datetime_flatpickr_bef</code> submodule.</p> <p>Fails WCAG 2.1 success criteria <a href="https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships">1.3.1</a>, <a href="https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions">3.3.2</a> and <a href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value">4.1.2</a> (level A).</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li>Add a <em>Date</em> field and set its form display widget to <em>Flatpickr datetime picker</em>.</li> <li>Check <strong>Alternative input</strong> in the widget settings and save.</li> <li>Open the node add form and inspect the date field.</li> </ol> <p>The original input is now <code>type="hidden"</code> and keeps the id the label points at. The visible input next to it has no <code>id</code>, <code>aria-label</code> or <code>aria-labelledby</code>. In the console:</p> <pre><pre>const orig = document.querySelector('input[flatpickr-name]');<br>orig._flatpickr.altInput.labels.length;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // 0<br>document.querySelector(`label[for="${orig.id}"]`).control;&nbsp; // null</pre></pre><p>Same on an exposed filter using the <em>Date Picker with Flatpickr</em> BEF widget with <em>Alternative input</em> enabled.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>In <code>js/datetime-flatpickr.js</code>, after initialising flatpickr:</p> <ul> <li>Re-point the existing <code>label for</code> at the alternative input, giving it an id derived from the original (<code>original-id--alt</code>).</li> <li>Where there is no <code>label</code>, copy the original's <code>aria-label</code> instead.</li> <li>Copy <code>aria-describedby</code> across.</li> </ul> <p>Re-pointing the label is better than adding an <code>aria-label</code>. The visible text becomes the accessible name, so the two cannot drift apart (WCAG 2.5.3 Label in Name), and clicking the label works again.</p> <p>The change is JS only.<br> The alternative input has no <code>name</code> attribute, so the hidden original still submits the value in <code>dateFormat</code>. This is not a problem because the hidden original is not labelable, so it is not a candidate for form submission. </p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <ul> <li>Review the patch / merge request</li> <li>Commit and tag a new release once the fix is merged</li> </ul> <h3 id="summary-ui-changes">User interface changes</h3> <p>No visual change.<br> Clicking the field label now focuses the visible date input and opens the calendar; previously it did nothing, because its target was hidden. </p> <h3 id="summary-api-changes">API changes</h3> <p>None.</p> <h3 id="summary-data-model-changes">Data model changes</h3> <p>None.</p>