Filters

Filters are a list of items selected by the user that can be removed by clicking on them. They are found under headers and in member dialogs, for example.

Filters

Classes

  • lotusFilters2 - the class assigned to the component div
  • lotusInlinelist - to structure the filters
  • lotusFilter - the class assigned to a filter link
  • lotusDelete - the class assigned to the delete image
  • lotusAltText - the class assigned to a span tag with an "X" inside it, for high contrast mode.
  • lotusDivider - the class assigned to a span tag that can be used as a separator

Basic Implementation

Create div and assign it the class of lotusFilters2. Using an inline list as a container, create as many filters as you'd like using link tags. You can intersperse plain text with multiple sets of filters. Each set of filters should be it's own inline list (see Header with Filters for an example of this). Note that when creating an inline list, you should remove all white space from the code to keep Firefox from rendering the white space.

Inside the link, after the link text, put an img tag with the class lotusDelete and the source blank.gif. Do not leave a space in between the text and the link, the css takes care of the spacing.

IMPORTANT NOTE: In IE6 and 7, our CSS to insert \u200F when in RTL mode won't work. If the resulting behavior isn't acceptable for your product in IE6 and IE7, you can use code to insert ‏ before the img. If you are doing this using javascript, use \u200F.

Accessiblity

Wrap the filters in an inline list so screen readers will read the number of items in the list.

Give each filter (link) a role of button.

Put <span class="lotusAltText">X</span> after the image tag, for the X to show up in high contrast mode.

Tested in JAWS 13

Examples

Sample HTML

CSS (filters.css)

Theme CSS (filtersTheme.css)

March 2010: Filters used to be part of the header component, but they have started to be used in other areas. So we have made them a unique component.

January 2011: Added accessibility documentation.

January 2012: Updated accessiblity to remove list roles. Having listitem on a link makes it not function as a link anymore. Added an inline list wrapper for the desired list functionality. Added button role on the links.

March 7, 2012: updated border colors to better match the darker delete icon needed for accessiblity.

See Also: