docs: add accessibility docs to Tooltip component

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.`.