@khanacademy/wonder-blocks-dropdown 5.3.8 → 5.4.0

package/src/components/action-menu.tsx

@@ -1,7 +1,11 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {StyleSheet} from "aphrodite";
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
+import {
+    IDProvider,
+    type AriaProps,
+    type StyleType,
+} from "@khanacademy/wonder-blocks-core";
 import DropdownOpener from "./dropdown-opener";
 import ActionItem from "./action-item";
 import OptionItem from "./option-item";
@@ -72,6 +76,19 @@ type Props = AriaProps &
          * 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<{
@@ -203,14 +220,18 @@ export default class ActionMenu extends React.Component<Props, State> {
                 };
                 // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'ReactChild | ReactFragment | ReactPortal' is not assignable to parameter of type 'ReactElement<any, string | JSXElementConstructor<any>>'.
             } else if (OptionItem.isClassOf(item)) {
+                const selected = selectedValues
+                    ? selectedValues.includes(value)
+                    : false;
                 return {
                     ...itemObject,
                     populatedProps: {
                         onToggle: this.handleOptionSelected,
-                        selected: selectedValues
-                            ? selectedValues.includes(value)
-                            : false,
+                        selected,
                         variant: "check",
+                        role: "menuitemcheckbox",
+                        "aria-checked": selected,
+                        "aria-selected": undefined,
                     },
                 };
             } else {
@@ -229,61 +250,77 @@ export default class ActionMenu extends React.Component<Props, State> {
 
     renderOpener(
         numItems: number,
+        dropdownId: string,
     ): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> {
-        const {disabled, menuText, opener, testId} = this.props;
+        const {disabled, menuText, opener, testId, id} = this.props;
 
         return (
-            <DropdownOpener
-                onClick={this.handleClick}
-                disabled={numItems === 0 || disabled}
-                text={menuText}
-                ref={this.handleOpenerRef}
-                testId={opener ? undefined : testId}
-                opened={this.state.opened}
-            >
-                {opener
-                    ? opener
-                    : (openerProps) => {
-                          const {
-                              // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                              text,
-                              opened,
-                              ...eventState
-                          } = openerProps;
-                          return (
-                              <ActionMenuOpenerCore
-                                  {...eventState}
-                                  disabled={disabled}
-                                  opened={!!opened}
-                                  testId={testId}
-                              >
-                                  {menuText}
-                              </ActionMenuOpenerCore>
-                          );
-                      }}
-            </DropdownOpener>
+            <IDProvider id={id} scope="action-menu-opener">
+                {(uniqueOpenerId) => (
+                    <DropdownOpener
+                        id={uniqueOpenerId}
+                        aria-controls={dropdownId}
+                        aria-haspopup="menu"
+                        onClick={this.handleClick}
+                        disabled={numItems === 0 || disabled}
+                        text={menuText}
+                        ref={this.handleOpenerRef}
+                        testId={opener ? undefined : testId}
+                        opened={this.state.opened}
+                    >
+                        {opener
+                            ? opener
+                            : (openerProps) => {
+                                  const {
+                                      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                                      text,
+                                      opened,
+                                      ...eventState
+                                  } = openerProps;
+                                  return (
+                                      <ActionMenuOpenerCore
+                                          {...eventState}
+                                          disabled={disabled}
+                                          opened={!!opened}
+                                          testId={testId}
+                                      >
+                                          {menuText}
+                                      </ActionMenuOpenerCore>
+                                  );
+                              }}
+                    </DropdownOpener>
+                )}
+            </IDProvider>
         );
     }
 
     render(): React.ReactNode {
-        const {alignment, dropdownStyle, style, className} = this.props;
+        const {alignment, dropdownStyle, style, className, dropdownId} =
+            this.props;
 
         const items = this.getMenuItems();
-        const dropdownOpener = this.renderOpener(items.length);
 
         return (
-            <DropdownCore
-                role="menu"
-                style={style}
-                className={className}
-                opener={dropdownOpener}
-                alignment={alignment}
-                open={this.state.opened}
-                items={items}
-                openerElement={this.openerElement}
-                onOpenChanged={this.handleOpenChanged}
-                dropdownStyle={[styles.menuTopSpace, dropdownStyle]}
-            />
+            <IDProvider id={dropdownId} scope="action-menu-dropdown">
+                {(uniqueDropdownId) => (
+                    <DropdownCore
+                        id={uniqueDropdownId}
+                        role="menu"
+                        style={style}
+                        className={className}
+                        opener={this.renderOpener(
+                            items.length,
+                            uniqueDropdownId,
+                        )}
+                        alignment={alignment}
+                        open={this.state.opened}
+                        items={items}
+                        openerElement={this.openerElement}
+                        onOpenChanged={this.handleOpenChanged}
+                        dropdownStyle={[styles.menuTopSpace, dropdownStyle]}
+                    />
+                )}
+            </IDProvider>
         );
     }
 }

package/src/components/dropdown-core.tsx

@@ -173,6 +173,10 @@ type ExportProps = Readonly<{
      * Whether the dropdown and it's interactions should be disabled.
      */
     disabled?: boolean;
+    /**
+     * Unique identifier attached to the dropdown.
+     */
+    id?: string;
 
     // Optional props with defaults
     /**
@@ -861,7 +865,7 @@ class DropdownCore extends React.Component<Props, State> {
                 },
                 // Only pass the ref if the item is focusable.
                 ref: focusable ? currentRef : null,
-                role: itemRole,
+                role: populatedProps.role || itemRole,
             });
         });
     }
@@ -879,6 +883,7 @@ class DropdownCore extends React.Component<Props, State> {
         const itemRole = this.getItemRole();
 
         return this.props.items.map((item, index) => {
+            const {populatedProps} = item;
             if (!SeparatorItem.isClassOf(item.component) && item.focusable) {
                 focusCounter += 1;
             }
@@ -887,7 +892,7 @@ class DropdownCore extends React.Component<Props, State> {
 
             return {
                 ...item,
-                role: itemRole,
+                role: populatedProps.role || itemRole,
                 ref: item.focusable
                     ? this.state.itemRefs[focusIndex]
                         ? this.state.itemRefs[focusIndex].ref
@@ -952,6 +957,7 @@ class DropdownCore extends React.Component<Props, State> {
             light,
             openerElement,
             role,
+            id,
         } = this.props;
 
         // The dropdown width is at least the width of the opener.
@@ -977,6 +983,7 @@ class DropdownCore extends React.Component<Props, State> {
             >
                 {isFilterable && this.renderSearchField()}
                 <View
+                    id={id}
                     role={role}
                     style={[
                         styles.listboxOrMenu,

package/src/components/dropdown-opener.tsx

@@ -39,6 +39,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 = {
@@ -58,7 +62,15 @@ class DropdownOpener extends React.Component<Props> {
         eventState: ClickableState,
         clickableChildrenProps: ChildrenProps,
     ): React.ReactElement {
-        const {disabled, testId, text, opened} = this.props;
+        const {
+            disabled,
+            testId,
+            text,
+            opened,
+            "aria-controls": ariaControls,
+            "aria-haspopup": ariaHasPopUp,
+            id,
+        } = this.props;
         const renderedChildren = this.props.children({
             ...eventState,
             text,
@@ -70,6 +82,10 @@ class DropdownOpener extends React.Component<Props> {
         return React.cloneElement(renderedChildren, {
             ...clickableChildrenProps,
             disabled,
+            "aria-controls": ariaControls,
+            id,
+            "aria-expanded": opened ? "true" : "false",
+            "aria-haspopup": ariaHasPopUp,
             onClick: childrenProps.onClick
                 ? (e: React.MouseEvent) => {
                       // This is done to avoid overriding a

package/src/components/multi-select.tsx

@@ -1,7 +1,11 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
+import {
+    IDProvider,
+    type AriaProps,
+    type StyleType,
+} from "@khanacademy/wonder-blocks-core";
 
 import ActionItem from "./action-item";
 import DropdownCore from "./dropdown-core";
@@ -158,6 +162,13 @@ type Props = AriaProps &
          * 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<{
@@ -479,6 +490,7 @@ export default class MultiSelect extends React.Component<Props, State> {
             React.ComponentProps<typeof OptionItem>
         >[],
         isDisabled: boolean,
+        dropdownId: string,
     ):
         | React.ReactElement<React.ComponentProps<typeof DropdownOpener>>
         | React.ReactElement<React.ComponentProps<typeof SelectOpener>> {
@@ -511,30 +523,40 @@ export default class MultiSelect extends React.Component<Props, State> {
 
         const menuText = this.getMenuText(allChildren);
 
-        const dropdownOpener = opener ? (
-            <DropdownOpener
-                onClick={this.handleClick}
-                disabled={isDisabled}
-                ref={this.handleOpenerRef}
-                text={menuText}
-                opened={this.state.open}
-            >
-                {opener}
-            </DropdownOpener>
-        ) : (
-            <SelectOpener
-                {...sharedProps}
-                disabled={isDisabled}
-                id={id}
-                isPlaceholder={menuText === noneSelected}
-                light={light}
-                onOpenChanged={this.handleOpenChanged}
-                open={this.state.open}
-                ref={this.handleOpenerRef}
-                testId={testId}
-            >
-                {menuText}
-            </SelectOpener>
+        const dropdownOpener = (
+            <IDProvider id={id} scope="multi-select-opener">
+                {(uniqueOpenerId) => {
+                    return opener ? (
+                        <DropdownOpener
+                            id={uniqueOpenerId}
+                            aria-controls={dropdownId}
+                            aria-haspopup="listbox"
+                            onClick={this.handleClick}
+                            disabled={isDisabled}
+                            ref={this.handleOpenerRef}
+                            text={menuText}
+                            opened={this.state.open}
+                        >
+                            {opener}
+                        </DropdownOpener>
+                    ) : (
+                        <SelectOpener
+                            {...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}
+                        </SelectOpener>
+                    );
+                }}
+            </IDProvider>
         );
 
         return dropdownOpener;
@@ -552,6 +574,7 @@ export default class MultiSelect extends React.Component<Props, State> {
             "aria-invalid": ariaInvalid,
             "aria-required": ariaRequired,
             disabled,
+            dropdownId,
         } = this.props;
         const {open, searchText} = this.state;
         const {clearSearch, filter, noResults, someSelected} =
@@ -567,44 +590,54 @@ export default class MultiSelect extends React.Component<Props, State> {
         ).length;
         const filteredItems = this.getMenuItems(allChildren);
         const isDisabled = numEnabledOptions === 0 || disabled;
-        const opener = this.renderOpener(allChildren, isDisabled);
 
         return (
-            <DropdownCore
-                role="listbox"
-                alignment={alignment}
-                dropdownStyle={[
-                    isFilterable && filterableDropdownStyle,
-                    selectDropdownStyle,
-                    dropdownStyle,
-                ]}
-                isFilterable={isFilterable}
-                items={[
-                    ...this.getShortcuts(numEnabledOptions),
-                    ...filteredItems,
-                ]}
-                light={light}
-                onOpenChanged={this.handleOpenChanged}
-                open={open}
-                opener={opener}
-                openerElement={this.state.openerElement}
-                selectionType="multi"
-                style={style}
-                className={className}
-                onSearchTextChanged={
-                    isFilterable ? this.handleSearchTextChanged : undefined
-                }
-                searchText={isFilterable ? searchText : ""}
-                labels={{
-                    clearSearch,
-                    filter,
-                    noResults,
-                    someResults: someSelected,
-                }}
-                aria-invalid={ariaInvalid}
-                aria-required={ariaRequired}
-                disabled={isDisabled}
-            />
+            <IDProvider id={dropdownId} scope="multi-select-dropdown">
+                {(uniqueDropdownId) => (
+                    <DropdownCore
+                        id={uniqueDropdownId}
+                        role="listbox"
+                        alignment={alignment}
+                        dropdownStyle={[
+                            isFilterable && filterableDropdownStyle,
+                            selectDropdownStyle,
+                            dropdownStyle,
+                        ]}
+                        isFilterable={isFilterable}
+                        items={[
+                            ...this.getShortcuts(numEnabledOptions),
+                            ...filteredItems,
+                        ]}
+                        light={light}
+                        onOpenChanged={this.handleOpenChanged}
+                        open={open}
+                        opener={this.renderOpener(
+                            allChildren,
+                            isDisabled,
+                            uniqueDropdownId,
+                        )}
+                        openerElement={this.state.openerElement}
+                        selectionType="multi"
+                        style={style}
+                        className={className}
+                        onSearchTextChanged={
+                            isFilterable
+                                ? this.handleSearchTextChanged
+                                : undefined
+                        }
+                        searchText={isFilterable ? searchText : ""}
+                        labels={{
+                            clearSearch,
+                            filter,
+                            noResults,
+                            someResults: someSelected,
+                        }}
+                        aria-invalid={ariaInvalid}
+                        aria-required={ariaRequired}
+                        disabled={isDisabled}
+                    />
+                )}
+            </IDProvider>
         );
     }
 }

package/src/components/option-item.tsx

@@ -65,7 +65,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/src/components/select-opener.tsx

@@ -322,7 +322,7 @@ const _generateStyles = (
         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
@@ -334,7 +334,7 @@ const _generateStyles = (
                     ":hover:not([aria-disabled=true])": {
                         borderColor: error
                             ? tokens.color.red
-                            : tokens.color.offBlack16,
+                            : tokens.color.offBlack50,
                         borderWidth: tokens.border.width.hairline,
                         paddingLeft: tokens.spacing.medium_16,
                         paddingRight: tokens.spacing.small_12,