From c47a84da39bb9a0bbb5a966c94e1b3b8e0982586 Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Wed, 11 Jun 2025 09:27:11 -0400
Subject: [PATCH] [MM-63046] Have the draft actions labelled by their tooltip
 (#31369)

---
 .../draft_actions/__snapshots__/action.test.tsx.snap     | 9 +++++----
 .../src/components/drafts/draft_actions/action.test.tsx  | 8 ++++----
 .../src/components/drafts/draft_actions/action.tsx       | 3 ++-
 webapp/channels/src/components/with_tooltip/index.tsx    | 3 +++
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/webapp/channels/src/components/drafts/draft_actions/__snapshots__/action.test.tsx.snap b/webapp/channels/src/components/drafts/draft_actions/__snapshots__/action.test.tsx.snap
index b842937939..16e55513a0 100644
--- a/webapp/channels/src/components/drafts/draft_actions/__snapshots__/action.test.tsx.snap
+++ b/webapp/channels/src/components/drafts/draft_actions/__snapshots__/action.test.tsx.snap
@@ -5,16 +5,17 @@ exports[`components/drafts/draft_actions/action should match snapshot 1`] = `
   className="DraftAction"
 >
   <WithTooltip
-    title=""
+    id="draft_tooltip_some-id"
+    title="some-tooltip-text"
   >
     <button
-      aria-label=""
+      aria-labelledby="draft_tooltip_some-id"
       className="DraftAction__button"
-      id="draft__"
+      id="draft_some-icon_some-id"
       onClick={[MockFunction]}
     >
       <i
-        className="icon"
+        className="icon some-icon"
       />
     </button>
   </WithTooltip>
diff --git a/webapp/channels/src/components/drafts/draft_actions/action.test.tsx b/webapp/channels/src/components/drafts/draft_actions/action.test.tsx
index 9bb66b74e7..db9a21b3f4 100644
--- a/webapp/channels/src/components/drafts/draft_actions/action.test.tsx
+++ b/webapp/channels/src/components/drafts/draft_actions/action.test.tsx
@@ -8,11 +8,11 @@ import Action from './action';
 
 describe('components/drafts/draft_actions/action', () => {
     const baseProps = {
-        icon: '',
-        id: '',
-        name: '',
+        icon: 'some-icon',
+        id: 'some-id',
+        name: 'some-name',
         onClick: jest.fn(),
-        tooltipText: '',
+        tooltipText: 'some-tooltip-text',
     };
 
     it('should match snapshot', () => {
diff --git a/webapp/channels/src/components/drafts/draft_actions/action.tsx b/webapp/channels/src/components/drafts/draft_actions/action.tsx
index e3e772ab94..27b433a3d6 100644
--- a/webapp/channels/src/components/drafts/draft_actions/action.tsx
+++ b/webapp/channels/src/components/drafts/draft_actions/action.tsx
@@ -27,6 +27,7 @@ function Action({
         <div className='DraftAction'>
             <WithTooltip
                 title={tooltipText}
+                id={`draft_tooltip_${id}`}
             >
                 <button
                     className={classNames(
@@ -35,7 +36,7 @@ function Action({
                     )}
                     id={`draft_${icon}_${id}`}
                     onClick={onClick}
-                    aria-label={name}
+                    aria-labelledby={`draft_tooltip_${id}`}
                 >
                     <i
                         className={classNames(
diff --git a/webapp/channels/src/components/with_tooltip/index.tsx b/webapp/channels/src/components/with_tooltip/index.tsx
index 1dd5d741d4..70e6c0919d 100644
--- a/webapp/channels/src/components/with_tooltip/index.tsx
+++ b/webapp/channels/src/components/with_tooltip/index.tsx
@@ -58,6 +58,7 @@ interface Props {
     isEmojiLarge?: boolean;
     hint?: string | ReactNode | MessageDescriptor;
     shortcut?: ShortcutDefinition;
+    id?: string;
 
     /**
      * Whether the tooltip should be vertical or horizontal, by default it is vertical
@@ -100,6 +101,7 @@ export default function WithTooltip({
     onOpen,
     disabled,
     forcedPlacement,
+    id,
 }: Props) {
     const [open, setOpen] = useState(false);
 
@@ -188,6 +190,7 @@ export default function WithTooltip({
                         className={classNames('tooltipContainer', className)}
                         style={{...floatingStyles, ...transitionStyles}}
                         {...getFloatingProps()}
+                        id={id}
                     >
                         <TooltipContent
                             title={title}