From 113465db714b2fa2adcfd583995645e4a1dd9c32 Mon Sep 17 00:00:00 2001
From: Sarka Chwastkova <chwastkova.s@gmail.com>
Date: Mon, 11 Nov 2024 18:52:45 +0100
Subject: [PATCH] feat(TooltipPrimitive): add aria-label, aria-labelledby props

---
 .../src/primitives/TooltipPrimitive/README.md |  2 ++
 .../TooltipPrimitive.stories.tsx              | 21 ++++++++++++++++---
 .../src/primitives/TooltipPrimitive/index.tsx |  4 ++++
 .../primitives/TooltipPrimitive/types.d.ts    |  2 ++
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/README.md b/packages/orbit-components/src/primitives/TooltipPrimitive/README.md
index 9c29d853ee..c7f83353a1 100644
--- a/packages/orbit-components/src/primitives/TooltipPrimitive/README.md
+++ b/packages/orbit-components/src/primitives/TooltipPrimitive/README.md
@@ -35,6 +35,8 @@ Table below contains all types of the props available in the TooltipPrimitive co
 | offset               | `[number, number]`            | `[0, 5]` | Set offset `[vertical, horizontal]` for Tooltip                                                                            |
 | tabIndex             | `string \| number`            | `"0"`    | Specifies the tab order of an element                                                                                      |
 | onShow               | `() => void \| Promise<void>` |          | Callback for Tooltip, which will be fired when it is shown                                                                 |
+| 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.                                                           |
 
 ## size
 
diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx
index 987bc04f2e..32d69abf40 100644
--- a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx
+++ b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.stories.tsx
@@ -27,12 +27,23 @@ const meta: Meta<typeof TooltipPrimitive> = {
 
   parameters: {
     controls: {
-      exclude: ["onShow", "enabled", "tabIndex", "renderInPortal", "size", "stopPropagation"],
+      exclude: [
+        "onShow",
+        "enabled",
+        "tabIndex",
+        "renderInPortal",
+        "size",
+        "stopPropagation",
+        "aria-label",
+        "aria-labelledby",
+      ],
     },
   },
 
   args: {
     onShow: action("onShow"),
+    "aria-label": "Tooltip label",
+    "aria-labelledby": "tooltip-labelledby",
   },
 };
 
@@ -59,6 +70,7 @@ export const Default: Story = {
         "size",
         "stopPropagation",
         "block",
+        "aria-label",
       ],
     },
   },
@@ -162,6 +174,8 @@ export const WithImageInside: Story = {
         "renderInPortal",
         "stopPropagation",
         "block",
+        "aria-label",
+        "aria-labelledby",
       ],
     },
   },
@@ -188,7 +202,7 @@ export const WithImageInside: Story = {
 };
 
 export const Playground: Story = {
-  render: ({ children, content, ...args }) => (
+  render: ({ children, content, "aria-labelledby": ariaLabelledby, ...args }) => (
     <Alert icon title="Lorem ipsum dolor sit amet" type="warning">
       <Stack spacing="none">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam lectus justo, vulputate
@@ -202,9 +216,10 @@ export const Playground: Story = {
               <TextLink>Clickable element.</TextLink>
             </div>
           }
+          aria-labelledby={ariaLabelledby}
           {...args}
         >
-          <Text>{children}</Text>
+          <Text id={ariaLabelledby}>{children}</Text>
         </TooltipPrimitive>
       </Stack>
     </Alert>
diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/index.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/index.tsx
index cdceffd3a7..b53cdc8a57 100644
--- a/packages/orbit-components/src/primitives/TooltipPrimitive/index.tsx
+++ b/packages/orbit-components/src/primitives/TooltipPrimitive/index.tsx
@@ -52,6 +52,8 @@ const TooltipPrimitive = ({
   placement,
   noFlip,
   offset,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
 }: Props) => {
   const [shown, setShown] = React.useState(false);
   const [referenceElement, setReferenceElement] = React.useState<HTMLSpanElement | null>(null);
@@ -133,6 +135,8 @@ const TooltipPrimitive = ({
         enabled={enabled}
         removeUnderlinedText={removeUnderlinedText}
         block={block}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby}
       >
         {children}
       </TooltipWrapper>
diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/types.d.ts b/packages/orbit-components/src/primitives/TooltipPrimitive/types.d.ts
index 0350becc7b..bc5bc2f9bc 100644
--- a/packages/orbit-components/src/primitives/TooltipPrimitive/types.d.ts
+++ b/packages/orbit-components/src/primitives/TooltipPrimitive/types.d.ts
@@ -25,4 +25,6 @@ export interface Props extends Common.Globals {
   readonly placement?: Placement;
   readonly noFlip?: boolean;
   readonly offset?: [number, number];
+  readonly "aria-label"?: string;
+  readonly "aria-labelledby"?: string;
 }