From 498ae931a46401579d8cfd1062993056c87c941b Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Fri, 15 Nov 2024 17:54:06 +0100
Subject: [PATCH] docs: add accessibility docs to Tooltip component

---
 .../04-overlay/tooltip/03-accessibility.mdx   | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 docs/src/documentation/03-components/04-overlay/tooltip/03-accessibility.mdx

diff --git a/docs/src/documentation/03-components/04-overlay/tooltip/03-accessibility.mdx b/docs/src/documentation/03-components/04-overlay/tooltip/03-accessibility.mdx
new file mode 100644
index 0000000000..6d579006a0
--- /dev/null
+++ b/docs/src/documentation/03-components/04-overlay/tooltip/03-accessibility.mdx
@@ -0,0 +1,49 @@
+---
+title: Accessibility
+redirect_from:
+  - /components/tooltip/accessibility/
+---
+
+## Accessibility
+
+### Tooltip
+
+The Tooltip component has been designed with accessibility in mind. It can be used with keyboard navigation and includes properties that enhance the experience for users of assistive technologies.
+
+While the `aria-label` and `aria-labelledby` attributes are not needed for the Tooltip component itself, it is important to ensure that the components passed as children to the Tooltip have appropriate ARIA labels. This ensures that the content within the Tooltip is accessible and properly announced by screen readers.
+
+#### Example 1
+
+The content of children component is text, so it is read by screen reader.
+
+```jsx
+<Tooltip
+  content={
+    <div>
+      <p>Lorem ipsum dolor sit amet.</p>
+    </div>
+  }
+>
+  <Text>Learn more.</Text>
+</Tooltip>
+```
+
+The screen reader will announce: `Learn more. Lorem ipsum dolor sit amet.`.
+
+#### Example 2
+
+The children element is an icon component. To achieve the accessibility of the Tooltip, adding an `aria-label` to the icon component is necessary.
+
+```jsx
+<Tooltip
+  content={
+    <div>
+      <p>Lorem ipsum dolor sit amet.</p>
+    </div>
+  }
+>
+  <Icons.Airplane ariaLabel="More information" />
+</Tooltip>
+```
+
+The screen reader will announce: `More information`. After the user activates the icon, the screen reader will announce: `Lorem ipsum dolor sit amet.`.