From a741541d6cd9909a68ea8baca3f8eb5cecf8ca30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs?= <balazs@otakomaiya.com>
Date: Fri, 3 Jan 2025 17:05:21 +0100
Subject: [PATCH] Include accessibility callout for IconButton

---
 data/themes/docs/components/icon-button.mdx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/data/themes/docs/components/icon-button.mdx b/data/themes/docs/components/icon-button.mdx
index 11980f18b..dd7e658c7 100644
--- a/data/themes/docs/components/icon-button.mdx
+++ b/data/themes/docs/components/icon-button.mdx
@@ -18,6 +18,22 @@ This component is based on the `button` element and supports [common margin prop
 
 ## Examples
 
+{
+
+<Callout.Root my="5" color="gray">
+  <Callout.Icon>
+    <InfoCircledIcon />
+  </Callout.Icon>
+  <Callout.Text>
+    It's strongly recommended to include
+    an <Code>aria-label</Code> prop on <Code>IconButton</Code> components since
+    they don't contain visible text.
+    Screen readers rely on this label to announce the button's purpose to users.
+  </Callout.Text>
+</Callout.Root>
+
+}
+
 ### Size
 
 Use the `size` prop to control the size of the button.