@khanacademy/wonder-blocks-tabs 0.0.0-PR2910-20251216214914 → 0.0.0-PR2910-20251217181751

package/CHANGELOG.md

@@ -1,11 +1,15 @@
 # @khanacademy/wonder-blocks-tabs
 
-## 0.0.0-PR2910-20251216214914
+## 0.0.0-PR2910-20251217181751
 
 ### Minor Changes
 
 - 27a30ad: Adds TabsDropdown component
 
+### Patch Changes
+
+- 75b5418: TabsDropdown: Improve a11y
+
 ## 0.4.1
 
 ### Patch Changes

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
+import { AriaLabelOrAriaLabelledby } from "./types";
 type TabDropdownItem = {
     /**
      * The label of the tab
@@ -13,14 +14,29 @@ type TabDropdownItem = {
      * The contents for the tab
      */
     panel: React.ReactNode;
+    /**
+     * Optional test ID for e2e testing of the menu item.
+     */
+    testId?: string;
 };
-type Props = {
+type Props = AriaLabelOrAriaLabelledby & {
     /**
-     * A unique id for the component.
+     * A unique id for the component. If not provided, a unique base id will be
+     * generated automatically.
+     *
+     * Here is how the id is used for the different elements in the component:
+     * - The root will have an id of `${id}`
+     * - The opener will have an id of `${id}-opener`
+     * - The panel will have an id of `${id}-panel`
      */
     id?: string;
     /**
      * Optional test ID for e2e testing.
+     *
+     * Here is how the testId is used for the different elements in the component:
+     * - The root will have a testId of `${testId}`
+     * - The opener will have a testId of `${testId}-opener`
+     * - The panel will have a testId of `${testId}-panel`
      */
     testId?: string;
     /**

package/dist/components/tabs.d.ts

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { AriaProps, PropsFor, StyleType } from "@khanacademy/wonder-blocks-core";
 import { Tab } from "./tab";
+import { AriaLabelOrAriaLabelledby } from "./types";
 export type TabRenderProps = Omit<PropsFor<typeof Tab>, "children">;
 export type TabItem = AriaProps & {
     /**
@@ -36,24 +37,6 @@ export type TabItem = AriaProps & {
      */
     testId?: string;
 };
-/**
- * Type to help ensure aria-label or aria-labelledby is set.
- */
-type AriaLabelOrAriaLabelledby = {
-    /**
-     * If there is no visible label for the tabs, set aria-label to a
-     * label describing the tabs.
-     */
-    "aria-label": string;
-    "aria-labelledby"?: never;
-} | {
-    /**
-     * If the tabs have a visible label, set aria-labelledby to a value
-     * that refers to the labelling element.
-     */
-    "aria-labelledby": string;
-    "aria-label"?: never;
-};
 type Props = {
     /**
      * A unique id to use as the base of the ids for the elements within the

package/dist/components/types.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Type to help ensure aria-label or aria-labelledby is set.
+ */
+export type AriaLabelOrAriaLabelledby = {
+    /**
+     * If there is no visible label for the tabs, set aria-label to a
+     * label describing the tabs.
+     */
+    "aria-label": string;
+    "aria-labelledby"?: never;
+} | {
+    /**
+     * If the tabs have a visible label, set aria-labelledby to a value
+     * that refers to the labelling element.
+     */
+    "aria-labelledby": string;
+    "aria-label"?: never;
+};

package/package.json

@@ -3,7 +3,7 @@
   "description": "Tabs are used to control what content is shown",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "0.0.0-PR2910-20251216214914",
+  "version": "0.0.0-PR2910-20251217181751",
   "publishConfig": {
     "access": "public"
   },
@@ -21,11 +21,11 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@phosphor-icons/core": "^2.0.2",
-    "@khanacademy/wonder-blocks-core": "12.4.2",
     "@khanacademy/wonder-blocks-button": "11.2.10",
-    "@khanacademy/wonder-blocks-icon": "5.3.5",
-    "@khanacademy/wonder-blocks-tokens": "14.1.3",
+    "@khanacademy/wonder-blocks-core": "12.4.2",
     "@khanacademy/wonder-blocks-dropdown": "10.6.1",
+    "@khanacademy/wonder-blocks-tokens": "14.1.3",
+    "@khanacademy/wonder-blocks-icon": "5.3.5",
     "@khanacademy/wonder-blocks-typography": "4.2.27"
   },
   "peerDependencies": {