wrong HTML on admin/user/user filter

the label element is not supposed to wrap the input element but be an individual inline element next to it instead.

plus it misses the for="edit-filter-permission" attribute

It's perfectly valid for a label to wrap the input element instead of using for='id' to associate it with the intput control.

plus the div class="form-item" has fixed width given by the css which chauses the label text to break down below the input element.

Duplicate for #132479: Filter theming on admin/user/user doesn't scale so this should be discussed further in that issue.

plus there is two definition definitions in the definition list.

I agree that the filter block is formatted a bit akwardly, and the definition list is abused here for display purposes. The same issue probably applies to admin/content/node. This also leads to some related problems (for example #177487: Non-translatable string 'is' on /admin/content/node page). Moving to 7.x-dev since bugs should be addressed in D7 first, and then backported.

It's perfectly valid for a label to wrap the input element instead of using for='id' to associate it with the intput control.

Tested with head. Looks like the label wraps the input element, but there is not title attribute, or other text, within the label, so there is no real "label" here to be accessed by assistive technology.

Recommendations:

1. Provide a title attribute for the input element, or

2. Remove the label from wrapping the input element and wrap the link in the second column in a label with the correct for attribute set.

Ok, some elements in this have already changed. In the hopes that it makes it easier to understand, I'm pumping in the code that's shipped to the page:

<div id="user-admin-filter"><fieldset id="edit-filters"><legend><span>Show only users where</span></legend><ul class="clearfix"><li><dl class="multiselect"><dd class="a"><div class="form-item form-type-radio form-item-filter">

<input type="radio" id="edit-filter-role" name="filter" value="role"   class="form-radio" />  <label for="edit-filter-role">role </label>

</div>
<div class="form-item form-type-radio form-item-filter">
<input type="radio" id="edit-filter-permission" name="filter" value="permission"   class="form-radio" />  <label for="edit-filter-permission">permission </label>

</div>
<div class="form-item form-type-radio form-item-filter">
<input type="radio" id="edit-filter-status" name="filter" value="status"   class="form-radio" />  <label for="edit-filter-status">status </label>

</div>

Hmm. can't seem to remove that png file. that's broken in one of my installs, but not in the most recent one...

Mike

I believe this can now be rolled in as a duplicate of
#558928: Form element labeling is inconsistent, inflexible and bad for accessibility