Sorting

More Sorts

Trying to click on the More Sorts link will trigger errors on the page. Please see the example page instead.

Classes

• lotusSort - the class that goes on the wrapper div of the component.
• lotusInlinelist - the sort options are created using the lotusInlinelist general class.
• lotusFirst - goes on the first item in the list.
• lotusMoreSorts - goes on the last link in the list, which says "more sorts"
• lotusActiveSort - this class goes on whatever sort link is the current sort
• lotusAscending - this is an additional class on the current sort, if it is sorted ascending
• lotusDescending - this is an additional class on the current sort, if it is sorted descending.

Basic Implementation

Create a wrapper div with the class lotusSort

Add a span with the text "Sort by:."

Use an inline list for the sort links

Use the lotusActiveSort and lotusAscending or lotusDescending classes for the current sort option.

See the example pages for a demonstration of the sort behavior (only shows the behavior of the sort control, doesn't actually sort the data).

Variations

If you have a lot of sort terms, list one of them and put the rest under the more sorts link, in an action menu.

Accessibility

The sort controls are marked up as an ARIA Tool Bar.

The toolbar role is assigned to the ul tag along with aria-label="sort". Put role="presentation" on the li tags.

Each sort option (link) is assigned role="button".

The active sort link is assigned aria-pressed="true", the non-active links are assigned aria-pressed="false." The active sort is also assigned aria-sort="ascending|descending". The aria-sort attribute is only on the active sort, not on any other sort links. Both of these properties should be updated as the sort changes (not done in our example code).

The active sort link should have an aria-label of either "Sorted by [option], ascending. Click to sort in descending order" or "Sorted by [option], descending. Click to sort in ascending order," which should be updated as the sort changes. The title tag can use the same text or shorten the first sentence to "Ascending." or "Descending." since the visual user can see the link text. (When an aria-label exists, it is read instead of - not in addition to - the link text, so we need to add the option to the label.)

The non-active sorts should have an aria-label (and matching title) of "click to sort by [option]," where option is the text of the link.

For the more sorts link, use the following attributes: role="button" aria-haspopup="true" aria-owns="moreSorts" (where moreSorts is the id of the menu that pops up) aria-label="Click for sort menu" title="Click for sort menu".

When the direction of the sort changes, in addition to changing the classes used to display the proper sort direction icon, change the innerHTML of the sort's lotusAltText so the correct symbol is displayed in high contrast and update the label/tooltip text.

Examples

• Sort as column headers
• Sort as an inline list
• More Sorts

Sample HTML

Sample HTML - Sort More

CSS (sort.css)

Theme CSS (sortTheme.css)

This component was created for the summary/details view of our data, which doesn't always contain multiple columns. It also supports sorting in a grid view where you can sort by data not displayed in the grid.

December 2010: moved the "sort by:" label out of the inline list and added ARIA attributes to support accessibility.

January 2011: added accessibility documentation.

February 22,2012: added aria-sort to the code and description to the accessibility section.

June 13, 2012: updated examples so it was easier to test in JAWS by providing unique option names.

August 2, 2012: Updated color contrast of the sort direction indicator and the more sorts drop down arrow (changes to the sprite).