diff --git a/src/_components/list.md b/src/_components/list.md index c6c473d16..24a7219e0 100644 --- a/src/_components/list.md +++ b/src/_components/list.md @@ -37,11 +37,6 @@ anchors: ### Additional guidance for VA -### How this component works - -* **Use square list-item-type for unordered lists.** The square list item type is preferred. -* **Two or more items.** Lists with 2 or more items are acceptable. - ### Choosing between variations * **Use unordered lists when the order of the items is not relevant.** List items in unordered lists can be in any order and are indicated with a black square. @@ -54,9 +49,7 @@ anchors: {% include component-example.html alt="List in an accordion." file="/images/components/list/unordered-list-in-accordion.png" caption="An example of an unordered list in an Accordion component." class="x2" %} -{% include component-example.html alt="List in a Summary box." file="/images/components/list/unordered-list-in-summary-box.png" caption="An example of an unordered list in a Summary box component." class="x2" %} - -{% include component-example.html alt="List with two connected items." file="/images/components/list/unordered-list-with-and.png" caption="An example of an unordered list where items are concatenated using and." class="x2" %} +{% include component-example.html alt="List with two connected items." file="/images/components/list/unordered-list-with-and.png" caption="An example of an unordered list in a Summary box where items are concatenated using and." class="x2" %} {% include component-example.html alt="List of appointments in VA.gov." file="/images/components/list/appointments-list.png" caption="An example of an inline list of appointments where each list item is a row containing appointment details." class="x2" %} @@ -73,10 +66,9 @@ anchors: ## Accessibility considerations * **Unique headings and link text.** For complex list items that are comprised of more than one line of content (e.g. header, description, link, etc.) ensure that any headings and link text within the list are unique. -* **Under review: Unordered list items will read out as "black square".** We're reviewing whether this potentially unexpected behavior is problematic for users of screen readers and may adjust the list item style type appropriately in future. ## Related * [Card]({{ site.baseurl }}/components/card) -{% include _component-checklist.html component_name=page.github-title %} \ No newline at end of file +{% include _component-checklist.html component_name=page.github-title %} diff --git a/src/_includes/content/unordered-list.md b/src/_includes/content/unordered-list.md index 623eebf87..67a0abb47 100644 --- a/src/_includes/content/unordered-list.md +++ b/src/_includes/content/unordered-list.md @@ -1,5 +1,4 @@ * **Introduce the list.** Introduce the list with a full sentence. -* **Capitalize the first word.** Use sentence case and begin lists with a capital letter. * **No single item lists.** Don't use an ordered or unordered (bulleted) list for only one item. * **Item content must be succinct.** Keep each item succinct for scannability (for example, 1 or 2 sentences each). * **Connect items appropriately.** When using "and" or "or" at the end of each bullet point, use a comma and bold the "and"/"or" at the end of each bullet point. diff --git a/src/images/components/list/unordered-list-in-accordion.png b/src/images/components/list/unordered-list-in-accordion.png index 996e7d106..f09d4ce55 100644 Binary files a/src/images/components/list/unordered-list-in-accordion.png and b/src/images/components/list/unordered-list-in-accordion.png differ diff --git a/src/images/components/list/unordered-list-with-and.png b/src/images/components/list/unordered-list-with-and.png index bf4b29494..c67e0636d 100644 Binary files a/src/images/components/list/unordered-list-with-and.png and b/src/images/components/list/unordered-list-with-and.png differ diff --git a/src/images/components/list/unordered-list.png b/src/images/components/list/unordered-list.png index 83a8f7605..496ba40da 100644 Binary files a/src/images/components/list/unordered-list.png and b/src/images/components/list/unordered-list.png differ