diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx index a044fc2af21..2035c9d3c62 100644 --- a/docs/content/SelectPanel.mdx +++ b/docs/content/SelectPanel.mdx @@ -65,4 +65,85 @@ function DemoComponent() { render() ``` -## Component props +## Accessibility + +### Keyboard + +Pressing `Enter` or `Space` on the `SelectPanel` anchor will +open the `SelectPanel` and place focus on the filter input. Pressing `Escape` or interacting with the cancel or close buttons will close the `SelectPanel` and restore focus to the anchor. + +A user may use `Tab` and `Shift+Tab` to navigate between the filter input, list of +items, action buttons, and the close button. + +When focus is on the list of items, pressing `ArrowDown` and `ArrowUp` will allow navigation between items. Support for `Home` and `End` is also provided to quickly navigate to the first and last items in the list, respectively. Pressing `Space` will select an item. + +The `Enter` key may be used when focus is within the `SelectPanel` as an +alternative to activating the save button. + +## Props + +### SelectPanel + + + + + void`} + required + /> + + + See Overlay props. + + } + /> + + + + + + + + + +## Status + +