My node/add/%content_type pages are not validating as XHTML, due to the duplicate edit-field-banner-0-upload-wrapper IDs in the snippet below:

<div  id="edit-field-banner-0-ahah-wrapper">
  <div class="form-item" id="edit-field-banner-0-upload-wrapper">
      ...
          <div class="form-item" id="edit-field-banner-0-upload-wrapper">
             ...

The first one comes from theme_filefield_widget, but I can't track down the latter (maybe in the .js?).

ID's should be unique.

Comments

quicksketch’s picture

Priority: Normal » Minor

Ugh, this is a stupid problem. We can't get rid of the ID on the upload field because it's needed for screenreaders and accessibility. The outside wrapper ID is unnecessary but we can't get rid of it from FAPI because it needs to be passed down to the child elements. If we were in D7 we'd just remove the unnecessary wrapper around the whole thing, but in D6 this is automatically output. We'll need to do some kind of clever approach to remove the outside wrapper ID but pass the element ID down to the child elements.

anrikun’s picture

subscribing

Everett Zufelt’s picture

I don't believe that id is necessary for any assistive technology. Of course I just woke up.

@quicksketch Can you please explain your reasoning in #1?

Everett Zufelt’s picture

Ah, we are probably using the id as the value for the @for attribute of a label. This makes me question if screen-readers respect labels that point to multiple elements using the same id.

If someone wants to set up a quick test I will test with a variety of screen-readers.

quicksketch’s picture

Ah, we are probably using the id as the value for the @for attribute of a label.

Yep, that's right. So we can't change #id to something else (or remove it). The wrapper is added automatically by theme_form_element().

Everett Zufelt’s picture

What is the best place for me to test this? We can look at aria-labeledby for the additional fields if necessary.

pippal’s picture

Subscribing. I can test any patches. Running file-field 3.10

Also, is there any way of removing class="form-item" from the second duplicate div, it means any css written for .form-item is duplicated, so for me there is double padding above the form items.