<fieldset><legend></legend>
<div class="container-inline-date date-clear-block"><div class="form-item" id="edit-field-emploi-date-0-value-wrapper">
 <label for="edit-field-emploi-date-0-value">Date de début : <span class="form-required" title="Ce champ est obligatoire.">*</span></label>
 <div class="form-item" id="edit-field-emploi-date-0-value-datepicker-popup-0-wrapper">
 <input type="text" maxlength="30" name="field_emploi_date[0][value][date]" id="edit-field-emploi-date-0-value-datepicker-popup-0" size="20" value="09/10/2009" class="form-text" />
 <div class="description"> Format : 09/10/2009</div>
</div>

</div>
</div><div class="container-inline-date date-clear-block"><div class="form-item" id="edit-field-emploi-date-0-value2-wrapper">
 <label for="edit-field-emploi-date-0-value2">Date de fin : </label>
 <div class="form-item" id="edit-field-emploi-date-0-value2-datepicker-popup-0-wrapper">
 <input type="text" maxlength="30" name="field_emploi_date[0][value2][date]" id="edit-field-emploi-date-0-value2-datepicker-popup-0" size="20" value="23/10/2009" class="form-text" />
 <div class="description"> Format : 09/10/2009</div>
</div>

reference to non-existent ID "edit-field-emploi-date-0-value2"
reference to non-existent ID "edit-field-emploi-date-0-value"

CommentFileSizeAuthor
#9 date-600236-9.patch3.26 KBcpliakas
#7 date-600236-7.patch3.26 KBcpliakas
#7 markup-pre-patch.png81.92 KBcpliakas
#7 markup-post-patch.png81.02 KBcpliakas
#1 date_popup_label_fix.patch759 bytesa1russell

Comments

a1russell’s picture

a1russell commented
StatusFileSize
new date_popup_label_fix.patch759 bytes

I also ran into this problem and created this patch. Any suggestions for improvement are welcome...

anrikun’s picture

anrikun commented
Status: Active » Needs review
anrikun’s picture

anrikun commented
Status: Needs review » Needs work

After applying the patch, "Label for" works but I still get these validation errors:

"edit-field-event-date-0-value-datepicker-popup-0-wrapper" already defined
"edit-field-event-date-0-value2-datepicker-popup-0-wrapper" already defined

HTML is:

<div class="form-item" id="edit-field-event-date-0-value-datepicker-popup-0-wrapper">
 <label for="edit-field-event-date-0-value-datepicker-popup-0">Date de début : </label>
 <div class="form-item" id="edit-field-event-date-0-value-datepicker-popup-0-wrapper">
 <input type="text" maxlength="30" name="field_event_date[0][value][date]" id="edit-field-event-date-0-value-datepicker-popup-0" size="20" value="" class="form-text" />
 <div class="description"> Format : 03/12/2010</div>
</div>

</div>
</div><div class="container-inline-date form-item date-clear-block"><div class="form-item" id="edit-field-event-date-0-value2-datepicker-popup-0-wrapper">
 <label for="edit-field-event-date-0-value2-datepicker-popup-0">Date de fin : </label>
 <div class="form-item" id="edit-field-event-date-0-value2-datepicker-popup-0-wrapper">
 <input type="text" maxlength="30" name="field_event_date[0][value2][date]" id="edit-field-event-date-0-value2-datepicker-popup-0" size="20" value="" class="form-text" />
 <div class="description"> Format : 03/12/2010</div>
</div>
anrikun’s picture

anrikun commented
Version: 6.x-2.4 » 6.x-2.x-dev
anrikun’s picture

anrikun commented

A way to fix this is to override theme_form_element() in your theme's template.php by adding:

<?php
/**
 * Override theme_form_element().
 */
function MYTHEME_form_element($element, $value) {
  // This is also used in the installer, pre-database setup.
  $t = get_t();

  $output = '<div class="form-item"';
  if (!empty($element['#id'])) {
    $output .= ' id="'. $element['#id'] .'-wrapper"';
  }
  $output .= ">\n";
  $required = !empty($element['#required']) ? '<span class="form-required" title="'. $t('This field is required.') .'">*</span>' : '';

  if (!empty($element['#title'])) {
    $title = $element['#title'];
    if (!empty($element['#id']) && preg_match('`<(?:input|select|textarea) [^>]*id="'. preg_quote($element['#id']) .'"`', $value)) {
      $output .= ' <label for="'. $element['#id'] .'">'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
    }
    else {
      $output .= ' <label>'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";
    }
  }

  $output .= " $value\n";

  if (!empty($element['#description'])) {
    $output .= ' <div class="description">'. $element['#description'] ."</div>\n";
  }

  $output .= "</div>\n";

  return $output;
}
?>
devin carlson’s picture

devin carlson commented
Status: Needs work » Needs review

I am also getting these validation errors when creating an exposed date filter with the calendar pop up.

I'm using version 6.x-2.7 of date.

Although it is possible to use the method described by anrikun, it would be nice to have this fixed in the module itself.

cpliakas’s picture

cpliakas commented
Issue tags: +508 Compliance
StatusFileSize
new markup-post-patch.png81.02 KB
new markup-pre-patch.png81.92 KB
new date-600236-7.patch3.26 KB

This is also an issue for 508 compliance. The attached patch avoids having to override theme_form_element() in template.php, which is a slick solution but a pain to do on every site. In addition, this fixes issues with duplicate "id" attributes in the wrapper element when multiple filters are used on the same page.

The attached images are screenshots of the markup before and after the patch is applied.

Thanks,
Chris

cpliakas’s picture

cpliakas commented

Just to follow up and clarify why there is a need for a theme_date_popup_wrapper_element() function in the patch...

If we use the standard theme_form_element() function, then both the inner and outer div elements will have the same "id" attribute, which is not good. The theme_date_popup_wrapper_element() makes the id for the outer div end with "-outer-wrapper" as opposed to just "-wrapper" avoiding the conflict. It sucks that we have to copy the entire function the change that small bit, but there are no override avenues we can take to modify the default output of theme_form_element().

Thanks,
Chris

cpliakas’s picture

cpliakas commented
StatusFileSize
new date-600236-9.patch3.26 KB

Rerolled patch posted in #7 to fix a typo in the commit message and fix a call to $t(), which should be t().

Thanks,
Chris

xavi.rodriguez’s picture

xavi.rodriguez commented

Hi everyone!
I want thank cpliakas and anrikun for their patch, but it still having problems because when the output is: 

$output .= ' <label>'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</label>\n";

it doesn't pass accessibility test. Now, I changed it for a < s p a n >
What do you think about it?

PS: In spain, by-law ALL the governmental websites must have a Double-A Level conformance to Web Content Accessibility Guidelines 1.0

anrikun’s picture

anrikun commented

Now, I changed it for a

A what ? ;-) You forgot to escape your tag.

xavi.rodriguez’s picture

xavi.rodriguez commented

Im sorry, i changed it for a span tag, instead of label.

xavi.rodriguez’s picture

xavi.rodriguez commented 
 else {
      $output .= ' <span>'. $t('!title: !required', array('!title' => filter_xss_admin($title), '!required' => $required)) ."</span>\n";
    }
mradcliffe’s picture

mradcliffe
he/him
Primary language English
commented

This also affects the 7.x-2.x branch. It may also crash IE8 and printing (can't find a good test case to reproduce).

Everett Zufelt’s picture

Everett Zufelt commented

This is definitely a problem for accessibility. Ensuring that the form field has a programmatically determinable name (label for="field-id" is essential.

Is there anything that we could do in D8 Core forms API to make this type of work easier in the future?

@javi.rodriguez - replacing the label with a span may resolve the validation error, but the purpose of the validation error is to signal that something is wrong, your work around fixes the error, but not the problem that the form is poorly accessible.

mradcliffe’s picture

mradcliffe
he/him
Primary language English
commented
Component: Code » Date Popup

I am not sure, but there may not be anything to do in core.

Date popup keeps the same element id while adding additional render elements underneath it with different HTML ids as part of its element #process callback (Reference line 316 and 119 of date_popup.module). I think the only way to fix this without a theme override is to change Date popup to change the main element id to the id it will use for its main HTML form element.

a1russell’s picture

a1russell commented
Status: Needs review » Needs work
mgifford’s picture

mgifford
he/him
Primary language English
commented
Version: 6.x-2.x-dev » 7.x-2.x-dev
Issue tags: +Accessibility

I'm assuming this is still an issue with D7 so just moving it ahead.

David_Rothstein’s picture

David_Rothstein commented

I think there might be two separate issues here?

  1. Orphaned form labels (i.e., a <label> present in the HTML which doesn't point to an actual form element). As accessibility issues go this one is, from what I understand, pretty minor. And it also seems to be a Drupal core issue (see, for example, discussion at #884846: Orphaned Labels Being Generated for Radios, Checkboxes & Items).
  2. Form elements that don't have labels. This is specific to the Date module and is a more serious accessibility problem. I have a patch to fix that at #1571258: Date and time form elements do not have accessible labels when the label position is set to 'Within' or 'None'.

Given the above, I'm not sure if this issue should be closed as a duplicate of the others? (I haven't looked too closely at the patches posted here.)

zxaos’s picture

zxaos commented
Issue summary: View changes

As a quick update, this is in fact still an issue on 7.x, and is not limited to the popup element. I'd also argue that it's still a separate issue from the two @david_rothstein listed.