Sarka/a11y fixes tooltip

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

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>
   ),
 

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>
   ),
 

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>
   );
 };