docs(SelectPanel): update docs with keyboard interactions (#2335)

* docs(SelectPanel): update docs with keyboard interactions * Update docs/content/SelectPanel.mdx Co-authored-by: Cole Bemis <[email protected]> * Update docs/content/SelectPanel.mdx Co-authored-by: Cole Bemis <[email protected]> * Update docs/content/SelectPanel.mdx Co-authored-by: Cole Bemis <[email protected]> * Update docs/content/SelectPanel.mdx Co-authored-by: Cole Bemis <[email protected]> * Update docs/content/SelectPanel.mdx Co-authored-by: Cole Bemis <[email protected]> * docs: add selected and onSelectedChanges to docs * chore: update SelectPanel docs Co-authored-by: Cole Bemis <[email protected]>
primer · Oct 10, 2022 · fa6ac62 · fa6ac62
1 parent 9c0c107
commit fa6ac62
Showing 1 changed file with 82 additions and 1 deletion.
diff --git a/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx
@@ -65,4 +65,85 @@ function DemoComponent() {
 render(<DemoComponent />)
 ```
 
-## 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
+
+<!-- TODO: add remaining props -->
+
+<PropsTable>
+  <PropsTableRow
+    name="onOpenChange"
+    type={`(
+  open: boolean,
+  gesture:
+    | 'anchor-click'
+    | 'anchor-key-press'
+    | 'click-outside'
+    | 'escape'
+    | 'selection'
+) => void`}
+    required
+  />
+  <PropsTableRow name="placeholder" type="string" />
+  <PropsTableRow
+    name="overlayProps"
+    type="Partial<OverlayProps>"
+    description={
+      <>
+        See <a href="/react/Overlay#props">Overlay props</a>.
+      </>
+    }
+  />
+  <PropsTableRow name="title" type="string" />
+  <PropsTableRow name="inputLabel" type="string" />
+  <PropsTableRow name="inputPlaceholder" type="string" />
+
+    <PropsTableRow
+      name="selected"
+      type="ItemInput | ItemInput[] | undefined"
+      description="Specify the selected item(s)"
+    />
+    <PropsTableRow
+      name="onSelectedChange"
+      type="(selected: ItemInput | ItemInput[]) => void"
+      description="Provide a callback called when the selected item(s) change"
+    />
+
+</PropsTable>
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: false,
+    noUnnecessaryDeps: true,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: false,
+    usedInProduction: true,
+    usageExamplesDocumented: false,
+    hasStorybookStories: false,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>