Ensure tooltip contents is linked via aria to the target element (#10729)

* Ensure tooltip contents is linked via aria to the target element

* Iterate

* Fix tests

* Fix tests

* Update snapshot

* Fix missing aria labels for more tooltips

* Iterate

* Update snapshots

test/components/views/elements/Pill-test.tsx

@@ -117,6 +117,12 @@ describe("<Pill>", () => {
 
         jest.spyOn(dis, "dispatch");
         pillParentClickHandler = jest.fn();
+
+        jest.spyOn(global.Math, "random").mockReturnValue(0.123456);
+    });
+
+    afterEach(() => {
+        jest.spyOn(global.Math, "random").mockRestore();
     });
 
     describe("when rendering a pill for a room", () => {

test/components/views/elements/__snapshots__/Pill-test.tsx.snap

@@ -11,6 +11,7 @@ exports[`<Pill> should not render an avatar or link when called with inMessage =
   <div>
     <bdi>
       <span
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_RoomPill"
       >
         <span
@@ -29,6 +30,7 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
   <div>
     <bdi>
       <span
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_AtRoomPill"
       >
         <span
@@ -68,6 +70,7 @@ exports[`<Pill> should render the expected pill for a known user not in the room
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_UserPill"
         href="https://matrix.to/#/@user2:example.com"
       >
@@ -108,6 +111,7 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_EventPill"
         href="https://matrix.to/#/!room1:example.com/$123-456"
       >
@@ -148,6 +152,7 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_EventPill"
         href="https://matrix.to/#/!room1:example.com/$123-456"
       >
@@ -188,6 +193,7 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_RoomPill"
         href="https://matrix.to/#/#room1:example.com"
       >
@@ -228,6 +234,7 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_RoomPill"
         href="https://matrix.to/#/!space1:example.com"
       >
@@ -268,6 +275,7 @@ exports[`<Pill> should render the expected pill for an uknown user not in the ro
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_UserPill"
         href="https://matrix.to/#/@user3:example.com"
       >
@@ -290,6 +298,7 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_RoomPill"
         href="https://matrix.to/#/!room1:example.com"
       >
@@ -330,6 +339,7 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
   <div>
     <bdi>
       <a
+        aria-describedby="mx_Pill_0.123456"
         class="mx_Pill mx_UserPill"
         href="https://matrix.to/#/@user1:example.com"
       >

test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`<TooltipTarget /> displays Bottom aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; top: 6px; transform: translate(max(10px, min(calc(0px - 50%), calc(100vw - 100% - 10px))));"
 >
@@ -16,6 +17,7 @@ exports[`<TooltipTarget /> displays Bottom aligned tooltip on mouseover 1`] = `
 exports[`<TooltipTarget /> displays InnerBottom aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; top: -50px; transform: translate(max(10px, min(calc(0px - 50%), calc(100vw - 100% - 10px))));"
 >
@@ -29,6 +31,7 @@ exports[`<TooltipTarget /> displays InnerBottom aligned tooltip on mouseover 1`]
 exports[`<TooltipTarget /> displays Left aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; right: 1030px; top: 0px; transform: translateY(-50%);"
 >
@@ -42,6 +45,7 @@ exports[`<TooltipTarget /> displays Left aligned tooltip on mouseover 1`] = `
 exports[`<TooltipTarget /> displays Natural aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; left: 6px; top: 0px; transform: translateY(-50%);"
 >
@@ -55,6 +59,7 @@ exports[`<TooltipTarget /> displays Natural aligned tooltip on mouseover 1`] = `
 exports[`<TooltipTarget /> displays Right aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; left: 6px; top: 0px; transform: translateY(-50%);"
 >
@@ -68,6 +73,7 @@ exports[`<TooltipTarget /> displays Right aligned tooltip on mouseover 1`] = `
 exports[`<TooltipTarget /> displays Top aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; top: -6px; transform: translate(max(10px, min(calc(0px - 50%), calc(100vw - 100% - 10px))), -100%);"
 >
@@ -81,6 +87,7 @@ exports[`<TooltipTarget /> displays Top aligned tooltip on mouseover 1`] = `
 exports[`<TooltipTarget /> displays TopRight aligned tooltip on mouseover 1`] = `
 <div
   class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
+  id="test id"
   role="tooltip"
   style="display: block; top: -6px; right: 1024px; transform: translateY(-100%);"
 >