[MM-63046] Have the draft actions labelled by their tooltip (#31369)

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>

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: '',
+        icon: 'some-icon',
-        id: '',
+        id: 'some-id',
-        name: '',
+        name: 'some-name',
         onClick: jest.fn(),
-        tooltipText: '',
+        tooltipText: 'some-tooltip-text',
     };
 
     it('should match snapshot', () => {

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(

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}