@khanacademy/wonder-blocks-dropdown 5.3.8 → 5.4.0

package/dist/index.js

@@ -522,7 +522,10 @@ class DropdownOpener extends React__namespace.Component {
       disabled,
       testId,
       text,
-      opened
+      opened,
+      "aria-controls": ariaControls,
+      "aria-haspopup": ariaHasPopUp,
+      id
     } = this.props;
     const renderedChildren = this.props.children(_extends({}, eventState, {
       text,
@@ -532,6 +535,10 @@ class DropdownOpener extends React__namespace.Component {
     const childrenTestId = this.getTestIdFromProps(childrenProps);
     return React__namespace.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);
@@ -1199,7 +1206,7 @@ class DropdownCore extends React__namespace.Component {
           this.handleItemClick(focusIndex, item);
         },
         ref: focusable ? currentRef : null,
-        role: itemRole
+        role: populatedProps.role || itemRole
       }));
     });
   }
@@ -1207,12 +1214,15 @@ class DropdownCore extends React__namespace.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);
@@ -1251,7 +1261,8 @@ class DropdownCore extends React__namespace.Component {
       isFilterable,
       light,
       openerElement,
-      role
+      role,
+      id
     } = this.props;
     const openerStyle = openerElement && window.getComputedStyle(openerElement);
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
@@ -1260,6 +1271,7 @@ class DropdownCore extends React__namespace.Component {
       style: [styles$4.dropdown, light && styles$4.light, isReferenceHidden && styles$4.hidden, dropdownStyle],
       testId: "dropdown-core-container"
     }, isFilterable && this.renderSearchField(), React__namespace.createElement(wonderBlocksCore.View, {
+      id: id,
       role: role,
       style: [styles$4.listboxOrMenu, {
         minWidth: minDropdownWidth
@@ -1577,11 +1589,15 @@ class ActionMenu extends React__namespace.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 {
@@ -1589,14 +1605,21 @@ class ActionMenu extends React__namespace.Component {
       }
     });
   }
-  renderOpener(numItems) {
+  renderOpener(numItems, dropdownId) {
     const {
       disabled,
       menuText,
       opener,
-      testId
+      testId,
+      id
     } = this.props;
-    return React__namespace.createElement(DropdownOpener, {
+    return React__namespace.createElement(wonderBlocksCore.IDProvider, {
+      id: id,
+      scope: "action-menu-opener"
+    }, uniqueOpenerId => React__namespace.createElement(DropdownOpener, {
+      id: uniqueOpenerId,
+      "aria-controls": dropdownId,
+      "aria-haspopup": "menu",
       onClick: this.handleClick,
       disabled: numItems === 0 || disabled,
       text: menuText,
@@ -1613,29 +1636,33 @@ class ActionMenu extends React__namespace.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__namespace.createElement(DropdownCore$1, {
+    return React__namespace.createElement(wonderBlocksCore.IDProvider, {
+      id: dropdownId,
+      scope: "action-menu-dropdown"
+    }, uniqueDropdownId => React__namespace.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 = {
@@ -1834,13 +1861,13 @@ const _generateStyles = (light, placeholder, error) => {
     newStyles = {
       default: {
         background: error ? tokens__namespace.color.fadedRed8 : tokens__namespace.color.white,
-        borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.offBlack16,
+        borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.offBlack50,
         borderWidth: tokens__namespace.border.width.hairline,
         color: placeholder ? tokens__namespace.color.offBlack64 : tokens__namespace.color.offBlack,
         ":hover:not([aria-disabled=true])": focusHoverStyling,
         ["@media not (hover: hover)"]: {
           ":hover:not([aria-disabled=true])": {
-            borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.offBlack16,
+            borderColor: error ? tokens__namespace.color.red : tokens__namespace.color.offBlack50,
             borderWidth: tokens__namespace.border.width.hairline,
             paddingLeft: tokens__namespace.spacing.medium_16,
             paddingRight: tokens__namespace.spacing.small_12
@@ -1962,7 +1989,7 @@ class SingleSelect extends React__namespace.Component {
     } = this.props;
     return this.mapOptionItemsToDropdownItems(isFilterable ? this.filterChildren(children) : children);
   }
-  renderOpener(isDisabled) {
+  renderOpener(isDisabled, dropdownId) {
     const _this$props = this.props,
       {
         children,
@@ -1978,23 +2005,32 @@ class SingleSelect extends React__namespace.Component {
     const items = React__namespace.Children.toArray(children);
     const selectedItem = items.find(option => option.props.value === selectedValue);
     const menuText = selectedItem ? getLabel(selectedItem.props) : placeholder;
-    const dropdownOpener = opener ? React__namespace.createElement(DropdownOpener, {
-      onClick: this.handleClick,
-      disabled: isDisabled,
-      ref: this.handleOpenerRef,
-      text: menuText,
-      opened: this.state.open
-    }, opener) : React__namespace.createElement(SelectOpener, _extends({}, sharedProps, {
-      disabled: isDisabled,
+    const dropdownOpener = React__namespace.createElement(wonderBlocksCore.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__namespace.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__namespace.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() {
@@ -2011,7 +2047,8 @@ class SingleSelect extends React__namespace.Component {
       style,
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
-      disabled
+      disabled,
+      dropdownId
     } = this.props;
     const {
       searchText
@@ -2020,8 +2057,11 @@ class SingleSelect extends React__namespace.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__namespace.createElement(DropdownCore$1, {
+    return React__namespace.createElement(wonderBlocksCore.IDProvider, {
+      id: dropdownId,
+      scope: "single-select-dropdown"
+    }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {
+      id: uniqueDropdownId,
       role: "listbox",
       selectionType: "single",
       alignment: alignment,
@@ -2033,7 +2073,7 @@ class SingleSelect extends React__namespace.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,
@@ -2044,7 +2084,7 @@ class SingleSelect extends React__namespace.Component {
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
       disabled: isDisabled
-    });
+    }));
   }
 }
 SingleSelect.defaultProps = {
@@ -2269,7 +2309,7 @@ class MultiSelect extends React__namespace.Component {
     }
     return [...lastSelectedItems, ...restOfTheChildren.map(this.mapOptionItemToDropdownItem)];
   }
-  renderOpener(allChildren, isDisabled) {
+  renderOpener(allChildren, isDisabled, dropdownId) {
     const _this$props = this.props,
       {
         id,
@@ -2282,22 +2322,31 @@ class MultiSelect extends React__namespace.Component {
       noneSelected
     } = this.state.labels;
     const menuText = this.getMenuText(allChildren);
-    const dropdownOpener = opener ? React__namespace.createElement(DropdownOpener, {
-      onClick: this.handleClick,
-      disabled: isDisabled,
-      ref: this.handleOpenerRef,
-      text: menuText,
-      opened: this.state.open
-    }, opener) : React__namespace.createElement(SelectOpener, _extends({}, sharedProps, {
-      disabled: isDisabled,
+    const dropdownOpener = React__namespace.createElement(wonderBlocksCore.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__namespace.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__namespace.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() {
@@ -2311,7 +2360,8 @@ class MultiSelect extends React__namespace.Component {
       isFilterable,
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
-      disabled
+      disabled,
+      dropdownId
     } = this.props;
     const {
       open,
@@ -2327,8 +2377,11 @@ class MultiSelect extends React__namespace.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__namespace.createElement(DropdownCore$1, {
+    return React__namespace.createElement(wonderBlocksCore.IDProvider, {
+      id: dropdownId,
+      scope: "multi-select-dropdown"
+    }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {
+      id: uniqueDropdownId,
       role: "listbox",
       alignment: alignment,
       dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
@@ -2337,7 +2390,7 @@ class MultiSelect extends React__namespace.Component {
       light: light,
       onOpenChanged: this.handleOpenChanged,
       open: open,
-      opener: opener,
+      opener: this.renderOpener(allChildren, isDisabled, uniqueDropdownId),
       openerElement: this.state.openerElement,
       selectionType: "multi",
       style: style,
@@ -2353,7 +2406,7 @@ class MultiSelect extends React__namespace.Component {
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
       disabled: isDisabled
-    });
+    }));
   }
 }
 MultiSelect.defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "5.3.8",
+  "version": "5.4.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-cell": "^3.3.7",
-    "@khanacademy/wonder-blocks-clickable": "^4.2.2",
+    "@khanacademy/wonder-blocks-cell": "^3.4.0",
+    "@khanacademy/wonder-blocks-clickable": "^4.2.3",
     "@khanacademy/wonder-blocks-core": "^6.4.1",
     "@khanacademy/wonder-blocks-icon": "^4.1.1",
     "@khanacademy/wonder-blocks-layout": "^2.1.0",
-    "@khanacademy/wonder-blocks-modal": "^5.1.5",
-    "@khanacademy/wonder-blocks-search-field": "^2.2.16",
+    "@khanacademy/wonder-blocks-modal": "^5.1.6",
+    "@khanacademy/wonder-blocks-search-field": "^2.2.18",
     "@khanacademy/wonder-blocks-timing": "^5.0.0",
     "@khanacademy/wonder-blocks-tokens": "^1.3.0",
     "@khanacademy/wonder-blocks-typography": "^2.1.12"
@@ -39,7 +39,7 @@
     "react-window": "^1.8.5"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^6.3.2",
+    "@khanacademy/wonder-blocks-button": "^6.3.3",
     "@khanacademy/wb-dev-build-settings": "^1.0.0"
   }
 }