Skip to content

Commit 0114c97

Browse files
authored
Update Table, GridList, and ListBox anatomy diagrams (#5041)
1 parent 932854e commit 0114c97

File tree

6 files changed

+415
-75
lines changed

6 files changed

+415
-75
lines changed

packages/react-aria-components/docs/GridList.mdx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import sharedDocs from 'docs:@react-types/shared';
1515
import {PropTable, HeaderInfo, TypeLink, PageDescription, StateTable, ContextTable} from '@react-spectrum/docs';
1616
import styles from '@react-spectrum/docs/src/docs.css';
1717
import packageData from 'react-aria-components/package.json';
18-
import Anatomy from '@react-aria/gridlist/docs/anatomy.svg';
18+
import Anatomy from './GridListAnatomy.svg';
1919
import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
2020
import {Divider} from '@react-spectrum/divider';
2121
import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard';
@@ -317,14 +317,15 @@ HTML lists are meant for static content, rather than lists with rich interaction
317317
* **Actions** – Items support optional row actions such as navigation via click, tap, double click, or <Keyboard>Enter</Keyboard> key.
318318
* **Async loading** – Support for loading items asynchronously.
319319
* **Keyboard navigation** – List items and focusable children can be navigated using the arrow keys, along with page up/down, home/end, etc. Typeahead, auto scrolling, and selection modifier keys are supported as well.
320+
* **Drag and drop** – GridList supports drag and drop to reorder, insert, or update items via mouse, touch, keyboard, and screen reader interactions.
320321
* **Touch friendly** – Selection and actions adapt their behavior depending on the device. For example, selection is activated via long press on touch when item actions are present.
321322
* **Accessible** – Follows the [ARIA grid pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/), with additional selection announcements via an ARIA live region. Extensively tested across many devices and [assistive technologies](accessibility.html#testing) to ensure announcements and behaviors are consistent.
322323

323324
**Note**: Use `GridList` when your list items may contain interactive elements such as buttons, checkboxes, menus, etc. within them. If your list items contain only static content such as text and images, then consider using [ListBox](ListBox.html) instead for a slightly better screen reader experience (especially on mobile).
324325

325326
## Anatomy
326327

327-
<Anatomy role="img" aria-label="Anatomy diagram of a list container, consisting of multiple list items. Each list item contains a selection checkbox, a list item row, and a list item cell." />
328+
<Anatomy role="img" aria-label="Anatomy diagram of a list container, consisting of multiple list items. Each list item contains a drag button, a selection checkbox, an icon, a title, and a description." />
328329

329330
A grid list consists of a container element, with rows of data inside. The rows within a list may contain focusable elements or plain text content.
330331
If the list supports row selection, each row can optionally include a selection checkbox.

0 commit comments

Comments
 (0)