@khanacademy/wonder-blocks-dropdown 8.0.1 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 9.0.0
+
+### Major Changes
+
+-   0199324d: Fixes keyboard tests in Dropdown and Clickable with specific key events. We now check `event.key` instead of `event.which` or `event.keyCode` to remove deprecated event properties and match the keys returned from Testing Library/userEvent.
+-   1a18e98a: 1. Updates dropdown openers for SingleSelect and MultiSelect to use `role="combobox"` instead of `button`. 2. SingleSelect and MultiSelect should have a paired `<label>` element or `aria-label` attribute for accessibility. They no longer fall back to text content for labeling, as those contents are now used as combobox values. 3. Changes the type names for custom label objects from `Labels` to `LabelsValues` and `SingleSelectLabels` to `SingleSelectLabelsValues`, respectively.
+
+### Patch Changes
+
+-   Updated dependencies [0199324d]
+    -   @khanacademy/wonder-blocks-clickable@6.0.0
+    -   @khanacademy/wonder-blocks-core@12.0.0
+    -   @khanacademy/wonder-blocks-cell@4.0.8
+    -   @khanacademy/wonder-blocks-pill@3.0.8
+    -   @khanacademy/wonder-blocks-icon@5.0.6
+    -   @khanacademy/wonder-blocks-layout@3.0.8
+    -   @khanacademy/wonder-blocks-modal@7.0.7
+    -   @khanacademy/wonder-blocks-search-field@5.0.3
+    -   @khanacademy/wonder-blocks-typography@3.0.6
+
+## 8.0.2
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-modal@7.0.6
+-   @khanacademy/wonder-blocks-search-field@5.0.2
+
 ## 8.0.1
 
 ### Patch Changes

package/dist/components/dropdown-core.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import type { DropdownItem } from "../util/types";
-type Labels = {
+type LabelsValues = {
     /**
      * Label for describing the dismiss icon on the search filter.
      */
@@ -116,7 +116,7 @@ type ExportProps = Readonly<{
     /**
      * The object containing the custom labels used inside this component.
      */
-    labels?: Labels;
+    labels?: LabelsValues;
     /**
      * Used to determine if we can automatically select an item using the keyboard.
      */

package/dist/components/dropdown-opener.d.ts

@@ -28,7 +28,7 @@ type Props = Partial<Omit<AriaProps, "aria-disabled">> & {
      */
     testId?: string;
     /**
-     * Text for the opener that can be passed to the child as an argument.
+     * Content for the opener that can be passed to the child as an argument.
      */
     text: OptionLabel;
     /**
@@ -43,6 +43,10 @@ type Props = Partial<Omit<AriaProps, "aria-disabled">> & {
      * If the dropdown has an error.
      */
     error?: boolean;
+    /**
+     * The role of the opener.
+     */
+    role: "combobox" | "button";
 };
 type DefaultProps = {
     disabled: Props["disabled"];

package/dist/components/multi-select.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type AriaProps, type StyleType } from "@khanacademy/wonder-blocks-core";
 import OptionItem from "./option-item";
 import type { OpenerProps } from "../util/types";
-export type Labels = {
+export type LabelsValues = {
     /**
      * Label for describing the dismiss icon on the search filter.
      */
@@ -12,7 +12,7 @@ export type Labels = {
      */
     filter: string;
     /**
-     * Label for when the filter returns no results.
+     * Value for when the filter returns no results.
      */
     noResults: string;
     /**
@@ -24,15 +24,15 @@ export type Labels = {
      */
     selectNoneLabel: string;
     /**
-     * Label for the opening component when there are no items selected.
+     * Value for the opening component when there are no items selected.
      */
     noneSelected: string;
     /**
-     * Label for the opening component when there are some items selected.
+     * Value for the opening component when there are some items selected.
      */
     someSelected: (numOptions: number) => string;
     /**
-     * Label for the opening component when all the items have been selected.
+     * Value for the opening component when all the items have been selected.
      */
     allSelected: string;
 };
@@ -60,8 +60,8 @@ type DefaultProps = Readonly<{
      */
     shortcuts?: boolean;
     /**
-     * When false, the SelectOpener can show a Node as a label. When true, the
-     * SelectOpener will use a string as a label. If using custom OptionItems, a
+     * When false, the SelectOpener can show a Node as a value. When true, the
+     * SelectOpener will use a string as a value. If using custom OptionItems, a
      * plain text label can be provided with the `labelAsText` prop.
      * Defaults to true.
      */
@@ -94,9 +94,9 @@ type Props = AriaProps & DefaultProps & Readonly<{
      */
     isFilterable?: boolean;
     /**
-     * The object containing the custom labels used inside this component.
+     * The object containing the custom labels and placeholder values used inside this component.
      */
-    labels?: Labels;
+    labels?: LabelsValues;
     /**
      * Callback for when the selection changes. Parameter is an updated array of
      * the values that are now selected.
@@ -177,6 +177,9 @@ type Props = AriaProps & DefaultProps & Readonly<{
  * multiple options to be selected. Clients are responsible for keeping track
  * of the selected items.
  *
+ * Clients are also responsible for labeling the select using `LabeledField`, or
+ * an `aria-label` attribute or `aria-labelledby` on the select.
+ *
  * The multi select stays open until closed by the user. The onChange callback
  * happens every time there is a change in the selection of the items.
  *
@@ -185,7 +188,7 @@ type Props = AriaProps & DefaultProps & Readonly<{
  * ```jsx
  * import {OptionItem, MultiSelect} from "@khanacademy/wonder-blocks-dropdown";
  *
- * <MultiSelect onChange={setSelectedValues} selectedValues={selectedValues}>
+ * <MultiSelect aria-label="Fruits" onChange={setSelectedValues} selectedValues={selectedValues}>
  *  <OptionItem value="pear">Pear</OptionItem>
  *  <OptionItem value="mango">Mango</OptionItem>
  * </MultiSelect>

package/dist/components/select-opener.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { AriaProps } from "@khanacademy/wonder-blocks-core";
+import { type AriaProps } from "@khanacademy/wonder-blocks-core";
 import { OptionLabel } from "../util/types";
 type SelectOpenerProps = AriaProps & {
     /**
@@ -25,6 +25,10 @@ type SelectOpenerProps = AriaProps & {
      * of this component. A placeholder has more faded text colors and styles.
      */
     isPlaceholder: boolean;
+    /**
+     * A label to expose on the opener, in the absence of an associated label element or `aria-labelledby`.
+     */
+    ariaLabel?: string;
     /**
      * Callback for when the SelectOpener is pressed.
      */

package/dist/components/single-select.d.ts

@@ -2,9 +2,9 @@ import * as React from "react";
 import { type AriaProps, type StyleType } from "@khanacademy/wonder-blocks-core";
 import OptionItem from "./option-item";
 import type { OpenerProps } from "../util/types";
-export type SingleSelectLabels = {
+export type SingleSelectLabelsValues = {
     /**
-     * Label for describing the dismiss icon on the search filter.
+     * Label to create an accessible name for the dismiss icon on the search filter.
      */
     clearSearch: string;
     /**
@@ -12,11 +12,11 @@ export type SingleSelectLabels = {
      */
     filter: string;
     /**
-     * Label for when the filter returns no results.
+     * Value for when the filter returns no results.
      */
     noResults: string;
     /**
-     * Label for the opening component when there are some items selected.
+     * Value for the opening component when there are some items selected.
      */
     someResults: (numOptions: number) => string;
 };
@@ -54,12 +54,12 @@ type DefaultProps = Readonly<{
      */
     error?: boolean;
     /**
-     * The object containing the custom labels used inside this component.
+     * The object containing the custom labels and placeholder values used inside this component.
      */
-    labels?: SingleSelectLabels;
+    labels?: SingleSelectLabelsValues;
     /**
-     * When false, the SelectOpener can show a Node as a label. When true, the
-     * SelectOpener will use a string as a label. If using custom OptionItems, a
+     * When false, the SelectOpener can show a Node as a value. When true, the
+     * SelectOpener will use a string as a value. If using custom OptionItems, a
      * plain text label can be provided with the `labelAsText` prop.
      * Defaults to true.
      */
@@ -91,7 +91,8 @@ type Props = AriaProps & DefaultProps & Readonly<{
      */
     id?: string;
     /**
-     * Placeholder for the opening component when there are no items selected.
+     * Placeholder value for the opening component when there are no items selected.
+     * Note: a label is still necessary to describe the purpose of the select.
      */
     placeholder: string;
     /**
@@ -172,6 +173,9 @@ type Props = AriaProps & DefaultProps & Readonly<{
  * The single select allows the selection of one item. Clients are responsible
  * for keeping track of the selected item in the select.
  *
+ * Clients are also responsible for labeling the select using `LabeledField`, an
+ * `aria-label` attribute, or `aria-labelledby`.
+ *
  * The single select dropdown closes after the selection of an item. If the same
  * item is selected, there is no callback.
  *
@@ -188,7 +192,7 @@ type Props = AriaProps & DefaultProps & Readonly<{
  *
  * const [selectedValue, setSelectedValue] = React.useState("");
  *
- * <SingleSelect placeholder="Choose a fruit" onChange={setSelectedValue} selectedValue={selectedValue}>
+ * <SingleSelect aria-label="Your Favorite Fruits" placeholder="Choose a fruit" onChange={setSelectedValue} selectedValue={selectedValue}>
  *     <OptionItem label="Pear" value="pear" />
  *     <OptionItem label="Mango" value="mango" />
  * </SingleSelect>
@@ -203,6 +207,7 @@ type Props = AriaProps & DefaultProps & Readonly<{
  * const fruitArray = ["Apple", "Banana", "Orange", "Mango", "Pear"];
  *
  * <SingleSelect
+ *     aria-label="Your Favorite Fruits"
  *     placeholder="Choose a fruit"
  *     onChange={setSelectedValue}
  *     selectedValue={selectedValue}

package/dist/es/index.js

@@ -6,7 +6,7 @@ import { CompactCell, DetailCell } from '@khanacademy/wonder-blocks-cell';
 import { spacing, color, mix, fade, semanticColor, border, font } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
-import { View, addStyle, Id, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
+import { View, addStyle, keys, Id, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
@@ -25,13 +25,6 @@ import { TextField } from '@khanacademy/wonder-blocks-form';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import Pill from '@khanacademy/wonder-blocks-pill';
 
-const keys = {
-  escape: "Escape",
-  tab: "Tab",
-  space: " ",
-  up: "ArrowUp",
-  down: "ArrowDown"
-};
 const selectDropdownStyle = {
   marginTop: spacing.xSmall_8,
   marginBottom: spacing.xSmall_8
@@ -487,6 +480,7 @@ class DropdownOpener extends React.Component {
     };
   }
   renderAnchorChildren(eventState, clickableChildrenProps) {
+    var _childrenProps$ariaL;
     const {
       disabled,
       testId,
@@ -496,6 +490,7 @@ class DropdownOpener extends React.Component {
       "aria-haspopup": ariaHasPopUp,
       "aria-required": ariaRequired,
       id,
+      role,
       onBlur
     } = this.props;
     const renderedChildren = this.props.children(_extends({}, eventState, {
@@ -504,10 +499,13 @@ class DropdownOpener extends React.Component {
     }));
     const childrenProps = renderedChildren.props;
     const childrenTestId = this.getTestIdFromProps(childrenProps);
+    const renderedAriaLabel = (_childrenProps$ariaL = childrenProps["aria-label"]) != null ? _childrenProps$ariaL : this.props["aria-label"];
     return React.cloneElement(renderedChildren, _extends({}, clickableChildrenProps, {
+      "aria-label": renderedAriaLabel != null ? renderedAriaLabel : undefined,
       "aria-invalid": this.props.error,
       disabled,
       "aria-controls": ariaControls,
+      role,
       id,
       "aria-expanded": opened ? "true" : "false",
       "aria-haspopup": ariaHasPopUp,
@@ -1618,7 +1616,8 @@ class ActionMenu extends React.Component {
       text: menuText,
       ref: this.handleOpenerRef,
       testId: opener ? undefined : testId,
-      opened: this.state.opened
+      opened: this.state.opened,
+      role: "button"
     }, opener ? opener : openerProps => {
       const {
           opened
@@ -1676,7 +1675,7 @@ const styles$5 = StyleSheet.create({
   }
 });
 
-const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "open", "testId", "aria-required", "onBlur", "onOpenChanged"];
+const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "open", "testId", "aria-label", "aria-required", "onBlur", "onOpenChanged"];
 const StyledButton = addStyle("button");
 class SelectOpener extends React.Component {
   constructor(props) {
@@ -1688,8 +1687,8 @@ class SelectOpener extends React.Component {
       this.props.onOpenChanged(!open);
     };
     this.handleKeyDown = e => {
-      const keyCode = e.key;
-      if (keyCode === "Enter" || keyCode === " ") {
+      const keyName = e.key;
+      if (keyName === keys.enter || keyName === keys.space) {
         this.setState({
           pressed: true
         });
@@ -1697,8 +1696,8 @@ class SelectOpener extends React.Component {
       }
     };
     this.handleKeyUp = e => {
-      const keyCode = e.key;
-      if (keyCode === "Enter" || keyCode === " ") {
+      const keyName = e.key;
+      if (keyName === keys.enter || keyName === keys.space) {
         this.setState({
           pressed: false
         });
@@ -1719,6 +1718,7 @@ class SelectOpener extends React.Component {
         isPlaceholder,
         open,
         testId,
+        "aria-label": ariaLabel,
         "aria-required": ariaRequired,
         onBlur
       } = _this$props,
@@ -1730,19 +1730,22 @@ class SelectOpener extends React.Component {
       "aria-disabled": disabled,
       "aria-expanded": open ? "true" : "false",
       "aria-invalid": error,
+      "aria-label": ariaLabel != null ? ariaLabel : undefined,
       "aria-required": ariaRequired,
       "aria-haspopup": "listbox",
       "data-testid": testId,
       id: id,
+      role: "combobox",
       style: style,
-      type: "button",
       onClick: !disabled ? this.handleClick : undefined,
       onKeyDown: !disabled ? this.handleKeyDown : undefined,
       onKeyUp: !disabled ? this.handleKeyUp : undefined,
       onBlur: onBlur
     }), React.createElement(LabelMedium, {
       style: styles$4.text
-    }, children || "\u00A0"), React.createElement(PhosphorIcon, {
+    }, children || React.createElement("span", {
+      "aria-hidden": "true"
+    }, "\xA0")), React.createElement(PhosphorIcon, {
       icon: caretDownIcon,
       color: iconColor,
       size: "small",
@@ -1927,7 +1930,7 @@ function useSelectValidation({
   };
 }
 
-const _excluded$1 = ["children", "error", "id", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required", "disabled", "dropdownId", "validate", "onValidate", "required", "showOpenerLabelAsText"];
+const _excluded$1 = ["children", "error", "id", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-label", "aria-invalid", "aria-required", "disabled", "dropdownId", "validate", "onValidate", "required", "showOpenerLabelAsText"];
 const SingleSelect = props => {
   const selectedIndex = React.useRef(0);
   const {
@@ -1954,6 +1957,7 @@ const SingleSelect = props => {
       opened,
       style,
       className,
+      "aria-label": ariaLabel,
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
       disabled = false,
@@ -2065,16 +2069,19 @@ const SingleSelect = props => {
     }, uniqueOpenerId => {
       return opener ? React.createElement(DropdownOpener, {
         id: uniqueOpenerId,
+        "aria-label": ariaLabel,
         "aria-controls": dropdownId,
         "aria-haspopup": "listbox",
         onClick: handleClick,
         disabled: isDisabled,
         ref: handleOpenerRef,
+        role: "combobox",
         text: menuText,
         opened: open,
         error: hasError,
         onBlur: onOpenerBlurValidation
       }, opener) : React.createElement(SelectOpener, _extends({}, sharedProps, {
+        "aria-label": ariaLabel,
         "aria-controls": dropdownId,
         disabled: isDisabled,
         id: uniqueOpenerId,
@@ -2121,7 +2128,7 @@ const SingleSelect = props => {
   }));
 };
 
-const _excluded = ["id", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required", "disabled", "error", "children", "dropdownId", "showOpenerLabelAsText", "validate", "onValidate", "required"];
+const _excluded = ["id", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-label", "aria-invalid", "aria-required", "disabled", "error", "children", "dropdownId", "showOpenerLabelAsText", "validate", "onValidate", "required"];
 const MultiSelect = props => {
   const {
       id,
@@ -2139,6 +2146,7 @@ const MultiSelect = props => {
       shortcuts = false,
       style,
       className,
+      "aria-label": ariaLabel,
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
       disabled = false,
@@ -2213,7 +2221,7 @@ const MultiSelect = props => {
     onChange([]);
     onSelectedValuesChangeValidation();
   };
-  const getMenuText = children => {
+  const getMenuTextOrNode = children => {
     const {
       noneSelected,
       someSelected,
@@ -2339,33 +2347,36 @@ const MultiSelect = props => {
     const {
       noneSelected
     } = labels;
-    const menuText = getMenuText(allChildren);
+    const menuContent = getMenuTextOrNode(allChildren);
     const dropdownOpener = React.createElement(Id, {
       id: id
     }, uniqueOpenerId => {
       return opener ? React.createElement(DropdownOpener, {
         id: uniqueOpenerId,
         error: hasError,
+        "aria-label": ariaLabel,
         "aria-controls": dropdownId,
         "aria-haspopup": "listbox",
         onClick: handleClick,
         onBlur: onOpenerBlurValidation,
         disabled: isDisabled,
         ref: handleOpenerRef,
-        text: menuText,
+        role: "combobox",
+        text: menuContent,
         opened: open
       }, opener) : React.createElement(SelectOpener, _extends({}, sharedProps, {
         error: hasError,
         disabled: isDisabled,
         id: uniqueOpenerId,
+        "aria-label": ariaLabel,
         "aria-controls": dropdownId,
-        isPlaceholder: menuText === noneSelected,
+        isPlaceholder: menuContent === noneSelected,
         onOpenChanged: handleOpenChanged,
         onBlur: onOpenerBlurValidation,
         open: open,
         ref: handleOpenerRef,
         testId: testId
-      }), menuText);
+      }), menuContent);
     });
     return dropdownOpener;
   };

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import SingleSelect from "./components/single-select";
 import MultiSelect from "./components/multi-select";
 import Combobox from "./components/combobox";
 import Listbox from "./components/listbox";
-import type { Labels } from "./components/multi-select";
-import type { SingleSelectLabels } from "./components/single-select";
+import type { LabelsValues } from "./components/multi-select";
+import type { SingleSelectLabelsValues } from "./components/single-select";
 export { ActionItem, OptionItem, SeparatorItem, ActionMenu, SingleSelect, MultiSelect, Combobox, Listbox, };
-export type { Labels, SingleSelectLabels };
+export type { LabelsValues, SingleSelectLabelsValues };

package/dist/index.js

@@ -60,13 +60,6 @@ var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
 
-const keys = {
-  escape: "Escape",
-  tab: "Tab",
-  space: " ",
-  up: "ArrowUp",
-  down: "ArrowDown"
-};
 const selectDropdownStyle = {
   marginTop: wonderBlocksTokens.spacing.xSmall_8,
   marginBottom: wonderBlocksTokens.spacing.xSmall_8
@@ -522,6 +515,7 @@ class DropdownOpener extends React__namespace.Component {
     };
   }
   renderAnchorChildren(eventState, clickableChildrenProps) {
+    var _childrenProps$ariaL;
     const {
       disabled,
       testId,
@@ -531,6 +525,7 @@ class DropdownOpener extends React__namespace.Component {
       "aria-haspopup": ariaHasPopUp,
       "aria-required": ariaRequired,
       id,
+      role,
       onBlur
     } = this.props;
     const renderedChildren = this.props.children(_extends__default["default"]({}, eventState, {
@@ -539,10 +534,13 @@ class DropdownOpener extends React__namespace.Component {
     }));
     const childrenProps = renderedChildren.props;
     const childrenTestId = this.getTestIdFromProps(childrenProps);
+    const renderedAriaLabel = (_childrenProps$ariaL = childrenProps["aria-label"]) != null ? _childrenProps$ariaL : this.props["aria-label"];
     return React__namespace.cloneElement(renderedChildren, _extends__default["default"]({}, clickableChildrenProps, {
+      "aria-label": renderedAriaLabel != null ? renderedAriaLabel : undefined,
       "aria-invalid": this.props.error,
       disabled,
       "aria-controls": ariaControls,
+      role,
       id,
       "aria-expanded": opened ? "true" : "false",
       "aria-haspopup": ariaHasPopUp,
@@ -897,7 +895,7 @@ class DropdownCore extends React__namespace.Component {
         this.handleKeyDownDebounced(this.textSuggestion);
       }
       if (!open) {
-        if (key === keys.down) {
+        if (key === wonderBlocksCore.keys.down) {
           event.preventDefault();
           onOpenChanged(true);
           return;
@@ -905,24 +903,24 @@ class DropdownCore extends React__namespace.Component {
         return;
       }
       switch (key) {
-        case keys.tab:
+        case wonderBlocksCore.keys.tab:
           if (this.isSearchFieldFocused() && searchText) {
             return;
           }
           this.restoreTabOrder();
           onOpenChanged(false);
           return;
-        case keys.space:
+        case wonderBlocksCore.keys.space:
           if (this.isSearchFieldFocused()) {
             return;
           }
           event.preventDefault();
           return;
-        case keys.up:
+        case wonderBlocksCore.keys.up:
           event.preventDefault();
           this.focusPreviousItem();
           return;
-        case keys.down:
+        case wonderBlocksCore.keys.down:
           event.preventDefault();
           this.focusNextItem();
           return;
@@ -935,13 +933,13 @@ class DropdownCore extends React__namespace.Component {
       } = this.props;
       const key = event.key;
       switch (key) {
-        case keys.space:
+        case wonderBlocksCore.keys.space:
           if (this.isSearchFieldFocused()) {
             return;
           }
           event.preventDefault();
           return;
-        case keys.escape:
+        case wonderBlocksCore.keys.escape:
           if (open) {
             event.stopPropagation();
             this.restoreTabOrder();
@@ -1653,7 +1651,8 @@ class ActionMenu extends React__namespace.Component {
       text: menuText,
       ref: this.handleOpenerRef,
       testId: opener ? undefined : testId,
-      opened: this.state.opened
+      opened: this.state.opened,
+      role: "button"
     }, opener ? opener : openerProps => {
       const {
           opened
@@ -1711,7 +1710,7 @@ const styles$5 = aphrodite.StyleSheet.create({
   }
 });
 
-const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "open", "testId", "aria-required", "onBlur", "onOpenChanged"];
+const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "open", "testId", "aria-label", "aria-required", "onBlur", "onOpenChanged"];
 const StyledButton = wonderBlocksCore.addStyle("button");
 class SelectOpener extends React__namespace.Component {
   constructor(props) {
@@ -1723,8 +1722,8 @@ class SelectOpener extends React__namespace.Component {
       this.props.onOpenChanged(!open);
     };
     this.handleKeyDown = e => {
-      const keyCode = e.key;
-      if (keyCode === "Enter" || keyCode === " ") {
+      const keyName = e.key;
+      if (keyName === wonderBlocksCore.keys.enter || keyName === wonderBlocksCore.keys.space) {
         this.setState({
           pressed: true
         });
@@ -1732,8 +1731,8 @@ class SelectOpener extends React__namespace.Component {
       }
     };
     this.handleKeyUp = e => {
-      const keyCode = e.key;
-      if (keyCode === "Enter" || keyCode === " ") {
+      const keyName = e.key;
+      if (keyName === wonderBlocksCore.keys.enter || keyName === wonderBlocksCore.keys.space) {
         this.setState({
           pressed: false
         });
@@ -1754,6 +1753,7 @@ class SelectOpener extends React__namespace.Component {
         isPlaceholder,
         open,
         testId,
+        "aria-label": ariaLabel,
         "aria-required": ariaRequired,
         onBlur
       } = _this$props,
@@ -1765,19 +1765,22 @@ class SelectOpener extends React__namespace.Component {
       "aria-disabled": disabled,
       "aria-expanded": open ? "true" : "false",
       "aria-invalid": error,
+      "aria-label": ariaLabel != null ? ariaLabel : undefined,
       "aria-required": ariaRequired,
       "aria-haspopup": "listbox",
       "data-testid": testId,
       id: id,
+      role: "combobox",
       style: style,
-      type: "button",
       onClick: !disabled ? this.handleClick : undefined,
       onKeyDown: !disabled ? this.handleKeyDown : undefined,
       onKeyUp: !disabled ? this.handleKeyUp : undefined,
       onBlur: onBlur
     }), React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
       style: styles$4.text
-    }, children || "\u00A0"), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
+    }, children || React__namespace.createElement("span", {
+      "aria-hidden": "true"
+    }, "\xA0")), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
       icon: caretDownIcon__default["default"],
       color: iconColor,
       size: "small",
@@ -1962,7 +1965,7 @@ function useSelectValidation({
   };
 }
 
-const _excluded$1 = ["children", "error", "id", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required", "disabled", "dropdownId", "validate", "onValidate", "required", "showOpenerLabelAsText"];
+const _excluded$1 = ["children", "error", "id", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-label", "aria-invalid", "aria-required", "disabled", "dropdownId", "validate", "onValidate", "required", "showOpenerLabelAsText"];
 const SingleSelect = props => {
   const selectedIndex = React__namespace.useRef(0);
   const {
@@ -1989,6 +1992,7 @@ const SingleSelect = props => {
       opened,
       style,
       className,
+      "aria-label": ariaLabel,
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
       disabled = false,
@@ -2100,16 +2104,19 @@ const SingleSelect = props => {
     }, uniqueOpenerId => {
       return opener ? React__namespace.createElement(DropdownOpener, {
         id: uniqueOpenerId,
+        "aria-label": ariaLabel,
         "aria-controls": dropdownId,
         "aria-haspopup": "listbox",
         onClick: handleClick,
         disabled: isDisabled,
         ref: handleOpenerRef,
+        role: "combobox",
         text: menuText,
         opened: open,
         error: hasError,
         onBlur: onOpenerBlurValidation
       }, opener) : React__namespace.createElement(SelectOpener, _extends__default["default"]({}, sharedProps, {
+        "aria-label": ariaLabel,
         "aria-controls": dropdownId,
         disabled: isDisabled,
         id: uniqueOpenerId,
@@ -2156,7 +2163,7 @@ const SingleSelect = props => {
   }));
 };
 
-const _excluded = ["id", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required", "disabled", "error", "children", "dropdownId", "showOpenerLabelAsText", "validate", "onValidate", "required"];
+const _excluded = ["id", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-label", "aria-invalid", "aria-required", "disabled", "error", "children", "dropdownId", "showOpenerLabelAsText", "validate", "onValidate", "required"];
 const MultiSelect = props => {
   const {
       id,
@@ -2174,6 +2181,7 @@ const MultiSelect = props => {
       shortcuts = false,
       style,
       className,
+      "aria-label": ariaLabel,
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
       disabled = false,
@@ -2248,7 +2256,7 @@ const MultiSelect = props => {
     onChange([]);
     onSelectedValuesChangeValidation();
   };
-  const getMenuText = children => {
+  const getMenuTextOrNode = children => {
     const {
       noneSelected,
       someSelected,
@@ -2374,33 +2382,36 @@ const MultiSelect = props => {
     const {
       noneSelected
     } = labels;
-    const menuText = getMenuText(allChildren);
+    const menuContent = getMenuTextOrNode(allChildren);
     const dropdownOpener = React__namespace.createElement(wonderBlocksCore.Id, {
       id: id
     }, uniqueOpenerId => {
       return opener ? React__namespace.createElement(DropdownOpener, {
         id: uniqueOpenerId,
         error: hasError,
+        "aria-label": ariaLabel,
         "aria-controls": dropdownId,
         "aria-haspopup": "listbox",
         onClick: handleClick,
         onBlur: onOpenerBlurValidation,
         disabled: isDisabled,
         ref: handleOpenerRef,
-        text: menuText,
+        role: "combobox",
+        text: menuContent,
         opened: open
       }, opener) : React__namespace.createElement(SelectOpener, _extends__default["default"]({}, sharedProps, {
         error: hasError,
         disabled: isDisabled,
         id: uniqueOpenerId,
+        "aria-label": ariaLabel,
         "aria-controls": dropdownId,
-        isPlaceholder: menuText === noneSelected,
+        isPlaceholder: menuContent === noneSelected,
         onOpenChanged: handleOpenChanged,
         onBlur: onOpenerBlurValidation,
         open: open,
         ref: handleOpenerRef,
         testId: testId
-      }), menuText);
+      }), menuContent);
     });
     return dropdownOpener;
   };

package/dist/util/constants.d.ts

@@ -1,15 +1,4 @@
 import { ComboboxLabels } from "./types";
-/**
- * Key value mapping reference:
- * https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
- */
-export declare const keys: {
-    readonly escape: "Escape";
-    readonly tab: "Tab";
-    readonly space: " ";
-    readonly up: "ArrowUp";
-    readonly down: "ArrowDown";
-};
 export declare const selectDropdownStyle: {
     readonly marginTop: 8;
     readonly marginBottom: 8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "8.0.1",
+  "version": "9.0.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -17,17 +17,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-cell": "^4.0.7",
-    "@khanacademy/wonder-blocks-clickable": "^5.0.7",
-    "@khanacademy/wonder-blocks-core": "^11.1.0",
-    "@khanacademy/wonder-blocks-icon": "^5.0.5",
-    "@khanacademy/wonder-blocks-layout": "^3.0.7",
-    "@khanacademy/wonder-blocks-modal": "^7.0.5",
-    "@khanacademy/wonder-blocks-pill": "^3.0.7",
-    "@khanacademy/wonder-blocks-search-field": "^5.0.1",
+    "@khanacademy/wonder-blocks-cell": "^4.0.8",
+    "@khanacademy/wonder-blocks-clickable": "^6.0.0",
+    "@khanacademy/wonder-blocks-core": "^12.0.0",
+    "@khanacademy/wonder-blocks-icon": "^5.0.6",
+    "@khanacademy/wonder-blocks-layout": "^3.0.8",
+    "@khanacademy/wonder-blocks-modal": "^7.0.7",
+    "@khanacademy/wonder-blocks-pill": "^3.0.8",
+    "@khanacademy/wonder-blocks-search-field": "^5.0.3",
     "@khanacademy/wonder-blocks-timing": "^6.0.1",
     "@khanacademy/wonder-blocks-tokens": "^4.1.0",
-    "@khanacademy/wonder-blocks-typography": "^3.0.5"
+    "@khanacademy/wonder-blocks-typography": "^3.0.6"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -41,7 +41,7 @@
     "react-window": "^1.8.10"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^7.0.7",
+    "@khanacademy/wonder-blocks-button": "^7.0.8",
     "@khanacademy/wb-dev-build-settings": "^2.0.0"
   }
 }