docs: add accessibility docs to Tooltip component

docs/src/__examples__/Tooltip/INDICATION.tsx

@@ -25,8 +25,10 @@ export default {
                 <Text>An open source design system for your next travel project.</Text>
               </Stack>
             }
+            aria-label="Orbit design system"
+            aria-labelledby="orbit-success"
           >
-            <Text>Orbit</Text>
+            <Text id="orbit-app">Orbit</Text>
           </Tooltip>{" "}
           a try.
         </Text>
@@ -41,15 +43,21 @@ export default {
                 <Text>An open source design system for your next travel project.</Text>
               </Stack>
             }
+            aria-label="Orbit design system"
+            aria-labelledby="orbit-success"
           >
-            <Text>Orbit </Text>
+            <Text id="orbit-success">Orbit </Text>
           </Tooltip>
           a try.
         </Alert>
         <Alert icon={<Visa />} type="warning">
           You
-          <Tooltip content={<Text>Check with your embassy.</Text>}>
-            <Text>may need a visa </Text>
+          <Tooltip
+            content={<Text>Check with your embassy.</Text>}
+            aria-label="You may need a visa"
+            aria-labelledby="orbit-warning"
+          >
+            <Text id="orbit-warning">may need a visa </Text>
           </Tooltip>
           for your trip.
         </Alert>
@@ -65,8 +73,10 @@ export default {
                 <Text>An open source design system for your next travel project.</Text>
               </Stack>
             }
+            aria-label="Orbit design system"
+            aria-labelledby="orbit"
           >
-            <Text>Orbit</Text>
+            <Text id="orbit">Orbit</Text>
           </Tooltip>
         </Text>
       </Stack>

docs/src/documentation/03-components/04-overlay/tooltip/03-accessibility.mdx

@@ -0,0 +1,80 @@
+---
+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 it includes the following properties that allow to improve the experience for users of assistive technologies:
+
+| Name            | Type     | Description                                                                               |
+| :-------------- | :------- | :---------------------------------------------------------------------------------------- |
+| aria-label      | `string` | Adds `aria-label` attribute to the rendered tooltip element. Announced by screen readers. |
+| aria-labelledby | `string` | Id(s) of elements that announce the component to screen readers.                          |
+
+The mentioned props are optional, but highly recommended to use to ensure the best accessibility experience for all users.
+
+The `aria-label` prop can be used to provide a label for the tooltip that is announced by screen readers but is not visible on the screen.
+
+The `aria-labelledby` prop can reference multiple ids, separated by a space. The value of the attribute is not announced by the screen reader, but the content of the referred element(s) is.
+
+The conjugation of these properties allows to provide a content of tooltip component to users of assistive technologies.
+
+For example, the following code snippet shows how to use these properties:
+
+```jsx
+<Tooltip
+  content={
+    <div>
+      <p>Lorem ipsum dolor sit amet</p>
+    </div>
+  }
+  aria-label="Tooltip label"
+  aria-labelledby="tooltip-labelledby"
+>
+  <Text id="tooltip-labelledby">Hello world.</Text>
+</Tooltip>
+```
+
+Note that attribute `aria-labelledby` is connected with `id` attribute of the component that is the base for the Tooltip. Without that connection, the `aria-labelledby` attribute is ignored and the content of the element with specific id is not announced by screen reader.
+
+The content of attribute `aria-labelledby` is prioritized over the content of `aria-label`.
+
+### Examples
+
+1. Prop `id` in `<Text>` component is not filled in, content of `aria-label` is read by screen reader. Then the content inside the tooltip is read by screen reader. Content of `aria-labelledby` is ignored.
+
+```jsx
+<Tooltip
+  content={
+    <div>
+      <p>Lorem ipsum dolor sit amet</p>
+    </div>
+  }
+  aria-label="Tooltip label"
+  aria-labelledby="tooltip-labelledby"
+>
+  <Text>Hello world.</Text>
+</Tooltip>
+```
+
+2. Prop `id` in `<Text>` component is filled in with the same value passed to `aria-labelledby`. The content of this component (`Hello world`) is read by the screen reader. The value of `aria-label` is not read at all.
+
+```jsx
+<Tooltip
+  content={
+    <div>
+      <p>Lorem ipsum dolor sit amet</p>
+    </div>
+  }
+  aria-label="Tooltip label"
+  aria-labelledby="tooltip-labelledby"
+>
+  <Text id="tooltip-labelledby">Hello world.</Text>
+</Tooltip>
+```