@khanacademy/wonder-blocks-dropdown - npm Package Compare versions

Comparing version 0.0.0-PR2449-20250130215537 to 0.0.0-PR2450-20250130232235

CHANGELOG.md

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

dist/components/dropdown-core.d.ts

 import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 import type { DropdownItem } from "../util/types";
-type Labels = {
+type LabelsValues = {
     /**
@@ -119,3 +119,3 @@ * Label for describing the dismiss icon on the search filter.
      */
-    labels?: Labels;
+    labels?: LabelsValues;
     /**
@@ -122,0 +122,0 @@ * Used to determine if we can automatically select an item using the keyboard.

dist/components/dropdown-opener.d.ts

@@ -31,3 +31,3 @@ import * as React from "react";
     /**
-     * Text for the opener that can be passed to the child as an argument.
+     * Content for the opener that can be passed to the child as an argument.
      */
@@ -47,2 +47,6 @@ text: OptionLabel;
     error?: boolean;
+    /**
+     * The role of the opener.
+     */
+    role: "combobox" | "button";
 };
@@ -49,0 +53,0 @@ type DefaultProps = {

dist/components/multi-select.d.ts

@@ -5,3 +5,3 @@ import * as React from "react";
 import type { OpenerProps } from "../util/types";
-export type Labels = {
+export type LabelsValues = {
     /**
@@ -16,3 +16,3 @@ * Label for describing the dismiss icon on the search filter.
     /**
-     * Label for when the filter returns no results.
+     * Value for when the filter returns no results.
      */
@@ -29,11 +29,11 @@ noResults: string;
     /**
-     * Label for the opening component when there are no items selected.
+     * Value for the opening component when there are no items selected.
      */
     noneSelected: string;
     /**
-     * Label for the opening component when there are some items selected.
+     * Value for the opening component when there are some items selected.
      */
     someSelected: (numOptions: number) => string;
     /**
-     * Label for the opening component when all the items have been selected.
+     * Value for the opening component when all the items have been selected.
      */
@@ -66,4 +66,4 @@ allSelected: string;
     /**
-     * When false, the SelectOpener can show a Node as a label. When true, the
-     * SelectOpener will use a string as a label. If using custom OptionItems, a
+     * When false, the SelectOpener can show a Node as a value. When true, the
+     * SelectOpener will use a string as a value. If using custom OptionItems, a
      * plain text label can be provided with the `labelAsText` prop.
@@ -101,5 +101,5 @@ * Defaults to true.
     /**
-     * The object containing the custom labels used inside this component.
+     * The object containing the custom labels and placeholder values used inside this component.
      */
-    labels?: Labels;
+    labels?: LabelsValues;
     /**
@@ -185,2 +185,5 @@ * Callback for when the selection changes. Parameter is an updated array of
  *
+ * Clients are also responsible for labeling the select using `LabeledField`, or
+ * an `aria-label` attribute or `aria-labelledby` on the select.
+ *
  * The multi select stays open until closed by the user. The onChange callback
@@ -194,3 +197,3 @@ * happens every time there is a change in the selection of the items.
  *
- * <MultiSelect onChange={setSelectedValues} selectedValues={selectedValues}>
+ * <MultiSelect aria-label="Fruits" onChange={setSelectedValues} selectedValues={selectedValues}>
  *  <OptionItem value="pear">Pear</OptionItem>
@@ -197,0 +200,0 @@ *  <OptionItem value="mango">Mango</OptionItem>

dist/components/select-opener.d.ts

 import * as React from "react";
-import type { AriaProps } from "@khanacademy/wonder-blocks-core";
+import { type AriaProps } from "@khanacademy/wonder-blocks-core";
 import { OptionLabel } from "../util/types";
@@ -29,2 +29,6 @@ type SelectOpenerProps = AriaProps & {
     /**
+     * A label to expose on the opener, in the absence of an associated label element or `aria-labelledby`.
+     */
+    ariaLabel?: string;
+    /**
      * Callback for when the SelectOpener is pressed.
@@ -31,0 +35,0 @@ */

dist/components/single-select.d.ts

@@ -5,5 +5,5 @@ import * as React from "react";
 import type { OpenerProps } from "../util/types";
-export type SingleSelectLabels = {
+export type SingleSelectLabelsValues = {
     /**
-     * Label for describing the dismiss icon on the search filter.
+     * Label to create an accessible name for the dismiss icon on the search filter.
      */
@@ -16,7 +16,7 @@ clearSearch: string;
     /**
-     * Label for when the filter returns no results.
+     * Value for when the filter returns no results.
      */
     noResults: string;
     /**
-     * Label for the opening component when there are some items selected.
+     * Value for the opening component when there are some items selected.
      */
@@ -59,8 +59,8 @@ someResults: (numOptions: number) => string;
     /**
-     * The object containing the custom labels used inside this component.
+     * The object containing the custom labels and placeholder values used inside this component.
      */
-    labels?: SingleSelectLabels;
+    labels?: SingleSelectLabelsValues;
     /**
-     * When false, the SelectOpener can show a Node as a label. When true, the
-     * SelectOpener will use a string as a label. If using custom OptionItems, a
+     * When false, the SelectOpener can show a Node as a value. When true, the
+     * SelectOpener will use a string as a value. If using custom OptionItems, a
      * plain text label can be provided with the `labelAsText` prop.
@@ -97,3 +97,4 @@ * Defaults to true.
     /**
-     * Placeholder for the opening component when there are no items selected.
+     * Placeholder value for the opening component when there are no items selected.
+     * Note: a label is still necessary to describe the purpose of the select.
      */
@@ -179,2 +180,5 @@ placeholder: string;
  *
+ * Clients are also responsible for labeling the select using `LabeledField`, an
+ * `aria-label` attribute, or `aria-labelledby`.
+ *
  * The single select dropdown closes after the selection of an item. If the same
@@ -196,3 +200,3 @@ * item is selected, there is no callback.
  *
- * <SingleSelect placeholder="Choose a fruit" onChange={setSelectedValue} selectedValue={selectedValue}>
+ * <SingleSelect aria-label="Your Favorite Fruits" placeholder="Choose a fruit" onChange={setSelectedValue} selectedValue={selectedValue}>
  *     <OptionItem label="Pear" value="pear" />
@@ -212,2 +216,3 @@ *     <OptionItem label="Mango" value="mango" />
  * <SingleSelect
+ *     aria-label="Your Favorite Fruits"
  *     placeholder="Choose a fruit"
@@ -214,0 +219,0 @@ *     onChange={setSelectedValue}

dist/index.d.ts

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

dist/util/constants.d.ts

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

package.json

 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "0.0.0-PR2449-20250130215537",
+  "version": "0.0.0-PR2450-20250130232235",
   "design": "v1",
@@ -20,13 +20,13 @@ "description": "Dropdown variants for Wonder Blocks.",
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-cell": "^4.0.7",
-    "@khanacademy/wonder-blocks-clickable": "^5.0.7",
-    "@khanacademy/wonder-blocks-core": "^11.1.0",
-    "@khanacademy/wonder-blocks-icon": "^5.0.5",
-    "@khanacademy/wonder-blocks-layout": "^3.0.7",
-    "@khanacademy/wonder-blocks-modal": "0.0.0-PR2449-20250130215537",
-    "@khanacademy/wonder-blocks-pill": "^3.0.7",
-    "@khanacademy/wonder-blocks-search-field": "0.0.0-PR2449-20250130215537",
+    "@khanacademy/wonder-blocks-cell": "0.0.0-PR2450-20250130232235",
+    "@khanacademy/wonder-blocks-clickable": "0.0.0-PR2450-20250130232235",
+    "@khanacademy/wonder-blocks-core": "0.0.0-PR2450-20250130232235",
+    "@khanacademy/wonder-blocks-icon": "0.0.0-PR2450-20250130232235",
+    "@khanacademy/wonder-blocks-layout": "0.0.0-PR2450-20250130232235",
+    "@khanacademy/wonder-blocks-modal": "0.0.0-PR2450-20250130232235",
+    "@khanacademy/wonder-blocks-pill": "0.0.0-PR2450-20250130232235",
+    "@khanacademy/wonder-blocks-search-field": "0.0.0-PR2450-20250130232235",
     "@khanacademy/wonder-blocks-timing": "^6.0.1",
     "@khanacademy/wonder-blocks-tokens": "^4.1.0",
-    "@khanacademy/wonder-blocks-typography": "^3.0.5"
+    "@khanacademy/wonder-blocks-typography": "0.0.0-PR2450-20250130232235"
   },
@@ -45,5 +45,5 @@ "peerDependencies": {
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^7.0.7",
+    "@khanacademy/wonder-blocks-button": "0.0.0-PR2450-20250130232235",
     "@khanacademy/wb-dev-build-settings": "^2.0.0"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

313352

increased by1.15%

Lines of code

8243

increased by0.33%

Dependency changes

• + Added@khanacademy/wonder-blocks-breadcrumbs@0.0.0-PR2450-20250130232235(transitive)

• + Added@khanacademy/wonder-blocks-cell@0.0.0-PR2450-20250130232235(transitive)

• + Added@khanacademy/wonder-blocks-clickable@0.0.0-PR2450-20250130232235(transitive)

• + Added@khanacademy/wonder-blocks-core@0.0.0-PR2450-20250130232235(transitive)

• + Added@khanacademy/wonder-blocks-form@0.0.0-PR2450-20250130232235(transitive)

• + Added@khanacademy/wonder-blocks-icon@0.0.0-PR2450-20250130232235(transitive)

• + Added@khanacademy/wonder-blocks-icon-button@0.0.0-PR2450-20250130232235(transitive)

• + Added@khanacademy/wonder-blocks-layout@0.0.0-PR2450-20250130232235(transitive)

• + Added@khanacademy/wonder-blocks-link@0.0.0-PR2450-20250130232235(transitive)

• + Added@khanacademy/wonder-blocks-modal@0.0.0-PR2450-20250130232235(transitive)

• + Added@khanacademy/wonder-blocks-pill@0.0.0-PR2450-20250130232235(transitive)

• + Added@khanacademy/wonder-blocks-search-field@0.0.0-PR2450-20250130232235(transitive)

• + Added@khanacademy/wonder-blocks-typography@0.0.0-PR2450-20250130232235(transitive)

• - Removed@khanacademy/wonder-blocks-breadcrumbs@3.1.0(transitive)

• - Removed@khanacademy/wonder-blocks-cell@4.1.0(transitive)

• - Removed@khanacademy/wonder-blocks-clickable@5.0.76.1.0(transitive)

• - Removed@khanacademy/wonder-blocks-core@11.1.012.1.0(transitive)

• - Removed@khanacademy/wonder-blocks-form@7.1.0(transitive)

• - Removed@khanacademy/wonder-blocks-icon@5.1.0(transitive)

• - Removed@khanacademy/wonder-blocks-icon-button@0.0.0-PR2449-20250130215537(transitive)

• - Removed@khanacademy/wonder-blocks-layout@3.1.0(transitive)

• - Removed@khanacademy/wonder-blocks-link@7.1.0(transitive)

• - Removed@khanacademy/wonder-blocks-modal@0.0.0-PR2449-20250130215537(transitive)

• - Removed@khanacademy/wonder-blocks-pill@3.1.0(transitive)

• - Removed@khanacademy/wonder-blocks-search-field@0.0.0-PR2449-20250130215537(transitive)

• - Removed@khanacademy/wonder-blocks-typography@3.1.0(transitive)

• Updated@khanacademy/wonder-blocks-cell@0.0.0-PR2450-20250130232235

• Updated@khanacademy/wonder-blocks-clickable@0.0.0-PR2450-20250130232235

• Updated@khanacademy/wonder-blocks-core@0.0.0-PR2450-20250130232235

• Updated@khanacademy/wonder-blocks-icon@0.0.0-PR2450-20250130232235

• Updated@khanacademy/wonder-blocks-layout@0.0.0-PR2450-20250130232235

• Updated@khanacademy/wonder-blocks-modal@0.0.0-PR2450-20250130232235

• Updated@khanacademy/wonder-blocks-pill@0.0.0-PR2450-20250130232235

• Updated@khanacademy/wonder-blocks-search-field@0.0.0-PR2450-20250130232235

• Updated@khanacademy/wonder-blocks-typography@0.0.0-PR2450-20250130232235