Lists

These are simple lists whose only available action is to delete items (but that option is not always available). They are typically found in the left or right columns.

Editable List (items can be deleted)

Inline List

Classes

  • lotusList - class assigned to the ul tag of the list
  • lotusEditable - additional class assigned to the ul tag of the list when you want a delete icon available for list items.
  • lotusInlinelist - class assigned to the ul tag of the list (in place of lotusList) when you want the list items to appear inline.
  • lotusSelected - class assigned to the li tag of a list item you want to appear selected.
  • lotusDelete - class assigned to the link tag that surrounds the delete icon
  • lotusLeft - necessary for proper alignment of list text.
  • lotusFirst - when placed on an li element in an inline list, it keeps the divider between list items from showing. Typically needed for the first list item, but can be used on additional list items.

Basic Implementation

Create the list using an unordered html list. Assign the class lotusList to the ul tag.

Create list items inside li tags. List items are aligned right by default because most of them require numbers or icons along the right-hand side. So any normal text needs to be wrapped in a link or a span with a lotusLeft class assigned to it. (Doing it this way keeps things in proper order for screen readers.)

Variation - Editable List

For an editable list, which contains delete icons, assign the addtional lotusEditable class to the ul tag.

Create the delete icons using inline images, and wrap them in a link tag assigned the class lotusDelete.

Variation - Inline List

For an inline list, assign the lotusInlinelist class to the ul tag (in place of lotusList). Inline lists items are aligned left by default.

To avoid a whitespace bug in Firefox, code your list without any formatting in the html (no added spaces or line feeds between items).

Each list item has a divider created using the left border. If you don't want this to show up to the left of an item, assign the lotusFirst class to the li element. You will need to do this for the first list item. It is optional for other list items.

The inline list is a basic pattern and the CSS is defined in our base.css file. The sample code shown on this page is wrapped in a lotusMeta div, to show a typical use case for inline lists in the UI.

Accessibility

For a list with meta content (or a delete icon) to read in proper order for a screen reader, the text needs to come before the meta content/icon. Since the additional content is aligned along the right edge of the list, we align the content to the right by default and float the text left by assigning the class lotusLeft to the text's wrapping container (a link or a span).

The way to make a grouping of separated inline items accessible is to use an inline list. This way the screen reader user knows how many items to expect and is able to keep track of what item they are on in the list. The inline list has built-in separators for the visual user via a CSS border, which avoids distracting the screen reader user with an extra pipe character.

To make a non-html list be read as a list by the screen reader, put role="list" on span wrapping the list items. Put role="listitem" on each item in the list. If the list items are links, wrap them in a span and assign the listitem to the span or the links lose their link functionality.

Examples

Sample HTML

Sample HTML - Editable List

Sample HTML - Inline List

CSS (lists.css)

Theme CSS (listsTheme.css)

You will have to look at the base.css file (or the top sections of core.css and defaultTheme.css) to see the CSS for inline lists.

The code for lists has been the same since the component (and its editable variation) was created.

1/17/11: added an inline list example to the component, with accessibility details.

January 19, 2012 - Made the tags lists into ARIA lists.