Improve a11y attributes and support for id props in dropdown componen…

…ts (#2257)

## Summary:
- ActionMenu: Adds new optional props: `id` and `dropdownId`. If not provided, they are auto-generated. Ids are applied and the dropdownId is now used for the `aria-controls` attribute for the opener
- SingleSelect and MultiSelect: Adds optional `dropdownId` prop. If `id` or `dropdownId` props are not provided, ids for these will be auto-generated. The opener's `aria-controls` attribute is set to the dropdown id
- Make sure default and custom openers have all the correct attributes (`aria-haspopup`, `aria-expanded`). This addresses warnings in the Storybook a11y add on

Issue: WB-1714

## Test plan:
- Review documentation ActionMenu, SingleSelect, and MultiSelect
  - `id` and `dropdownId` props
  - Docs for `With Custom Opener` example
- Confirm in ActionMenu, SingleSelect, and MultiSelect:
  - When the `id` and `dropdownId` props are not set, there is an auto-generated id for each of these on the opener and the dropdown. The opener should also have `aria-controls` set to the dropdown id
  - When the `id` and `dropdownId` props are set, they should be the id on the opener and the dropdown elements. The opener should also have `aria-controls` set to the provided `dropdownId`
  - The opener should have the `aria-haspopup` and `aria-expanded` attributes set
  - All of the above should apply also when a custom opener is used

Author: beaesguerra

Reviewers: jandrade

Required Reviewers:

Approved By: jandrade

Checks: ✅ codecov/project, ✅ Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2257

.changeset/ninety-dogs-push.md

@@ -0,0 +1,17 @@
+---
+"@khanacademy/wonder-blocks-dropdown": minor
+---
+
+Improves support for providing ids to the opener and dropdown elements. These ids are auto-generated if they are not provided.
+
+Also applies attributes to elements automatically for improved accessibility (`aria-controls`, `aria-haspopup`, `aria-expanded`).
+
+- `ActionMenu`
+  - Adds new `dropdownId` and `id` props. If these are not provided, these ids will be generated automatically
+  - `aria-controls` is set to the dropdown id for both default and custom openers
+  - Ensure `aria-haspopup` and `aria-expanded` attributes are set on both default and custom openers
+- `SingleSelect` and `MultiSelect`
+  - Adds new `dropdownId` prop. If this is not provided, an id will be generated automatically
+  - If the `id` prop is not provided, an id for the component is now generated automatically
+  - `aria-controls` is set to the dropdown id for both default and custom openers
+  - Ensure `id`, `aria-haspopup` and `aria-expanded` attributes are set on both default and custom openers

__docs__/wonder-blocks-dropdown/action-menu.stories.tsx

@@ -358,6 +358,9 @@ export const Controlled: StoryComponentType = {
  *
  * **Note:** If you need to use a custom ID for testing the opener, make sure to
  * pass the testId prop inside the opener component/element.
+ *
+ * **Accessibility:** When a custom opener is used, the following attributes are
+ * added automatically: `aria-expanded`, `aria-haspopup`, and `aria-controls`.
  */
 
 export const CustomOpener: StoryComponentType = {
@@ -375,6 +378,7 @@ export const CustomOpener: StoryComponentType = {
                     hovered && styles.hovered,
                     pressed && styles.pressed,
                 ]}
+                role="button"
             >
                 {text}
             </LabelLarge>

__docs__/wonder-blocks-dropdown/base-select.argtypes.ts

@@ -117,8 +117,22 @@ const argTypes: ArgTypes = {
         control: {type: "text"},
         description: `Unique identifier attached to the field control. If used,
             we need to guarantee that the ID is unique within everything
-            rendered on a page. Used to match \`<label>\` with \`<button>\`
-            elements for screenreaders.`,
+            rendered on a page. If one is not provided, one is auto-generated.
+            Used to match \`<label>\` with \`<button>\` elements for
+            screenreaders.`,
+        table: {
+            type: {summary: "string"},
+        },
+        type: {name: "string", required: false},
+    },
+
+    dropdownId: {
+        control: {type: "text"},
+        description: `Unique identifier attached to the dropdown. If used,
+            we need to guarantee that the ID is unique within everything
+            rendered on a page. If one is not provided, one is auto-generated.
+            It is used for the opener's \`aria-controls\` attribute for
+            screenreaders.`,
         table: {
             type: {summary: "string"},
         },

__docs__/wonder-blocks-dropdown/multi-select.stories.tsx

@@ -502,6 +502,9 @@ export const VirtualizedFilterable: StoryComponentType = {
  *
  * **Note:** If you need to use a custom ID for testing the opener, make sure to
  * pass the testId prop inside the opener component/element.
+ *
+ * **Accessibility:** When a custom opener is used, the following attributes are
+ * added automatically: `aria-expanded`, `aria-haspopup`, and `aria-controls`.
  */
 export const CustomOpener: StoryComponentType = {
     render: Template,

__docs__/wonder-blocks-dropdown/single-select.stories.tsx

@@ -660,6 +660,9 @@ export const DropdownInModal: StoryComponentType = {
  *
  * **Note:** If you need to use a custom ID for testing the opener, make sure to
  * pass the testId prop inside the opener component/element.
+ *
+ * **Accessibility:** When a custom opener is used, the following attributes are
+ * added automatically: `aria-expanded`, `aria-haspopup`, and `aria-controls`.
  */
 export const CustomOpener: StoryComponentType = {
     render: Template,