From 2c9bdb9d31f295918172602920fce1bee20d75b0 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 1/3] 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..8636d1e3cb
--- /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 can be perceived by assistive technologies. This ensures that the Tooltip component is accessible.
+
+#### 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>
+  }
+>
+  <Airplane ariaLabel="More information" />
+</Tooltip>
+```
+
+Once the icon is focused by the screen reader, it will announce: "More information", followed by announcing the content of the tooltip: "Lorem ipsum dolor sit amet.".

From b34cba8e8823574692f8fb6bac94f6cb43b19534 Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Tue, 26 Nov 2024 17:53:04 +0100
Subject: [PATCH 2/3] fix(TooltipPrimitive): remove redundant role attribute

---
 .../components/TooltipContent.tsx             | 83 ++++++++++---------
 1 file changed, 42 insertions(+), 41 deletions(-)

diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/components/TooltipContent.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/components/TooltipContent.tsx
index 93b0855950..76d0e84b2d 100644
--- a/packages/orbit-components/src/primitives/TooltipPrimitive/components/TooltipContent.tsx
+++ b/packages/orbit-components/src/primitives/TooltipPrimitive/components/TooltipContent.tsx
@@ -105,54 +105,55 @@ const TooltipContent = ({
     [onClose, onCloseMobile, elements.floating],
   );
 
+  const handleCombinedClick = (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    handleInnerClick(ev);
+    onClick(ev);
+  };
+
   return (
-    // Disabling because the onClick exists just to stop propagation of events
+    // Disabling because the onClick exists to close tooltip when clicking in interactive elements, which should not happen with keyboard.
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-    <div className="w-full" role="tooltip" id={tooltipId} data-test={dataTest} onClick={onClick}>
-      {/* Disabling because the onClick exists to close tooltip when clicking in interactibe elements, which should not happen with keyboard */}
-      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
+    <div
+      className={cx(
+        "rounded-100 px-300 shadow-level3 z-[10012] box-border block w-auto overflow-visible",
+        "duration-fast transition-[visibility,_opacity] ease-in-out",
+        "[&_img]:max-w-full]",
+        contentHeight <= Math.floor(parseFloat(theme.orbit.lineHeightNormal)) ? "py-200" : "py-300",
+        shown ? "visible opacity-100" : "invisible opacity-0",
+        size === "small" && "max-w-[240px]",
+        size === "medium" && "max-w-[380px]",
+        error && "bg-red-normal",
+        !error && help && "bg-blue-normal",
+        !error && !help && "bg-ink-dark",
+      )}
+      ref={refs.setFloating}
+      role="tooltip"
+      id={tooltipId}
+      aria-hidden={!shown}
+      onMouseEnter={onEnter}
+      onMouseLeave={onClose}
+      onClick={handleCombinedClick}
+      style={floatingStyles}
+      data-test={dataTest}
+    >
       <div
         className={cx(
-          "rounded-100 px-300 shadow-level3 z-[10012] box-border block w-auto overflow-visible",
-          "duration-fast transition-[visibility,_opacity] ease-in-out",
-          "[&_img]:max-w-full]",
-          contentHeight <= Math.floor(parseFloat(theme.orbit.lineHeightNormal))
-            ? "py-200"
-            : "py-300",
-          shown ? "visible opacity-100" : "invisible opacity-0",
-          size === "small" && "max-w-[240px]",
-          size === "medium" && "max-w-[380px]",
-          error && "bg-red-normal",
-          !error && help && "bg-blue-normal",
-          !error && !help && "bg-ink-dark",
+          "font-base text-small text-white-normal mb-0 font-medium leading-normal",
+          "[&_.orbit-text]:text-small [&_.orbit-text]:text-white-normal [&_.orbit-text]:font-medium",
+          "[&_.orbit-list-item]:text-small [&_.orbit-list-item]:text-white-normal [&_.orbit-list-item]:font-medium",
+          "[&_.orbit-text-link]:text-white-normal",
         )}
-        ref={refs.setFloating}
-        role="tooltip"
-        aria-hidden={!shown}
-        onMouseEnter={onEnter}
-        onMouseLeave={onClose}
-        onClick={handleInnerClick}
-        style={floatingStyles}
+        ref={content}
       >
-        <div
-          className={cx(
-            "font-base text-small text-white-normal mb-0 font-medium leading-normal",
-            "[&_.orbit-text]:text-small [&_.orbit-text]:text-white-normal [&_.orbit-text]:font-medium",
-            "[&_.orbit-list-item]:text-small [&_.orbit-list-item]:text-white-normal [&_.orbit-list-item]:font-medium",
-            "[&_.orbit-text-link]:text-white-normal",
-          )}
-          ref={content}
-        >
-          {children}
-        </div>
-        <FloatingArrow
-          ref={arrowRef}
-          context={context}
-          height={ARROW_SIZE}
-          width={ARROW_SIZE * 2}
-          fill={arrowColor}
-        />
+        {children}
       </div>
+      <FloatingArrow
+        ref={arrowRef}
+        context={context}
+        height={ARROW_SIZE}
+        width={ARROW_SIZE * 2}
+        fill={arrowColor}
+      />
     </div>
   );
 };

From 7b6d26235d6576d3d67788db78d94caa0008235f Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Wed, 27 Nov 2024 12:53:34 +0100
Subject: [PATCH 3/3] chore: add ariaLabel to icon component in
 Tooltip/TooltipPrimitive Storybook

---
 packages/orbit-components/src/Tooltip/Tooltip.stories.tsx   | 6 +++---
 .../TooltipPrimitive/TooltipPrimitive.stories.tsx           | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/orbit-components/src/Tooltip/Tooltip.stories.tsx b/packages/orbit-components/src/Tooltip/Tooltip.stories.tsx
index d0639e5fc2..4f1bf96b88 100644
--- a/packages/orbit-components/src/Tooltip/Tooltip.stories.tsx
+++ b/packages/orbit-components/src/Tooltip/Tooltip.stories.tsx
@@ -3,7 +3,7 @@ import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { PLACEMENTS, AUTO_PLACEMENTS } from "../common/placements";
-import * as Icons from "../icons";
+import Airplane from "../icons/Airplane";
 import { SIZE_OPTIONS } from "./consts";
 import Stack from "../Stack";
 import Alert from "../Alert";
@@ -47,7 +47,7 @@ export const Default: Story = {
   render: args => (
     <Stack justify="center">
       <Tooltip {...args}>
-        <Icons.Airplane />
+        <Airplane ariaLabel="More information" />
       </Tooltip>
     </Stack>
   ),
@@ -149,7 +149,7 @@ export const WithImageInside: Story = {
         </Stack>
       }
     >
-      <Icons.Airplane />
+      <Airplane ariaLabel="More information" />
     </Tooltip>
   ),
 
diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx
index 987bc04f2e..e076240073 100644
--- a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx
+++ b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import * as Icons from "../../icons";
+import Airplane from "../../icons/Airplane";
 import Stack from "../../Stack";
 import Alert from "../../Alert";
 import Text from "../../Text";
@@ -43,7 +43,7 @@ export const Default: Story = {
   render: args => (
     <Stack justify="center">
       <TooltipPrimitive {...args}>
-        <Icons.Airplane />
+        <Airplane ariaLabel="More information" />
       </TooltipPrimitive>
     </Stack>
   ),
@@ -147,7 +147,7 @@ export const WithImageInside: Story = {
         </Stack>
       }
     >
-      <Icons.Airplane />
+      <Airplane ariaLabel="More information" />
     </TooltipPrimitive>
   ),