Include after_version if the docs shouldn't be published to the website until reaching a specific package version.

useList

Provides the behavior and accessibility implementation for a list component. A list displays data in a single columns and enables a user to navigate its contents via directional navigation keys.

Be sure to update the W3C url below if applicable to your hook, otherwise omit the sourceData prop.

API#

Include an additional FunctionAPI if multiple hooks are being documented in a single file. See useTabList.mdx for an example.

Features#

Describe what the aria hook helps with/provides.

Anatomy/Usage#

For hooks that are meant to be used with specific elements/components, include an Anatomy section detailing the props the hook returns. See useColorField.mdx for an example. If applicable, the anatomy diagram should be added as a local svg file, sourced from the Spectrum XD file (ask Devon for the file if you are unsure). Follow these steps after you obtain the XD file: 1. Open the XD file and find the anatomy diagram. Select it by double clicking its artboard. 2. Export it as an SVG via File -> Export -> Selected... 3a. Manually remove any extraneous Spectrum-only elements and labels from the SVG. 3b. Replace the colors in the SVG with their spectrum color variable equivalents. See docs.css .provider for a mapping of these colors. *3c. Add a title and desc to the SVG summarizing the contents of the diagram. See any of existing anatomy.svg for an example. *

For hooks that are meant for more general use, include a Usage section instead detailing the props/params the hook accepts and returns. See useKeyboard.mdx for an example.

Example#

Add an example of the hook (being used with native elements, etc) If you create an example component that will be reused else where in this doc, include export=true so that you can directly reuse the component and avoid copy pasting the same code. See useComboBox.mdx for an example.

Usage#

*For hooks that are meant to be used with specific elements/components, include this usage section detailing examples of how to use the hook. * *This should roughly mirror the examples that the corresponding React Spectrum component docs have (e.g. Controlled/Uncontrolled, Disabled, change handlers, etc). *

Internationalization#

*Mention if RTL *