The Bulleted List feature allows the user to create unordered enumeration.

UI / UX

  • UI: ON/OFF feature, usually represented as a switch button with the “Bulleted List” icon
  • Title: “Unordered List” or “Bulleted List”
  • Keystroke: –
  • Additional keyboard behavior:
    • Backspace inside an empty list item or at the beginning of a non-empty list item SHOULD join the current list item with the previous list item, if that item exists, otherwise transform current list item into the default block context.
    • Delete inside an empty list item or at the end of a non-empty list item SHOULD join the next block context of any type with the current list item.
    • Backspace or Delete inside an empty list item, that is the only list item in the list, SHOULD replace the whole list with the default block context.
    • Tab at the beginning of a non-empty list item or inside an empty list item SHOULD indent the current list item, if the list item is allowed to be indented.
    • Shift+Tab inside an indented list item SHOULD outdent the current list item.
    • Enter inside a non-empty list item SHOULD split the current list item into two, depending on the position of caret.
    • Enter inside an empty, indented list item SHOULD outdent the current list item.
    • Enter inside an empty, non-indented list item SHOULD create a new default block context, following the list. If there are list items following the current list item, the list SHOULD be split into two lists, separated by the newly created default block context.

HTML Markup

The <ul> element MUST be used to represent the container for the Bulleted List feature as it is intended to create unorderded lists[1].

The <li> element MUST be used to represent individual elements inside the feature’s container as it is intended to mark up all list items[2].

Example:

<p>I must buy:</p>
<ul>
	<li>Eggs</li>
	<li>Milk</li>
	<li>Chocolate</li>
</ul>

Implementation Concerns

  • Tab key is generally used to steer focus from and into the editor and overwriting its behavior could be misleading. Therefore the following key bindings MAY be used instead of the Tab key[3]:
    • Ctrl+M for indenting,
    • Ctrl+Shift+M for outdenting.

Notes

Although this feature should be called “Unordered List”, for historical reasons users are used to the “Bulleted List” name. Therefore, for consistency and due to better recognition, this feature SHOULD generally be referred to as Bulleted List.

References

  1. The <ul> element definition in the HTML5 standard.
  2. The <li> element definition in the HTML5 standard.
  3. The description of Rich Text Editor use case in WAI-ARIA 1.0 Authoring Practices.