@khanacademy/wonder-blocks-dropdown 2.7.2 → 2.7.5

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.7.5
+
+### Patch Changes
+
+-   Updated dependencies [85c31780]
+    -   @khanacademy/wonder-blocks-button@3.0.0
+
+## 2.7.4
+
+### Patch Changes
+
+-   Updated dependencies [83486dba]
+    -   @khanacademy/wonder-blocks-icon@1.2.29
+    -   @khanacademy/wonder-blocks-button@2.11.7
+    -   @khanacademy/wonder-blocks-icon-button@3.4.8
+    -   @khanacademy/wonder-blocks-modal@2.3.3
+    -   @khanacademy/wonder-blocks-search-field@1.0.6
+
+## 2.7.3
+
+### Patch Changes
+
+-   d0a76cf5: Add live region to announce the number of options (fixing an iOS issue)
+
 ## 2.7.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -719,6 +719,7 @@ function DropdownPopper({
 }
 
 const VIRTUALIZE_THRESHOLD = 125;
+const StyledSpan = addStyle("span");
 
 class DropdownCore extends React.Component {
   static sameItemsFocusable(prevItems, currentItems) {
@@ -1201,6 +1202,24 @@ class DropdownCore extends React.Component {
     }, isReferenceHidden => this.renderDropdownMenu(listRenderer, isReferenceHidden));
   }
 
+  renderLiveRegion() {
+    const {
+      items,
+      open
+    } = this.props;
+    const {
+      labels
+    } = this.state;
+    const totalItems = this.hasSearchBox() ? items.length - 1 : items.length;
+    return React.createElement(StyledSpan, {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "aria-relevant": "additions text",
+      style: styles$3.srOnly,
+      "data-test-id": "dropdown-live-region"
+    }, open && labels.someSelected(totalItems));
+  }
+
   render() {
     const {
       open,
@@ -1213,7 +1232,7 @@ class DropdownCore extends React.Component {
       onKeyUp: this.handleKeyUp,
       style: [styles$3.menuWrapper, style],
       className: className
-    }, opener, open && this.renderDropdown());
+    }, this.renderLiveRegion(), opener, open && this.renderDropdown());
   }
 
 }
@@ -1221,7 +1240,8 @@ class DropdownCore extends React.Component {
 DropdownCore.defaultProps = {
   alignment: "left",
   labels: {
-    noResults: defaultLabels.noResults
+    noResults: defaultLabels.noResults,
+    someSelected: defaultLabels.someSelected
   },
   light: false
 };
@@ -1249,6 +1269,16 @@ const styles$3 = StyleSheet.create({
     color: Color.offBlack64,
     alignSelf: "center",
     marginTop: Spacing.xxSmall_6
+  },
+  srOnly: {
+    border: 0,
+    clip: "rect(0,0,0,0)",
+    height: 1,
+    margin: -1,
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    width: 1
   }
 });
 var DropdownCore$1 = withActionScheduler(DropdownCore);
@@ -2252,7 +2282,8 @@ class MultiSelect extends React.Component {
       searchText
     } = this.state;
     const {
-      noResults
+      noResults,
+      someSelected
     } = this.state.labels;
     const allChildren = React.Children.toArray(children).filter(Boolean);
     const numOptions = allChildren.length;
@@ -2273,7 +2304,8 @@ class MultiSelect extends React.Component {
       onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
       searchText: isFilterable ? searchText : "",
       labels: {
-        noResults
+        noResults,
+        someSelected
       }
     });
   }

package/dist/index.js

@@ -787,6 +787,7 @@ DropdownOpener.defaultProps = {
  */
 
 const VIRTUALIZE_THRESHOLD = 125;
+const StyledSpan = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["addStyle"])("span");
 
 /**
  * A core dropdown component that takes an opener and children to display as
@@ -1401,6 +1402,24 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     }, isReferenceHidden => this.renderDropdownMenu(listRenderer, isReferenceHidden));
   }
 
+  renderLiveRegion() {
+    const {
+      items,
+      open
+    } = this.props;
+    const {
+      labels
+    } = this.state;
+    const totalItems = this.hasSearchBox() ? items.length - 1 : items.length;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledSpan, {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "aria-relevant": "additions text",
+      style: styles.srOnly,
+      "data-test-id": "dropdown-live-region"
+    }, open && labels.someSelected(totalItems));
+  }
+
   render() {
     const {
       open,
@@ -1413,7 +1432,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       onKeyUp: this.handleKeyUp,
       style: [styles.menuWrapper, style],
       className: className
-    }, opener, open && this.renderDropdown());
+    }, this.renderLiveRegion(), opener, open && this.renderDropdown());
   }
 
 }
@@ -1421,7 +1440,8 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 DropdownCore.defaultProps = {
   alignment: "left",
   labels: {
-    noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "e"].noResults
+    noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "e"].noResults,
+    someSelected: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "e"].someSelected
   },
   light: false
 };
@@ -1450,6 +1470,16 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
     color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack64,
     alignSelf: "center",
     marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxSmall_6
+  },
+  srOnly: {
+    border: 0,
+    clip: "rect(0,0,0,0)",
+    height: 1,
+    margin: -1,
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    width: 1
   }
 });
 /* harmony default export */ __webpack_exports__["a"] = (Object(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_8__["withActionScheduler"])(DropdownCore));
@@ -2632,7 +2662,8 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       searchText
     } = this.state;
     const {
-      noResults
+      noResults,
+      someSelected
     } = this.state.labels;
     const allChildren = react__WEBPACK_IMPORTED_MODULE_0__["Children"].toArray(children).filter(Boolean);
     const numOptions = allChildren.length;
@@ -2653,7 +2684,8 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
       searchText: isFilterable ? searchText : "",
       labels: {
-        noResults
+        noResults,
+        someSelected
       }
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.7.2",
+  "version": "2.7.5",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,15 +16,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-button": "^2.11.6",
+    "@khanacademy/wonder-blocks-button": "^3.0.0",
     "@khanacademy/wonder-blocks-clickable": "^2.2.7",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
     "@khanacademy/wonder-blocks-core": "^4.3.2",
-    "@khanacademy/wonder-blocks-icon": "^1.2.28",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.7",
+    "@khanacademy/wonder-blocks-icon": "^1.2.29",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.8",
     "@khanacademy/wonder-blocks-layout": "^1.4.10",
-    "@khanacademy/wonder-blocks-modal": "^2.3.2",
-    "@khanacademy/wonder-blocks-search-field": "^1.0.5",
+    "@khanacademy/wonder-blocks-modal": "^2.3.3",
+    "@khanacademy/wonder-blocks-search-field": "^1.0.6",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-timing": "^2.1.0",
     "@khanacademy/wonder-blocks-typography": "^1.1.32"

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -43,6 +43,25 @@ exports[`wonder-blocks-dropdown example 1 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="menu"
@@ -246,6 +265,25 @@ exports[`wonder-blocks-dropdown example 2 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="menu"
@@ -427,6 +465,25 @@ exports[`wonder-blocks-dropdown example 3 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="menu"
@@ -608,6 +665,25 @@ exports[`wonder-blocks-dropdown example 4 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="menu"
@@ -789,6 +865,25 @@ exports[`wonder-blocks-dropdown example 5 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="menu"
@@ -971,6 +1066,25 @@ exports[`wonder-blocks-dropdown example 6 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="menu"
@@ -1231,6 +1345,25 @@ exports[`wonder-blocks-dropdown example 7 1`] = `
     }
   }
 >
+  <span
+    aria-atomic="true"
+    aria-live="polite"
+    aria-relevant="additions text"
+    className=""
+    data-test-id="dropdown-live-region"
+    style={
+      Object {
+        "border": 0,
+        "clip": "rect(0,0,0,0)",
+        "height": 1,
+        "margin": -1,
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+  />
   <span
     className=""
     data-test-id="teacher-menu-custom-opener"
@@ -1309,6 +1442,25 @@ exports[`wonder-blocks-dropdown example 8 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -1446,6 +1598,25 @@ exports[`wonder-blocks-dropdown example 9 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -1582,6 +1753,25 @@ exports[`wonder-blocks-dropdown example 10 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -1744,6 +1934,25 @@ exports[`wonder-blocks-dropdown example 11 1`] = `
         }
       }
     >
+      <span
+        aria-atomic="true"
+        aria-live="polite"
+        aria-relevant="additions text"
+        className=""
+        data-test-id="dropdown-live-region"
+        style={
+          Object {
+            "border": 0,
+            "clip": "rect(0,0,0,0)",
+            "height": 1,
+            "margin": -1,
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "width": 1,
+          }
+        }
+      />
       <button
         aria-expanded="false"
         aria-haspopup="listbox"
@@ -1881,6 +2090,25 @@ exports[`wonder-blocks-dropdown example 12 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -2036,6 +2264,25 @@ exports[`wonder-blocks-dropdown example 13 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -2174,6 +2421,25 @@ exports[`wonder-blocks-dropdown example 14 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -2389,6 +2655,25 @@ exports[`wonder-blocks-dropdown example 15 1`] = `
     }
   }
 >
+  <span
+    aria-atomic="true"
+    aria-live="polite"
+    aria-relevant="additions text"
+    className=""
+    data-test-id="dropdown-live-region"
+    style={
+      Object {
+        "border": 0,
+        "clip": "rect(0,0,0,0)",
+        "height": 1,
+        "margin": -1,
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+  />
   <h2
     className=""
     data-test-id="single-select-custom-opener"
@@ -2474,6 +2759,25 @@ exports[`wonder-blocks-dropdown example 16 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -2610,6 +2914,25 @@ exports[`wonder-blocks-dropdown example 17 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -2747,6 +3070,25 @@ exports[`wonder-blocks-dropdown example 18 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -2883,6 +3225,25 @@ exports[`wonder-blocks-dropdown example 19 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -3114,6 +3475,25 @@ exports[`wonder-blocks-dropdown example 21 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -3269,6 +3649,25 @@ exports[`wonder-blocks-dropdown example 22 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -3407,6 +3806,25 @@ exports[`wonder-blocks-dropdown example 23 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -3543,6 +3961,25 @@ exports[`wonder-blocks-dropdown example 24 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -3777,6 +4214,25 @@ exports[`wonder-blocks-dropdown example 25 1`] = `
       }
     }
   >
+    <span
+      aria-atomic="true"
+      aria-live="polite"
+      aria-relevant="additions text"
+      className=""
+      data-test-id="dropdown-live-region"
+      style={
+        Object {
+          "border": 0,
+          "clip": "rect(0,0,0,0)",
+          "height": 1,
+          "margin": -1,
+          "overflow": "hidden",
+          "padding": 0,
+          "position": "absolute",
+          "width": 1,
+        }
+      }
+    />
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
@@ -3894,6 +4350,25 @@ exports[`wonder-blocks-dropdown example 26 1`] = `
     }
   }
 >
+  <span
+    aria-atomic="true"
+    aria-live="polite"
+    aria-relevant="additions text"
+    className=""
+    data-test-id="dropdown-live-region"
+    style={
+      Object {
+        "border": 0,
+        "clip": "rect(0,0,0,0)",
+        "height": 1,
+        "margin": -1,
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+  />
   <h2
     className=""
     data-test-id="multi-select-custom-opener"
@@ -3960,6 +4435,25 @@ exports[`wonder-blocks-dropdown example 27 1`] = `
     }
   }
 >
+  <span
+    aria-atomic="true"
+    aria-live="polite"
+    aria-relevant="additions text"
+    className=""
+    data-test-id="dropdown-live-region"
+    style={
+      Object {
+        "border": 0,
+        "clip": "rect(0,0,0,0)",
+        "height": 1,
+        "margin": -1,
+        "overflow": "hidden",
+        "padding": 0,
+        "position": "absolute",
+        "width": 1,
+      }
+    }
+  />
   <button
     aria-expanded="false"
     aria-haspopup="listbox"

package/src/components/{action-menu.stories.js → __docs__/action-menu.stories.js}

@@ -2,8 +2,8 @@
 import * as React from "react";
 
 import type {StoryComponentType} from "@storybook/react";
-import ActionMenu from "./action-menu.js";
-import ActionItem from "./action-item.js";
+import ActionMenu from "../action-menu.js";
+import ActionItem from "../action-item.js";
 
 export default {
     title: "Dropdown / ActionMenu",

package/src/components/{multi-select.stories.js → __docs__/multi-select.stories.js}

@@ -7,7 +7,7 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import type {Labels} from "@khanacademy/wonder-blocks-dropdown";
 import type {StoryComponentType} from "@storybook/react";
 
-import {MultiSelect, OptionItem} from "../index.js";
+import {MultiSelect, OptionItem} from "../../index.js";
 
 export default {
     title: "Dropdown / MultiSelect",

package/src/components/{single-select.stories.js → __docs__/single-select.stories.js}

@@ -11,7 +11,7 @@ import {Body} from "@khanacademy/wonder-blocks-typography";
 
 import type {StoryComponentType} from "@storybook/react";
 
-import {SingleSelect, OptionItem} from "../index.js";
+import {SingleSelect, OptionItem} from "../../index.js";
 
 export default {
     title: "Dropdown / SingleSelect",

package/src/components/__tests__/dropdown-core.test.js

@@ -31,6 +31,19 @@ const items = [
     },
 ];
 
+const searchFieldItem = {
+    component: (
+        <SearchTextInput
+            testId="search-text-input"
+            key="search-text-input"
+            onChange={jest.fn()}
+            searchText={""}
+        />
+    ),
+    focusable: true,
+    populatedProps: {},
+};
+
 describe("DropdownCore", () => {
     it("should throw for invalid role", () => {
         // Arrange
@@ -342,18 +355,7 @@ describe("DropdownCore", () => {
                 searchText=""
                 // mock the items
                 items={[
-                    {
-                        component: (
-                            <SearchTextInput
-                                testId="search"
-                                key="search-text-input"
-                                onChange={jest.fn()}
-                                searchText={""}
-                            />
-                        ),
-                        focusable: true,
-                        populatedProps: {},
-                    },
+                    searchFieldItem,
                     {
                         component: (
                             <OptionItem
@@ -754,21 +756,7 @@ describe("DropdownCore", () => {
                     onSearchTextChanged={jest.fn()}
                     searchText=""
                     // mock the items
-                    items={[
-                        {
-                            component: (
-                                <SearchTextInput
-                                    testId="search-text-input"
-                                    key="search-text-input"
-                                    onChange={jest.fn()}
-                                    searchText={""}
-                                />
-                            ),
-                            focusable: true,
-                            populatedProps: {},
-                        },
-                        ...optionItems,
-                    ]}
+                    items={[searchFieldItem, ...optionItems]}
                     role="listbox"
                     open={true}
                     // mock the opener elements
@@ -797,21 +785,7 @@ describe("DropdownCore", () => {
                     onSearchTextChanged={jest.fn()}
                     searchText=""
                     // mock the items
-                    items={[
-                        {
-                            component: (
-                                <SearchTextInput
-                                    testId="search-text-input"
-                                    key="search-text-input"
-                                    onChange={jest.fn()}
-                                    searchText={""}
-                                />
-                            ),
-                            focusable: true,
-                            populatedProps: {},
-                        },
-                        ...optionItems,
-                    ]}
+                    items={[searchFieldItem, ...optionItems]}
                     role="listbox"
                     open={true}
                     // mock the opener elements
@@ -833,4 +807,53 @@ describe("DropdownCore", () => {
             });
         });
     });
+
+    describe("a11y > Live region", () => {
+        it("should render a live region announcing the number of options", async () => {
+            // Arrange
+
+            // Act
+            const {container} = render(
+                <DropdownCore
+                    initialFocusedIndex={undefined}
+                    onSearchTextChanged={jest.fn()}
+                    // mock the items (3 options)
+                    items={items}
+                    role="listbox"
+                    open={true}
+                    // mock the opener elements
+                    opener={<button />}
+                    openerElement={null}
+                    onOpenChanged={jest.fn()}
+                />,
+            );
+
+            // Assert
+            expect(container).toHaveTextContent("3 items");
+        });
+
+        it("shouldn't include the search field as part of the options", async () => {
+            // Arrange
+
+            // Act
+            const {container} = render(
+                <DropdownCore
+                    initialFocusedIndex={undefined}
+                    onSearchTextChanged={jest.fn()}
+                    searchText=""
+                    // mock the items (3 options + search field)
+                    items={[searchFieldItem, ...items]}
+                    role="listbox"
+                    open={true}
+                    // mock the opener elements
+                    opener={<button />}
+                    openerElement={null}
+                    onOpenChanged={jest.fn()}
+                />,
+            );
+
+            // Assert
+            expect(container).toHaveTextContent("3 items");
+        });
+    });
 });

package/src/components/__tests__/multi-select.test.js

@@ -4,6 +4,8 @@ import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
+import {ngettext} from "@khanacademy/wonder-blocks-i18n";
+
 import OptionItem from "../option-item.js";
 import MultiSelect from "../multi-select.js";
 
@@ -1187,4 +1189,59 @@ describe("MultiSelect", () => {
             ).toBeInTheDocument();
         });
     });
+
+    describe("a11y > Live region", () => {
+        it("should announce the number of options when the listbox is open", async () => {
+            // Arrange
+            const labels: $Shape<Labels> = {
+                someSelected: (numOptions: number): string =>
+                    ngettext("%(num)s school", "%(num)s schools", numOptions),
+            };
+
+            // Act
+            const {container} = render(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    isFilterable={true}
+                    labels={labels}
+                    opened={true}
+                >
+                    <OptionItem label="school 1" value="1" />
+                    <OptionItem label="school 2" value="2" />
+                    <OptionItem label="school 3" value="3" />
+                </MultiSelect>,
+            );
+
+            // Assert
+            expect(container).toHaveTextContent("3 schools");
+        });
+
+        it("should change the number of options after using the search filter", async () => {
+            // Arrange
+            const labels: $Shape<Labels> = {
+                someSelected: (numOptions: number): string =>
+                    ngettext("%(num)s planet", "%(num)s planets", numOptions),
+            };
+
+            const {container} = render(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    isFilterable={true}
+                    shortcuts={true}
+                    labels={labels}
+                    opened={true}
+                >
+                    <OptionItem label="Earth" value="earth" />
+                    <OptionItem label="Venus" value="venus" />
+                    <OptionItem label="Mars" value="mars" />
+                </MultiSelect>,
+            );
+
+            // Act
+            userEvent.paste(screen.getByRole("textbox"), "Ear");
+
+            // Assert
+            expect(container).toHaveTextContent("1 planet");
+        });
+    });
 });

package/src/components/__tests__/single-select.test.js

@@ -692,4 +692,34 @@ describe("SingleSelect", () => {
             expect(dropdownMenu).toHaveStyle("max-height: 200px");
         });
     });
+
+    describe("a11y > Live region", () => {
+        it("should change the number of options after using the search filter", async () => {
+            // Arrange
+            render(
+                <SingleSelect
+                    onChange={onChange}
+                    placeholder="Choose"
+                    isFilterable={true}
+                    opened={true}
+                >
+                    <OptionItem label="item 0" value="0" />
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            userEvent.paste(screen.getByRole("textbox"), "item 0");
+
+            // Assert
+            const liveRegionText = screen.getByTestId(
+                "dropdown-live-region",
+            ).textContent;
+
+            // TODO(WB-1318): Change this assertion to `1 item` after adding the
+            // `labels` prop to the component.
+            expect(liveRegionText).toEqual("1 items");
+        });
+    });
 });

package/src/components/dropdown-core.js

@@ -10,7 +10,7 @@ import {VariableSizeList as List} from "react-window";
 import Color, {fade} from "@khanacademy/wonder-blocks-color";
 
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {View} from "@khanacademy/wonder-blocks-core";
+import {addStyle, View} from "@khanacademy/wonder-blocks-core";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {withActionScheduler} from "@khanacademy/wonder-blocks-timing";
 
@@ -42,8 +42,17 @@ import {
  */
 const VIRTUALIZE_THRESHOLD = 125;
 
+const StyledSpan = addStyle("span");
+
 type Labels = {|
     noResults: string,
+    /**
+     * The number total of items available.
+     *
+     * NOTE: We are reusing the same label for both the total number of items
+     * and the number of selected items.
+     */
+    someSelected: (numOptions: number) => string,
 |};
 
 // we need to define a DefaultProps type to allow the HOC expose the default
@@ -212,6 +221,7 @@ class DropdownCore extends React.Component<Props, State> {
         alignment: "left",
         labels: {
             noResults: defaultLabels.noResults,
+            someSelected: defaultLabels.someSelected,
         },
         light: false,
     };
@@ -837,6 +847,26 @@ class DropdownCore extends React.Component<Props, State> {
         );
     }
 
+    renderLiveRegion(): React.Node {
+        const {items, open} = this.props;
+        const {labels} = this.state;
+        const totalItems = this.hasSearchBox()
+            ? items.length - 1
+            : items.length;
+
+        return (
+            <StyledSpan
+                aria-live="polite"
+                aria-atomic="true"
+                aria-relevant="additions text"
+                style={styles.srOnly}
+                data-test-id="dropdown-live-region"
+            >
+                {open && labels.someSelected(totalItems)}
+            </StyledSpan>
+        );
+    }
+
     render(): React.Node {
         const {open, opener, style, className} = this.props;
 
@@ -847,6 +877,7 @@ class DropdownCore extends React.Component<Props, State> {
                 style={[styles.menuWrapper, style]}
                 className={className}
             >
+                {this.renderLiveRegion()}
                 {opener}
                 {open && this.renderDropdown()}
             </View>
@@ -884,6 +915,17 @@ const styles = StyleSheet.create({
         alignSelf: "center",
         marginTop: Spacing.xxSmall_6,
     },
+
+    srOnly: {
+        border: 0,
+        clip: "rect(0,0,0,0)",
+        height: 1,
+        margin: -1,
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        width: 1,
+    },
 });
 
 type ExportProps = WithoutActionScheduler<

package/src/components/multi-select.js

@@ -556,7 +556,7 @@ export default class MultiSelect extends React.Component<Props, State> {
             isFilterable,
         } = this.props;
         const {open, searchText} = this.state;
-        const {noResults} = this.state.labels;
+        const {noResults, someSelected} = this.state.labels;
 
         const allChildren = React.Children.toArray(children).filter(Boolean);
         const numOptions = allChildren.length;
@@ -590,6 +590,7 @@ export default class MultiSelect extends React.Component<Props, State> {
                 searchText={isFilterable ? searchText : ""}
                 labels={{
                     noResults,
+                    someSelected,
                 }}
             />
         );