@khanacademy/wonder-blocks-dropdown 5.3.8 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 5.4.0
+
+### Minor Changes
+
+-   4e82c4c2: 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
+
+### Patch Changes
+
+-   f099cf87: Improves accessibility of the checked status on `OptionItem` components used
+    within the `ActionMenu` component. The checked status is communicated to
+    screenreaders by using a `menuitemcheckbox` role with the `aria-checked`
+    attribute (instead of `aria-selected`). - `CellCore` (used by `CompactCell` and `DetailCell`) has a new optional
+    prop for `aria-checked` - `ClickableRole` type now supports the `menuitemcheckbox` role - `OptionItem`'s `role` prop now also supports the `menuitemcheckbox` role
+-   Updated dependencies [f099cf87]
+    -   @khanacademy/wonder-blocks-clickable@4.2.3
+    -   @khanacademy/wonder-blocks-cell@3.4.0
+    -   @khanacademy/wonder-blocks-search-field@2.2.18
+    -   @khanacademy/wonder-blocks-modal@5.1.6
+
+## 5.3.9
+
+### Patch Changes
+
+-   c8b273f0: Update default/resting border color to fix a color contrast issue
+    -   @khanacademy/wonder-blocks-search-field@2.2.17
+
 ## 5.3.8
 
 ### Patch Changes

package/dist/components/action-menu.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import { type AriaProps, type StyleType } from "@khanacademy/wonder-blocks-core";
 import DropdownOpener from "./dropdown-opener";
 import type { Item, DropdownItem, OpenerProps } from "../util/types";
 type Props = AriaProps & Readonly<{
@@ -63,6 +63,19 @@ type Props = AriaProps & Readonly<{
      * element to access pointer event state.
      */
     opener?: (openerProps: OpenerProps) => React.ReactElement<any>;
+    /**
+     * Unique identifier attached to the menu 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.
+     */
+    dropdownId?: string;
+    /**
+     * Unique identifier attached to the field control. 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.
+     */
+    id?: string;
 }>;
 type State = Readonly<{
     /**
@@ -103,7 +116,7 @@ export default class ActionMenu extends React.Component<Props, State> {
     getMenuItems(): Array<DropdownItem>;
     handleOpenerRef: (node?: any) => void;
     handleClick: (e: React.SyntheticEvent) => void;
-    renderOpener(numItems: number): React.ReactElement<React.ComponentProps<typeof DropdownOpener>>;
+    renderOpener(numItems: number, dropdownId: string): React.ReactElement<React.ComponentProps<typeof DropdownOpener>>;
     render(): React.ReactNode;
 }
 export {};

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

@@ -81,6 +81,10 @@ declare const _default: React.ComponentType<Readonly<{
      * Whether the dropdown and it's interactions should be disabled.
      */
     disabled?: boolean | undefined;
+    /**
+     * Unique identifier attached to the dropdown.
+     */
+    id?: string | undefined;
     /**
      * Whether this menu should be left-aligned or right-aligned with the
      * opener component. Defaults to left-aligned.

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

@@ -31,6 +31,10 @@ type Props = Partial<Omit<AriaProps, "aria-disabled">> & {
      * Whether the dropdown is opened.
      */
     opened: boolean;
+    /**
+     * The unique identifier for the opener.
+     */
+    id?: string;
 };
 type DefaultProps = {
     disabled: Props["disabled"];

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import { type AriaProps, type StyleType } from "@khanacademy/wonder-blocks-core";
 import DropdownOpener from "./dropdown-opener";
 import SelectOpener from "./select-opener";
 import OptionItem from "./option-item";
@@ -129,6 +129,13 @@ type Props = AriaProps & DefaultProps & Readonly<{
      * Test ID used for e2e testing.
      */
     testId?: string;
+    /**
+     * Unique identifier attached to the listbox 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.
+     */
+    dropdownId?: string;
 }>;
 type State = Readonly<{
     /**
@@ -196,7 +203,7 @@ export default class MultiSelect extends React.Component<Props, State> {
     handleOpenerRef: (node?: any) => void;
     handleSearchTextChanged: (searchText: string) => void;
     handleClick: (e: React.SyntheticEvent) => void;
-    renderOpener(allChildren: React.ReactElement<React.ComponentProps<typeof OptionItem>>[], isDisabled: boolean): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> | React.ReactElement<React.ComponentProps<typeof SelectOpener>>;
+    renderOpener(allChildren: React.ReactElement<React.ComponentProps<typeof OptionItem>>[], isDisabled: boolean, dropdownId: string): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> | React.ReactElement<React.ComponentProps<typeof SelectOpener>>;
     render(): React.ReactNode;
 }
 export {};

package/dist/components/option-item.d.ts

@@ -48,7 +48,7 @@ type OptionProps = AriaProps & {
     /**
      * Aria role to use, defaults to "option".
      */
-    role: "menuitem" | "option";
+    role: "menuitem" | "option" | "menuitemcheckbox";
     /**
      * Test ID used for e2e testing.
      */

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import { type AriaProps, type StyleType } from "@khanacademy/wonder-blocks-core";
 import DropdownOpener from "./dropdown-opener";
 import SelectOpener from "./select-opener";
 import OptionItem from "./option-item";
@@ -125,6 +125,13 @@ type Props = AriaProps & DefaultProps & Readonly<{
      * top. The items will be filtered by the input.
      */
     isFilterable?: boolean;
+    /**
+     * Unique identifier attached to the listbox 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.
+     */
+    dropdownId?: string;
 }>;
 type State = Readonly<{
     /**
@@ -204,7 +211,7 @@ export default class SingleSelect extends React.Component<Props, State> {
     handleSearchTextChanged: (searchText: string) => void;
     handleOpenerRef: (node?: any) => void;
     handleClick: (e: React.SyntheticEvent) => void;
-    renderOpener(isDisabled: boolean): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> | React.ReactElement<React.ComponentProps<typeof SelectOpener>>;
+    renderOpener(isDisabled: boolean, dropdownId: string): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> | React.ReactElement<React.ComponentProps<typeof SelectOpener>>;
     render(): React.ReactNode;
 }
 export {};

package/dist/es/index.js

@@ -4,7 +4,7 @@ import { CompactCell, DetailCell } from '@khanacademy/wonder-blocks-cell';
 import * as tokens from '@khanacademy/wonder-blocks-tokens';
 import { spacing, color, mix, fade } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
-import { View, addStyle, useUniqueIdWithMock } from '@khanacademy/wonder-blocks-core';
+import { View, addStyle, IDProvider, useUniqueIdWithMock } 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';
@@ -492,7 +492,10 @@ class DropdownOpener extends React.Component {
       disabled,
       testId,
       text,
-      opened
+      opened,
+      "aria-controls": ariaControls,
+      "aria-haspopup": ariaHasPopUp,
+      id
     } = this.props;
     const renderedChildren = this.props.children(_extends({}, eventState, {
       text,
@@ -502,6 +505,10 @@ class DropdownOpener extends React.Component {
     const childrenTestId = this.getTestIdFromProps(childrenProps);
     return React.cloneElement(renderedChildren, _extends({}, clickableChildrenProps, {
       disabled,
+      "aria-controls": ariaControls,
+      id,
+      "aria-expanded": opened ? "true" : "false",
+      "aria-haspopup": ariaHasPopUp,
       onClick: childrenProps.onClick ? e => {
         childrenProps.onClick(e);
         clickableChildrenProps.onClick(e);
@@ -1169,7 +1176,7 @@ class DropdownCore extends React.Component {
           this.handleItemClick(focusIndex, item);
         },
         ref: focusable ? currentRef : null,
-        role: itemRole
+        role: populatedProps.role || itemRole
       }));
     });
   }
@@ -1177,12 +1184,15 @@ class DropdownCore extends React.Component {
     let focusCounter = 0;
     const itemRole = this.getItemRole();
     return this.props.items.map((item, index) => {
+      const {
+        populatedProps
+      } = item;
       if (!SeparatorItem.isClassOf(item.component) && item.focusable) {
         focusCounter += 1;
       }
       const focusIndex = focusCounter - 1;
       return _extends({}, item, {
-        role: itemRole,
+        role: populatedProps.role || itemRole,
         ref: item.focusable ? this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null : null,
         onClick: () => {
           this.handleItemClick(focusIndex, item);
@@ -1221,7 +1231,8 @@ class DropdownCore extends React.Component {
       isFilterable,
       light,
       openerElement,
-      role
+      role,
+      id
     } = this.props;
     const openerStyle = openerElement && window.getComputedStyle(openerElement);
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
@@ -1230,6 +1241,7 @@ class DropdownCore extends React.Component {
       style: [styles$4.dropdown, light && styles$4.light, isReferenceHidden && styles$4.hidden, dropdownStyle],
       testId: "dropdown-core-container"
     }, isFilterable && this.renderSearchField(), React.createElement(View, {
+      id: id,
       role: role,
       style: [styles$4.listboxOrMenu, {
         minWidth: minDropdownWidth
@@ -1547,11 +1559,15 @@ class ActionMenu extends React.Component {
           }
         });
       } else if (OptionItem.isClassOf(item)) {
+        const selected = selectedValues ? selectedValues.includes(value) : false;
         return _extends({}, itemObject, {
           populatedProps: {
             onToggle: this.handleOptionSelected,
-            selected: selectedValues ? selectedValues.includes(value) : false,
-            variant: "check"
+            selected,
+            variant: "check",
+            role: "menuitemcheckbox",
+            "aria-checked": selected,
+            "aria-selected": undefined
           }
         });
       } else {
@@ -1559,14 +1575,21 @@ class ActionMenu extends React.Component {
       }
     });
   }
-  renderOpener(numItems) {
+  renderOpener(numItems, dropdownId) {
     const {
       disabled,
       menuText,
       opener,
-      testId
+      testId,
+      id
     } = this.props;
-    return React.createElement(DropdownOpener, {
+    return React.createElement(IDProvider, {
+      id: id,
+      scope: "action-menu-opener"
+    }, uniqueOpenerId => React.createElement(DropdownOpener, {
+      id: uniqueOpenerId,
+      "aria-controls": dropdownId,
+      "aria-haspopup": "menu",
       onClick: this.handleClick,
       disabled: numItems === 0 || disabled,
       text: menuText,
@@ -1583,29 +1606,33 @@ class ActionMenu extends React.Component {
         opened: !!opened,
         testId: testId
       }), menuText);
-    });
+    }));
   }
   render() {
     const {
       alignment,
       dropdownStyle,
       style,
-      className
+      className,
+      dropdownId
     } = this.props;
     const items = this.getMenuItems();
-    const dropdownOpener = this.renderOpener(items.length);
-    return React.createElement(DropdownCore$1, {
+    return React.createElement(IDProvider, {
+      id: dropdownId,
+      scope: "action-menu-dropdown"
+    }, uniqueDropdownId => React.createElement(DropdownCore$1, {
+      id: uniqueDropdownId,
       role: "menu",
       style: style,
       className: className,
-      opener: dropdownOpener,
+      opener: this.renderOpener(items.length, uniqueDropdownId),
       alignment: alignment,
       open: this.state.opened,
       items: items,
       openerElement: this.openerElement,
       onOpenChanged: this.handleOpenChanged,
       dropdownStyle: [styles$2.menuTopSpace, dropdownStyle]
-    });
+    }));
   }
 }
 ActionMenu.defaultProps = {
@@ -1804,13 +1831,13 @@ const _generateStyles = (light, placeholder, error) => {
     newStyles = {
       default: {
         background: error ? tokens.color.fadedRed8 : tokens.color.white,
-        borderColor: error ? tokens.color.red : tokens.color.offBlack16,
+        borderColor: error ? tokens.color.red : tokens.color.offBlack50,
         borderWidth: tokens.border.width.hairline,
         color: placeholder ? tokens.color.offBlack64 : tokens.color.offBlack,
         ":hover:not([aria-disabled=true])": focusHoverStyling,
         ["@media not (hover: hover)"]: {
           ":hover:not([aria-disabled=true])": {
-            borderColor: error ? tokens.color.red : tokens.color.offBlack16,
+            borderColor: error ? tokens.color.red : tokens.color.offBlack50,
             borderWidth: tokens.border.width.hairline,
             paddingLeft: tokens.spacing.medium_16,
             paddingRight: tokens.spacing.small_12
@@ -1932,7 +1959,7 @@ class SingleSelect extends React.Component {
     } = this.props;
     return this.mapOptionItemsToDropdownItems(isFilterable ? this.filterChildren(children) : children);
   }
-  renderOpener(isDisabled) {
+  renderOpener(isDisabled, dropdownId) {
     const _this$props = this.props,
       {
         children,
@@ -1948,23 +1975,32 @@ class SingleSelect extends React.Component {
     const items = React.Children.toArray(children);
     const selectedItem = items.find(option => option.props.value === selectedValue);
     const menuText = selectedItem ? getLabel(selectedItem.props) : placeholder;
-    const dropdownOpener = opener ? React.createElement(DropdownOpener, {
-      onClick: this.handleClick,
-      disabled: isDisabled,
-      ref: this.handleOpenerRef,
-      text: menuText,
-      opened: this.state.open
-    }, opener) : React.createElement(SelectOpener, _extends({}, sharedProps, {
-      disabled: isDisabled,
+    const dropdownOpener = React.createElement(IDProvider, {
       id: id,
-      error: error,
-      isPlaceholder: !selectedItem,
-      light: light,
-      onOpenChanged: this.handleOpenChanged,
-      open: this.state.open,
-      ref: this.handleOpenerRef,
-      testId: testId
-    }), menuText);
+      scope: "single-select-opener"
+    }, uniqueOpenerId => {
+      return opener ? React.createElement(DropdownOpener, {
+        id: uniqueOpenerId,
+        "aria-controls": dropdownId,
+        "aria-haspopup": "listbox",
+        onClick: this.handleClick,
+        disabled: isDisabled,
+        ref: this.handleOpenerRef,
+        text: menuText,
+        opened: this.state.open
+      }, opener) : React.createElement(SelectOpener, _extends({}, sharedProps, {
+        "aria-controls": dropdownId,
+        disabled: isDisabled,
+        id: uniqueOpenerId,
+        error: error,
+        isPlaceholder: !selectedItem,
+        light: light,
+        onOpenChanged: this.handleOpenChanged,
+        open: this.state.open,
+        ref: this.handleOpenerRef,
+        testId: testId
+      }), menuText);
+    });
     return dropdownOpener;
   }
   render() {
@@ -1981,7 +2017,8 @@ class SingleSelect extends React.Component {
       style,
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
-      disabled
+      disabled,
+      dropdownId
     } = this.props;
     const {
       searchText
@@ -1990,8 +2027,11 @@ class SingleSelect extends React.Component {
     const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
     const items = this.getMenuItems(allChildren);
     const isDisabled = numEnabledOptions === 0 || disabled;
-    const opener = this.renderOpener(isDisabled);
-    return React.createElement(DropdownCore$1, {
+    return React.createElement(IDProvider, {
+      id: dropdownId,
+      scope: "single-select-dropdown"
+    }, uniqueDropdownId => React.createElement(DropdownCore$1, {
+      id: uniqueDropdownId,
       role: "listbox",
       selectionType: "single",
       alignment: alignment,
@@ -2003,7 +2043,7 @@ class SingleSelect extends React.Component {
       light: light,
       onOpenChanged: this.handleOpenChanged,
       open: this.state.open,
-      opener: opener,
+      opener: this.renderOpener(isDisabled, uniqueDropdownId),
       openerElement: this.state.openerElement,
       style: style,
       className: className,
@@ -2014,7 +2054,7 @@ class SingleSelect extends React.Component {
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
       disabled: isDisabled
-    });
+    }));
   }
 }
 SingleSelect.defaultProps = {
@@ -2239,7 +2279,7 @@ class MultiSelect extends React.Component {
     }
     return [...lastSelectedItems, ...restOfTheChildren.map(this.mapOptionItemToDropdownItem)];
   }
-  renderOpener(allChildren, isDisabled) {
+  renderOpener(allChildren, isDisabled, dropdownId) {
     const _this$props = this.props,
       {
         id,
@@ -2252,22 +2292,31 @@ class MultiSelect extends React.Component {
       noneSelected
     } = this.state.labels;
     const menuText = this.getMenuText(allChildren);
-    const dropdownOpener = opener ? React.createElement(DropdownOpener, {
-      onClick: this.handleClick,
-      disabled: isDisabled,
-      ref: this.handleOpenerRef,
-      text: menuText,
-      opened: this.state.open
-    }, opener) : React.createElement(SelectOpener, _extends({}, sharedProps, {
-      disabled: isDisabled,
+    const dropdownOpener = React.createElement(IDProvider, {
       id: id,
-      isPlaceholder: menuText === noneSelected,
-      light: light,
-      onOpenChanged: this.handleOpenChanged,
-      open: this.state.open,
-      ref: this.handleOpenerRef,
-      testId: testId
-    }), menuText);
+      scope: "multi-select-opener"
+    }, uniqueOpenerId => {
+      return opener ? React.createElement(DropdownOpener, {
+        id: uniqueOpenerId,
+        "aria-controls": dropdownId,
+        "aria-haspopup": "listbox",
+        onClick: this.handleClick,
+        disabled: isDisabled,
+        ref: this.handleOpenerRef,
+        text: menuText,
+        opened: this.state.open
+      }, opener) : React.createElement(SelectOpener, _extends({}, sharedProps, {
+        disabled: isDisabled,
+        id: uniqueOpenerId,
+        "aria-controls": dropdownId,
+        isPlaceholder: menuText === noneSelected,
+        light: light,
+        onOpenChanged: this.handleOpenChanged,
+        open: this.state.open,
+        ref: this.handleOpenerRef,
+        testId: testId
+      }), menuText);
+    });
     return dropdownOpener;
   }
   render() {
@@ -2281,7 +2330,8 @@ class MultiSelect extends React.Component {
       isFilterable,
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
-      disabled
+      disabled,
+      dropdownId
     } = this.props;
     const {
       open,
@@ -2297,8 +2347,11 @@ class MultiSelect extends React.Component {
     const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
     const filteredItems = this.getMenuItems(allChildren);
     const isDisabled = numEnabledOptions === 0 || disabled;
-    const opener = this.renderOpener(allChildren, isDisabled);
-    return React.createElement(DropdownCore$1, {
+    return React.createElement(IDProvider, {
+      id: dropdownId,
+      scope: "multi-select-dropdown"
+    }, uniqueDropdownId => React.createElement(DropdownCore$1, {
+      id: uniqueDropdownId,
       role: "listbox",
       alignment: alignment,
       dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
@@ -2307,7 +2360,7 @@ class MultiSelect extends React.Component {
       light: light,
       onOpenChanged: this.handleOpenChanged,
       open: open,
-      opener: opener,
+      opener: this.renderOpener(allChildren, isDisabled, uniqueDropdownId),
       openerElement: this.state.openerElement,
       selectionType: "multi",
       style: style,
@@ -2323,7 +2376,7 @@ class MultiSelect extends React.Component {
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
       disabled: isDisabled
-    });
+    }));
   }
 }
 MultiSelect.defaultProps = {

package/dist/hooks/use-listbox.d.ts

@@ -45,7 +45,7 @@ export declare function useListbox({ children: options, disabled, id, selectionT
         onToggle: (value: string) => unknown;
         selected: boolean;
         focused: boolean;
-        role: "menuitem" | "option";
+        role: "menuitem" | "option" | "menuitemcheckbox";
         testId?: string | undefined;
         variant?: "checkbox" | "check" | undefined;
         style?: import("@khanacademy/wonder-blocks-core").StyleType;
@@ -58,7 +58,7 @@ export declare function useListbox({ children: options, disabled, id, selectionT
         subtitle2?: import("../../../wonder-blocks-cell/src/util/types").TypographyText | undefined;
     }, "style" | "label" | "id" | "value" | "onClick" | keyof import("../../../wonder-blocks-core/src/util/aria-types").AriaAttributes | "testId" | "leftAccessory" | "rightAccessory" | "labelAsText" | "variant" | "parentComponent" | "subtitle1" | "subtitle2"> & {
         disabled?: boolean | undefined;
-        role?: "menuitem" | "option" | undefined;
+        role?: "menuitem" | "option" | "menuitemcheckbox" | undefined;
         selected?: boolean | undefined;
         onToggle?: ((value: string) => unknown) | undefined;
         focused?: boolean | undefined;