From be55c079688dc5e8d25a9d2f9e657611bd373fdf Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org@khanacademy.org>
Date: Thu, 20 Nov 2025 13:14:58 -0500
Subject: [PATCH] [aib-pressed-state] Add aria-pressed example

---
 .../activity-icon-button.stories.tsx          | 46 +++++++++++++++++++
 .../src/components/activity-icon-button.tsx   |  6 +++
 2 files changed, 52 insertions(+)

diff --git a/__docs__/wonder-blocks-icon-button/activity-icon-button.stories.tsx b/__docs__/wonder-blocks-icon-button/activity-icon-button.stories.tsx
index e64fe7394d..e5ddb25bd6 100644
--- a/__docs__/wonder-blocks-icon-button/activity-icon-button.stories.tsx
+++ b/__docs__/wonder-blocks-icon-button/activity-icon-button.stories.tsx
@@ -247,3 +247,49 @@ export const WithCustomIcon: StoryComponentType = {
         );
     },
 };
+
+/**
+ * ActivityIconButton can be configured to be toggleable. This is useful for
+ * features like toggling a microphone on and off.
+ *
+ * Note that the `aria-pressed` attribute is used to indicate the toggle state
+ * of the button. This is important for accessibility, as it allows screen
+ * readers to announce the current state of the button to users.
+ */
+export const Toggleable: StoryComponentType = {
+    render: function Render() {
+        const [on, setOn] = React.useState(false);
+        return (
+            <View
+                style={{
+                    gap: sizing.size_080,
+                    flexDirection: "row",
+                    placeItems: "center",
+                }}
+            >
+                <ActivityIconButton
+                    icon={
+                        on
+                            ? IconMappings.pencilSimpleBold
+                            : IconMappings.pencilSimple
+                    }
+                    onClick={(e) => {
+                        setOn(!on);
+                        action("clicked")(e);
+                    }}
+                    kind="secondary"
+                    label="Toggleable"
+                    aria-pressed={on}
+                />
+                <ActivityIconButton
+                    icon={IconMappings.pencilSimple}
+                    onClick={(e) => {
+                        action("clicked")(e);
+                    }}
+                    kind="secondary"
+                    label="Normal button"
+                />
+            </View>
+        );
+    },
+};
diff --git a/packages/wonder-blocks-icon-button/src/components/activity-icon-button.tsx b/packages/wonder-blocks-icon-button/src/components/activity-icon-button.tsx
index 41bf01cb6b..fde1852f92 100644
--- a/packages/wonder-blocks-icon-button/src/components/activity-icon-button.tsx
+++ b/packages/wonder-blocks-icon-button/src/components/activity-icon-button.tsx
@@ -271,6 +271,12 @@ const _generateStyles = (
 
             [":is(:active) .chonky" as any]: chonkyPressed,
 
+            [":is([aria-pressed=true]) .chonky" as any]: {
+                ...chonkyPressed,
+                paddingBlock: "1.6rem",
+                transform: "none",
+            },
+
             // :focus-visible -> Provide focus styles for keyboard users only.
             ...focusStyles.focus,
         },