From fa6ac62ce0ed515f4c0e0204fd3317500d60bc20 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Mon, 10 Oct 2022 12:05:41 -0500
Subject: [PATCH] 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 <colebemis@github.com>

* Update docs/content/SelectPanel.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* Update docs/content/SelectPanel.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* Update docs/content/SelectPanel.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* Update docs/content/SelectPanel.mdx

Co-authored-by: Cole Bemis <colebemis@github.com>

* docs: add selected and onSelectedChanges to docs

* chore: update SelectPanel docs

Co-authored-by: Cole Bemis <colebemis@github.com>
---
 docs/content/SelectPanel.mdx | 83 +++++++++++++++++++++++++++++++++++-
 1 file changed, 82 insertions(+), 1 deletion(-)

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(<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
+  }}
+/>