User filter accessibility

I am willing to take a stab at rolling a first patch to get us started. My approach would be as follows:

• Revise this People page (/admin/people) very similar to #551034: Find Content filter accessibility.
• We will need to modify theme_user_filters, modules/user/user.admin.inc, user_filters code in modules/user/user.module
• With this gone, we could delete a lot of dead code for "multiselectSelector" from misc/form.js, remove all multiselect stuff from modules/system/system.css and system-rtl.css, and remove multiselect CSS from themes/seven/reset.css and themes/seven/style.css.

It seems like a win-win-win situation: simplifying the markup, getting rid of lots of dead CSS and javascript code, improving usability and accessibility.

Please let me know if you have any concerns with this approach. Otherwise I'll proceed with a first patch to try out.

It's ready for review and testing.

This patch does the following:

• In modules/user/user.admin.inc and modules/user/user.module, changes how we construct and process the user filter form, getting rid of the radio buttons and adding a default 'any' option to each filter instead.
• Updates modules/user/user.test to remove use of the filter radio button.
• Updates styles to lay out the filter form without the radios. Changes modules/user/user.css and modules/user/user-rtl.css.
• Simplifies CSS selectors and HTML in modules/system/system.css, modules/node/node.css, modules/node/node-rtl.css, and modules/node/node.admin.inc to gets rid of <dd class="a"> entirely and shorten <dd class="b"> to <dd>.

Things to test:

• Verify that the filtering works (/admin/people). Filter one or multiple fields (role, permission and status) at a time and test the Filter, Refine, Undo, and Reset functionality.
• Check in different browsers and themes (Stark, Garland, Seven).
• Verify that the layout of the node administration (/admin/content) is unchanged with the new CSS.
• Check that this plays nice with RTL and translation.

After you apply the patch you may need to clear caches by saving the Appearance admin form (/admin/appearance) and clearing your browser cache.

See #551034: Find Content filter accessibility for background on why this benefits usability and accessibility, and to see how we've simplified the HTML and CSS similarly.

tagging for usability review

Yes, this makes complete sense - after trying it this is RTBC.

@mgifford Thanks for the pointer on twitter.

@Bojhan: Thanks for the review!

This looks great. Committed to HEAD.

Do we need to now make some more adjustments to the content page filter? iirc we didn't remove those asinine "b" and "a" classes there like we have here, but we really should.

@webchick: I think we're all good. The "a" and "b" classes were removed from the Content admin HTML with #551034. And this patch for the User admin fixed the user HTML and removed the CSS classes.

I've pasted a sample of the content filter HTML below just for a sanity check in case anyone has suggestions for further clean-up here.

Thanks for all the work and support of this!

<fieldset id="edit-filters"><legend><span>Show only items where</span></legend>
<ul class="clearfix">
<li><strong><em>status</em></strong> is <strong><em>published</em></strong></li>
</ul>
<dl class="multiselect">
<dt><em>and</em> where</dt>
<dd><div class="form-item form-type-select form-item-status">
 <label for="edit-status-2">status </label>
 <select name="status" class="form-select" id="edit-status-2" >
 <option value="[any]" selected="selected">any</option>
 <option value="status-1">published</option>
 <option value="status-0">not published</option>
 <option value="promote-1">promoted</option>
 <option value="promote-0">not promoted</option>
 <option value="sticky-1">sticky</option>
 <option value="sticky-0">not sticky</option>
</select></div>
<div class="form-item form-type-select form-item-type">
 <label for="edit-type">type </label>
 <select name="type" class="form-select" id="edit-type" >
 <option value="[any]" selected="selected">any</option>
 <option value="article">Article</option>
 <option value="page">Page</option>
</select></div>
</dd></dl>
<div class="container-inline" id="node-admin-buttons">
<input type="submit" name="op" id="edit-submit" value="Refine"  class="form-submit" />
<input type="submit" name="op" id="edit-undo" value="Undo"  class="form-submit" />
<input type="submit" name="op" id="edit-reset" value="Reset"  class="form-submit" />
</div></fieldset>

Ah, great. Thanks for checking. :)

Ahah! I found some unused code we can remove. The attached clean-up patch removes multiselect JS. It was only used in node admin and user admin with the radio buttons that are gone now.

This is the code we can remove from misc/form.js:

Drupal.behaviors.multiselectSelector = {
  attach: function (context, settings) {
    // Automatically selects the right radio button in a multiselect control.
    $('.multiselect select', context).once('multiselect').change(function () {
        $('.multiselect input:radio[value="' + this.id.substr(5) + '"]')
          .attr('checked', true);
    });
  }
};

Yay for less code. :) Committed to HEAD.

Hi,

Im using drupal 7. In my case, I need to filter the contents by content type fields in admin>content.

Any idea about this. Is there any contributed module for this.
Plz guide me. Its very urgent.

Hi @drupalvino, Actually this is a closed issue because we made significant improvements to accessibility (and usability) of the User filter as part of Drupal 7.

If you are still having any problems with the User filter on /admin/people in Drupal 7, please report that as a new issue. If you already know how to file a new issue, you can use the issue queue to do that. If you have broader questions or want help in figuring what is wrong and how to solve it, feel free to post to the Accessibility group page: http://groups.drupal.org/accessibility .

-Brandon @bowersox