Tooltip: Remove extra data attribute (#12483)

* Update `@vector-im/compound-web`

* Update snapshots

* Update jest snapshotss

* Update snapshots

package.json

@@ -76,7 +76,7 @@
         "@sentry/browser": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.2.0",
-        "@vector-im/compound-web": "^4.1.1",
+        "@vector-im/compound-web": "^4.1.2",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

test/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -397,7 +397,6 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                   <button
                     aria-label="Bold"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
-                    data-state="closed"
                     role="button"
                     tabindex="0"
                     type="button"
@@ -405,7 +404,6 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                   <button
                     aria-label="Italics"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
@@ -413,7 +411,6 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                   <button
                     aria-label="Strikethrough"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
@@ -421,7 +418,6 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                   <button
                     aria-label="Code block"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
@@ -429,7 +425,6 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                   <button
                     aria-label="Quote"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
@@ -437,7 +432,6 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
                   <button
                     aria-label="Insert link"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
@@ -529,7 +523,6 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
           </div>
         </div>
         <span
-          data-state="closed"
           tabindex="0"
         >
           <div
@@ -650,7 +643,6 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                   <button
                     aria-label="Bold"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconBold"
-                    data-state="closed"
                     role="button"
                     tabindex="0"
                     type="button"
@@ -658,7 +650,6 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                   <button
                     aria-label="Italics"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
@@ -666,7 +657,6 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                   <button
                     aria-label="Strikethrough"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
@@ -674,7 +664,6 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                   <button
                     aria-label="Code block"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
@@ -682,7 +671,6 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                   <button
                     aria-label="Quote"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
@@ -690,7 +678,6 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
                   <button
                     aria-label="Insert link"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"

test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap

@@ -34,7 +34,6 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
         aria-disabled="true"
         aria-label="Remove"
         class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger_outline mx_AccessibleButton_disabled"
-        data-state="closed"
         disabled=""
         role="button"
         tabindex="0"
@@ -45,7 +44,6 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
         aria-disabled="true"
         aria-label="Mark as not suggested"
         class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline mx_AccessibleButton_disabled"
-        data-state="closed"
         disabled=""
         role="button"
         tabindex="0"
@@ -395,7 +393,6 @@ exports[`SpaceHierarchy <SpaceHierarchy /> renders 1`] = `
             Join
           </div>
           <span
-            data-state="closed"
             tabindex="0"
           >
             <span

test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap

@@ -13,7 +13,6 @@ exports[`ThreadPanel Header expect that All filter for ThreadPanelHeader properl
     <button
       aria-label="Mark all as read"
       class="_icon-button_16nk7_17"
-      data-state="closed"
       role="button"
       style="--cpd-icon-button-size: 24px;"
       tabindex="0"
@@ -54,7 +53,6 @@ exports[`ThreadPanel Header expect that My filter for ThreadPanelHeader properly
     <button
       aria-label="Mark all as read"
       class="_icon-button_16nk7_17"
-      data-state="closed"
       role="button"
       style="--cpd-icon-button-size: 24px;"
       tabindex="0"

test/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap

@@ -18,7 +18,6 @@ exports[`DecoratedRoomAvatar shows an avatar with globe icon and tooltip for pub
     <div
       aria-describedby="floating-ui-2"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_globe"
-      data-state="open"
       tabindex="0"
     />
   </div>
@@ -43,7 +42,6 @@ exports[`DecoratedRoomAvatar shows the presence indicator in a DM room that also
     <div
       aria-describedby="floating-ui-8"
       class="mx_DecoratedRoomAvatar_icon mx_DecoratedRoomAvatar_icon_online"
-      data-state="open"
       tabindex="0"
     />
   </div>

test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap

@@ -32,7 +32,6 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
           class="mx_BeaconListItem_interactions"
         >
           <a
-            data-state="closed"
             data-testid="open-location-in-osm"
             href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
             rel="noreferrer noopener"
@@ -48,7 +47,6 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
             <div
               aria-label="Copy"
               class="mx_AccessibleButton mx_CopyableText_copyButton"
-              data-state="closed"
               role="button"
               tabindex="0"
             />

test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap

@@ -16,7 +16,6 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
       <div
         aria-label="Close sidebar"
         class="mx_AccessibleButton mx_DialogSidebar_closeButton"
-        data-state="closed"
         data-testid="dialog-sidebar-close"
         role="button"
         tabindex="0"
@@ -66,7 +65,6 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
               class="mx_BeaconListItem_interactions"
             >
               <a
-                data-state="closed"
                 data-testid="open-location-in-osm"
                 href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
                 rel="noreferrer noopener"
@@ -82,7 +80,6 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
                 <div
                   aria-label="Copy"
                   class="mx_AccessibleButton mx_CopyableText_copyButton"
-                  data-state="closed"
                   role="button"
                   tabindex="0"
                 />
@@ -117,7 +114,6 @@ exports[`<DialogSidebar /> renders sidebar correctly without beacons 1`] = `
       <div
         aria-label="Close sidebar"
         class="mx_AccessibleButton mx_DialogSidebar_closeButton"
-        data-state="closed"
         data-testid="dialog-sidebar-close"
         role="button"
         tabindex="0"

test/components/views/beacon/__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap

@@ -5,7 +5,6 @@ exports[`<LeftPanelLiveShareWarning /> when user has live location monitor rende
   <div
     aria-label="You are sharing your live location"
     class="mx_AccessibleButton mx_LeftPanelLiveShareWarning mx_LeftPanelLiveShareWarning__minimized"
-    data-state="closed"
     role="button"
     tabindex="0"
   >

test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap

@@ -111,7 +111,6 @@ exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is
     <button
       aria-label="Stop and close"
       class="mx_AccessibleButton mx_RoomLiveShareWarning_closeButton"
-      data-state="closed"
       data-testid="room-live-share-wire-error-close-button"
       role="button"
       tabindex="0"

test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`<ShareLatestLocation /> renders share buttons when there is a location 1`] = `
 <DocumentFragment>
   <a
-    data-state="closed"
     data-testid="open-location-in-osm"
     href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
     rel="noreferrer noopener"
@@ -19,7 +18,6 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
     <div
       aria-label="Copy"
       class="mx_AccessibleButton mx_CopyableText_copyButton"
-      data-state="closed"
       role="button"
       tabindex="0"
     />

test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap

@@ -41,7 +41,6 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
       <div
         aria-label="Copy"
         class="mx_AccessibleButton mx_CopyableText_copyButton"
-        data-state="closed"
         role="button"
         tabindex="0"
       />

test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap

@@ -57,7 +57,6 @@ exports[`<ServerPickerDialog /> should render dialog 1`] = `
         >
           <span
             class="mx_Login_underlinedServerName"
-            data-state="closed"
             tabindex="0"
           >
             matrix.org

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

@@ -15,7 +15,6 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
         <div
           aria-label="Close"
           class="mx_AccessibleButton mx_BaseCard_close"
-          data-state="closed"
           data-testid="base-card-close-button"
           role="button"
           tabindex="0"
@@ -138,7 +137,6 @@ exports[`AppTile for a pinned widget should render 1`] = `
         <div
           aria-label="Un-maximise"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
-          data-state="closed"
           role="button"
           tabindex="0"
         >
@@ -149,7 +147,6 @@ exports[`AppTile for a pinned widget should render 1`] = `
         <div
           aria-label="Minimise"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
-          data-state="closed"
           role="button"
           tabindex="0"
         >
@@ -226,7 +223,6 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
         <div
           aria-label="Un-maximise"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
-          data-state="closed"
           role="button"
           tabindex="0"
         >
@@ -237,7 +233,6 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
         <div
           aria-label="Minimise"
           class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
-          data-state="closed"
           role="button"
           tabindex="0"
         >
@@ -381,7 +376,6 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
               <div
                 aria-label="Maximise"
                 class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
-                data-state="closed"
                 role="button"
                 tabindex="0"
               >
@@ -392,7 +386,6 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
               <div
                 aria-label="Minimise"
                 class="mx_AccessibleButton mx_AppTileMenuBar_widgets_button"
-                data-state="closed"
                 role="button"
                 tabindex="0"
               >

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

@@ -4,7 +4,6 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
 <DocumentFragment>
   <div
     class="mx_AccessibleButton mx_FacePile"
-    data-state="closed"
     role="button"
     tabindex="0"
   >

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

@@ -24,42 +24,36 @@ exports[`<ImageView /> renders correctly 1`] = `
           aria-describedby="floating-ui-2"
           aria-label="Zoom out"
           class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomOut"
-          data-state="open"
           role="button"
           tabindex="0"
         />
         <div
           aria-label="Zoom in"
           class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_zoomIn"
-          data-state="closed"
           role="button"
           tabindex="0"
         />
         <div
           aria-label="Rotate Left"
           class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_rotateCCW"
-          data-state="closed"
           role="button"
           tabindex="0"
         />
         <div
           aria-label="Rotate Right"
           class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_rotateCW"
-          data-state="closed"
           role="button"
           tabindex="0"
         />
         <div
           aria-label="Download"
           class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_download"
-          data-state="closed"
           role="button"
           tabindex="0"
         />
         <div
           aria-label="Close"
           class="mx_AccessibleButton mx_ImageView_button mx_ImageView_button_close"
-          data-state="closed"
           role="button"
           tabindex="0"
         />

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

@@ -5,7 +5,6 @@ exports[`InfoTooltip should show tooltip on hover 1`] = `
   <div
     aria-describedby="floating-ui-2"
     class="mx_InfoTooltip"
-    data-state="open"
     tabindex="0"
   >
     <span

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

@@ -11,7 +11,6 @@ exports[`<Pill> should not render an avatar or link when called with inMessage =
   <div>
     <bdi>
       <span
-        data-state="closed"
         tabindex="0"
       >
         <span
@@ -34,7 +33,6 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
   <div>
     <bdi>
       <span
-        data-state="closed"
         tabindex="0"
       >
         <span
@@ -69,7 +67,6 @@ exports[`<Pill> should render the expected pill for a known user not in the room
     <bdi>
       <a
         class="mx_Pill mx_UserPill"
-        data-state="closed"
         href="https://matrix.to/#/@user2:example.com"
       >
         <span
@@ -100,7 +97,6 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
     <bdi>
       <a
         class="mx_Pill mx_EventPill"
-        data-state="closed"
         href="https://matrix.to/#/!room1:example.com/$123-456"
       >
         <span
@@ -131,7 +127,6 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
     <bdi>
       <a
         class="mx_Pill mx_EventPill"
-        data-state="closed"
         href="https://matrix.to/#/!room1:example.com/$123-456"
       >
         <span
@@ -162,7 +157,6 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
     <bdi>
       <a
         class="mx_Pill mx_RoomPill"
-        data-state="closed"
         href="https://matrix.to/#/#room1:example.com"
       >
         <span
@@ -193,7 +187,6 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
     <bdi>
       <a
         class="mx_Pill mx_RoomPill"
-        data-state="closed"
         href="https://matrix.to/#/!space1:example.com"
       >
         <span
@@ -224,7 +217,6 @@ exports[`<Pill> should render the expected pill for an uknown user not in the ro
     <bdi>
       <a
         class="mx_Pill mx_UserPill"
-        data-state="closed"
         href="https://matrix.to/#/@user3:example.com"
       >
         <div
@@ -247,7 +239,6 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
     <bdi>
       <a
         class="mx_Pill mx_RoomPill"
-        data-state="closed"
         href="https://matrix.to/#/!room1:example.com"
       >
         <span
@@ -278,7 +269,6 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
     <bdi>
       <a
         class="mx_Pill mx_UserPill"
-        data-state="closed"
         href="https://matrix.to/#/@user1:example.com"
       >
         <span

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

@@ -4,7 +4,6 @@ exports[`<RoomFacePile /> renders 1`] = `
 <DocumentFragment>
   <div
     class="mx_AccessibleButton mx_FacePile"
-    data-state="closed"
     role="button"
     tabindex="0"
   >

test/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap

@@ -25,7 +25,6 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
     <div
       aria-label="Zoom in"
       class="mx_AccessibleButton mx_ZoomButtons_button"
-      data-state="closed"
       data-testid="map-zoom-in-button"
       role="button"
       tabindex="0"
@@ -37,7 +36,6 @@ exports[`<LocationViewDialog /> renders map correctly 1`] = `
     <div
       aria-label="Zoom out"
       class="mx_AccessibleButton mx_ZoomButtons_button"
-      data-state="closed"
       data-testid="map-zoom-out-button"
       role="button"
       tabindex="0"

test/components/views/location/__snapshots__/ZoomButtons-test.tsx.snap

@@ -8,7 +8,6 @@ exports[`<ZoomButtons /> renders buttons 1`] = `
     <div
       aria-label="Zoom in"
       class="mx_AccessibleButton mx_ZoomButtons_button"
-      data-state="closed"
       data-testid="map-zoom-in-button"
       role="button"
       tabindex="0"
@@ -20,7 +19,6 @@ exports[`<ZoomButtons /> renders buttons 1`] = `
     <div
       aria-label="Zoom out"
       class="mx_AccessibleButton mx_ZoomButtons_button"
-      data-state="closed"
       data-testid="map-zoom-out-button"
       role="button"
       tabindex="0"

test/components/views/messages/MessageTimestamp-test.tsx

@@ -32,17 +32,16 @@ describe("MessageTimestamp", () => {
     it("should render HH:MM", () => {
         const { asFragment } = render(<MessageTimestamp ts={nowDate.getTime()} />);
         expect(asFragment()).toMatchInlineSnapshot(`
-            <DocumentFragment>
+<DocumentFragment>
   <span
     aria-hidden="true"
     aria-live="off"
     class="mx_MessageTimestamp"
-                data-state="closed"
   >
     08:09
   </span>
-            </DocumentFragment>
+</DocumentFragment>
-        `);
+`);
     });
 
     it("should show full date & time on hover", async () => {

test/components/views/messages/TextualBody-test.tsx

@@ -198,7 +198,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" data-state="closed"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_mcap2_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_mcap2_50" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
+                `"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_mcap2_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_mcap2_50" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
             );
         });
 
@@ -216,7 +216,7 @@ describe("<TextualBody />", () => {
             const { container } = getComponent({ mxEvent: ev });
             const content = container.querySelector(".mx_EventTile_body");
             expect(content.innerHTML).toMatchInlineSnapshot(
-                `"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com" data-state="closed"><div class="mx_Pill_LinkIcon mx_BaseAvatar"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
+                `"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com"><div class="mx_Pill_LinkIcon mx_BaseAvatar"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
             );
         });
 

test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap

@@ -51,7 +51,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
     <bdi>
       <a
         class="mx_Pill mx_UserPill"
-        data-state="closed"
         href="https://matrix.to/#/@user:example.com"
       >
         <span
@@ -100,7 +99,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
         <bdi>
           <a
             class="mx_Pill mx_EventPill"
-            data-state="closed"
             href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com/$16085560162aNpaH:example.com?via=example.com"
           >
             <span
@@ -151,7 +149,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
         <bdi>
           <a
             class="mx_Pill mx_RoomPill"
-            data-state="closed"
             href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com?via=example.com&via=bob.com"
           >
             <span
@@ -261,7 +258,6 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
     <bdi>
       <a
         class="mx_Pill mx_UserPill"
-        data-state="closed"
         href="https://matrix.to/#/@user:server"
       >
         <span
@@ -296,9 +292,9 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
 </span>
 `;
 
-exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to a message in the same room with the label »Message from Member« 1`] = `"Visit <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room1:example.com/%event_id%" data-state="closed"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_mcap2_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_mcap2_50" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message from Member</span></a></bdi></span>"`;
+exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to a message in the same room with the label »Message from Member« 1`] = `"Visit <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room1:example.com/%event_id%"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_mcap2_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_mcap2_50" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message from Member</span></a></bdi></span>"`;
 
-exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an event in another room with the label »Message in Room 2« 1`] = `"Visit <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room2:example.com/%event_id%" data-state="closed"><span aria-label="Avatar" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_mcap2_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/room.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_mcap2_50" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message in Room 2</span></a></bdi></span>"`;
+exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an event in another room with the label »Message in Room 2« 1`] = `"Visit <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room2:example.com/%event_id%"><span aria-label="Avatar" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_mcap2_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/room.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_mcap2_50" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message in Room 2</span></a></bdi></span>"`;
 
 exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an unknown message in the same room with the label »Message« 1`] = `
 <span
@@ -310,7 +306,6 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
     <bdi>
       <a
         class="mx_Pill mx_EventPill"
-        data-state="closed"
         href="https://matrix.to/#/!room1:example.com/!abc123"
       >
         <div

test/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap

@@ -79,7 +79,6 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
           data-testid="pollListItem-$2"
         >
           <span
-            data-state="closed"
             tabindex="0"
           >
             <div
@@ -104,7 +103,6 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
           data-testid="pollListItem-$1"
         >
           <span
-            data-state="closed"
             tabindex="0"
           >
             <div

test/components/views/polls/pollHistory/__snapshots__/PollListItem-test.tsx.snap

@@ -7,7 +7,6 @@ exports[`<PollListItem /> renders a poll 1`] = `
     data-testid="pollListItem-$mypoll"
   >
     <span
-      data-state="closed"
       tabindex="0"
     >
       <div

test/components/views/polls/pollHistory/__snapshots__/PollListItemEnded-test.tsx.snap

@@ -7,7 +7,6 @@ exports[`<PollListItemEnded /> renders a poll with no responses 1`] = `
     data-testid="pollListItem-1"
   >
     <span
-      data-state="closed"
       tabindex="0"
     >
       <div

test/components/views/right_panel/__snapshots__/LegacyRoomHeaderButtons-test.tsx.snap

@@ -6,7 +6,6 @@ exports[`LegacyRoomHeaderButtons-test.tsx should render 1`] = `
     aria-current="false"
     aria-label="Chat"
     class="mx_AccessibleButton mx_LegacyRoomHeader_button mx_RightPanel_timelineCardButton"
-    data-state="closed"
     role="button"
     tabindex="0"
   />
@@ -14,7 +13,6 @@ exports[`LegacyRoomHeaderButtons-test.tsx should render 1`] = `
     aria-current="false"
     aria-label="Threads"
     class="mx_AccessibleButton mx_LegacyRoomHeader_button mx_RightPanel_threadsButton"
-    data-state="closed"
     data-testid="threadsButton"
     role="button"
     tabindex="0"
@@ -23,7 +21,6 @@ exports[`LegacyRoomHeaderButtons-test.tsx should render 1`] = `
     aria-current="false"
     aria-label="Room info"
     class="mx_AccessibleButton mx_LegacyRoomHeader_button mx_RightPanel_roomSummaryButton"
-    data-state="closed"
     role="button"
     tabindex="0"
   />

test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

@@ -16,7 +16,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         <button
           aria-label="Search"
           class="mx_RoomSummaryCard_searchBtn"
-          data-state="closed"
           data-testid="summary-search"
         >
           <div
@@ -27,7 +26,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         <div
           aria-label="Close"
           class="mx_AccessibleButton mx_BaseCard_close"
-          data-state="closed"
           data-testid="base-card-close-button"
           role="button"
           tabindex="0"

test/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap

@@ -5,7 +5,6 @@ exports[`<DeviceItem /> ambiguous display name 1`] = `
   <div
     aria-label="my display name (deviceId)"
     class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
-    data-state="closed"
     role="button"
     tabindex="0"
   >
@@ -29,7 +28,6 @@ exports[`<DeviceItem /> with display name 1`] = `
   <div
     aria-label="deviceName"
     class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
-    data-state="closed"
     role="button"
     tabindex="0"
   >
@@ -53,7 +51,6 @@ exports[`<DeviceItem /> without display name 1`] = `
   <div
     aria-label="deviceId"
     class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
-    data-state="closed"
     role="button"
     tabindex="0"
   >
@@ -83,7 +80,6 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
       <div
         aria-label="Close"
         class="mx_AccessibleButton mx_BaseCard_close"
-        data-state="closed"
         data-testid="base-card-close-button"
         role="button"
         tabindex="0"

test/components/views/rooms/EventTile/__snapshots__/EventTileThreadToolbar-test.tsx.snap

@@ -11,7 +11,6 @@ exports[`EventTileThreadToolbar renders 1`] = `
     <div
       aria-label="View in room"
       class="mx_AccessibleButton mx_MessageActionBar_iconButton"
-      data-state="closed"
       role="button"
       tabindex="0"
     >
@@ -20,7 +19,6 @@ exports[`EventTileThreadToolbar renders 1`] = `
     <div
       aria-label="Copy link to thread"
       class="mx_AccessibleButton mx_MessageActionBar_iconButton"
-      data-state="closed"
       role="button"
       tabindex="-1"
     >

test/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap

@@ -5,7 +5,6 @@ exports[`<VideoRoomChatButton /> renders button with an unread marker when room
   aria-label="Chat"
   class="_icon-button_16nk7_17"
   data-indicator="default"
-  data-state="closed"
   role="button"
   style="--cpd-icon-button-size: 32px;"
   tabindex="0"

test/components/views/rooms/__snapshots__/MemberTile-test.tsx.snap

@@ -6,7 +6,6 @@ exports[`MemberTile should display an verified E2EIcon when the e2E status = Ver
     <div
       aria-label="@userId:matrix.org (power 0)"
       class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
-      data-state="closed"
       role="button"
       tabindex="0"
     >
@@ -60,7 +59,6 @@ exports[`MemberTile should display an warning E2EIcon when the e2E status = Warn
     <div
       aria-label="@userId:matrix.org (power 0)"
       class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
-      data-state="closed"
       role="button"
       tabindex="0"
     >
@@ -114,7 +112,6 @@ exports[`MemberTile should not display an E2EIcon when the e2E status = normal 1
     <div
       aria-label="@userId:matrix.org (power 0)"
       class="mx_AccessibleButton mx_EntityTile mx_EntityTile_offline_neveractive"
-      data-state="closed"
       role="button"
       tabindex="0"
     >

test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap

@@ -55,16 +55,13 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
           class="_indicator-icon_133tf_26"
           style="--cpd-icon-button-size: 100%; --cpd-color-icon-tertiary: var(--cpd-color-icon-disabled);"
         >
-          <div
+          <div />
-            data-state="closed"
-          />
         </div>
       </button>
       <button
         aria-disabled="true"
         aria-label="There's no one here to call"
         class="_icon-button_16nk7_17"
-        data-state="closed"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -79,7 +76,6 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
       <button
         aria-label="Threads"
         class="_icon-button_16nk7_17"
-        data-state="closed"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"

test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap

@@ -141,7 +141,6 @@ exports[`<CurrentDeviceSection /> handles when device is falsy 1`] = `
         aria-haspopup="true"
         aria-label="Options"
         class="mx_AccessibleButton mx_AccessibleButton_disabled"
-        data-state="closed"
         data-testid="current-session-menu"
         disabled=""
         role="button"
@@ -178,7 +177,6 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
         aria-haspopup="true"
         aria-label="Options"
         class="mx_AccessibleButton"
-        data-state="closed"
         data-testid="current-session-menu"
         role="button"
         tabindex="0"
@@ -323,7 +321,6 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
         aria-haspopup="true"
         aria-label="Options"
         class="mx_AccessibleButton"
-        data-state="closed"
         data-testid="current-session-menu"
         role="button"
         tabindex="0"

test/components/views/settings/devices/__snapshots__/FilteredDeviceListHeader-test.tsx.snap

@@ -7,7 +7,6 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
     data-testid="test123"
   >
     <span
-      data-state="closed"
       tabindex="0"
     >
       <span
@@ -52,7 +51,6 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
     data-testid="test123"
   >
     <span
-      data-state="closed"
       tabindex="0"
     >
       <span

test/components/views/settings/devices/__snapshots__/LoginWithQRFlow-test.tsx.snap

@@ -637,7 +637,6 @@ exports[`<LoginWithQRFlow /> renders QR code 1`] = `
       <div
         aria-label="Back"
         class="mx_AccessibleButton mx_LoginWithQR_BackButton"
-        data-state="closed"
         data-testid="back-button"
         role="button"
         tabindex="0"
@@ -765,7 +764,6 @@ exports[`<LoginWithQRFlow /> renders spinner while connecting 1`] = `
       <div
         aria-label="Back"
         class="mx_AccessibleButton mx_LoginWithQR_BackButton"
-        data-state="closed"
         data-testid="back-button"
         role="button"
         tabindex="0"
@@ -832,7 +830,6 @@ exports[`<LoginWithQRFlow /> renders spinner while loading 1`] = `
       <div
         aria-label="Back"
         class="mx_AccessibleButton mx_LoginWithQR_BackButton"
-        data-state="closed"
         data-testid="back-button"
         role="button"
         tabindex="0"
@@ -887,7 +884,6 @@ exports[`<LoginWithQRFlow /> renders spinner while signing in 1`] = `
       <div
         aria-label="Back"
         class="mx_AccessibleButton mx_LoginWithQR_BackButton"
-        data-state="closed"
         data-testid="back-button"
         role="button"
         tabindex="0"
@@ -954,7 +950,6 @@ exports[`<LoginWithQRFlow /> renders spinner while verifying 1`] = `
       <div
         aria-label="Back"
         class="mx_AccessibleButton mx_LoginWithQR_BackButton"
-        data-state="closed"
         data-testid="back-button"
         role="button"
         tabindex="0"
@@ -1012,7 +1007,6 @@ exports[`<LoginWithQRFlow /> renders spinner whilst QR generating 1`] = `
       <div
         aria-label="Back"
         class="mx_AccessibleButton mx_LoginWithQR_BackButton"
-        data-state="closed"
         data-testid="back-button"
         role="button"
         tabindex="0"

test/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap

@@ -45,7 +45,6 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
                   <div
                     aria-label="Copy"
                     class="mx_AccessibleButton mx_CopyableText_copyButton"
-                    data-state="closed"
                     role="button"
                     tabindex="0"
                   />

test/components/views/settings/tabs/room/__snapshots__/PeopleRoomSettingsTab-test.tsx.snap

@@ -70,7 +70,6 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
       <div
         aria-label="Deny"
         class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary_outline"
-        data-state="closed"
         role="button"
         tabindex="0"
       >
@@ -82,7 +81,6 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests fully 1`]
       <div
         aria-label="Approve"
         class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary"
-        data-state="closed"
         role="button"
         tabindex="0"
       >
@@ -139,7 +137,6 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
       <div
         aria-label="Deny"
         class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary_outline"
-        data-state="closed"
         role="button"
         tabindex="0"
       >
@@ -151,7 +148,6 @@ exports[`PeopleRoomSettingsTab with requests to join renders requests reduced 1`
       <div
         aria-label="Approve"
         class="mx_AccessibleButton mx_PeopleRoomSettingsTab_action mx_AccessibleButton_hasKind mx_AccessibleButton_kind_icon_primary"
-        data-state="closed"
         role="button"
         tabindex="0"
       >

test/components/views/settings/tabs/user/__snapshots__/PreferencesUserSettingsTab-test.tsx.snap

@@ -289,7 +289,6 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
                   aria-disabled="true"
                   aria-label="Send read receipts"
                   class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
-                  data-state="closed"
                   id="mx_SettingsFlag_GQvdMWe954DV"
                   role="switch"
                   tabindex="0"

test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap

@@ -86,7 +86,6 @@ exports[`<SessionManagerTab /> current session section renders current session s
       aria-haspopup="true"
       aria-label="Options"
       class="mx_AccessibleButton"
-      data-state="closed"
       data-testid="current-session-menu"
       role="button"
       tabindex="0"
@@ -217,7 +216,6 @@ exports[`<SessionManagerTab /> current session section renders current session s
       aria-haspopup="true"
       aria-label="Options"
       class="mx_AccessibleButton"
-      data-state="closed"
       data-testid="current-session-menu"
       role="button"
       tabindex="0"
@@ -347,7 +345,6 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
   class="mx_FilteredDeviceListHeader"
 >
   <span
-    data-state="closed"
     tabindex="0"
   >
     <span

test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap

@@ -35,7 +35,6 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
       <div
         aria-label="Expand"
         class="mx_AccessibleButton mx_SpacePanel_toggleCollapse"
-        data-state="closed"
         role="button"
         tabindex="0"
       />
@@ -56,7 +55,6 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         <div
           aria-label="Home"
           class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_home mx_SpaceButton_narrow"
-          data-state="closed"
           role="button"
           tabindex="0"
         >
@@ -93,7 +91,6 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         <div
           aria-label="Favourites"
           class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_favourites mx_SpaceButton_narrow"
-          data-state="closed"
           role="button"
           tabindex="-1"
         >
@@ -122,7 +119,6 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         <div
           aria-label="People"
           class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_people mx_SpaceButton_narrow"
-          data-state="closed"
           role="button"
           tabindex="-1"
         >
@@ -151,7 +147,6 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         <div
           aria-label="Other rooms"
           class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_orphans mx_SpaceButton_narrow"
-          data-state="closed"
           role="button"
           tabindex="-1"
         >
@@ -180,7 +175,6 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         <div
           aria-label="Conferences"
           class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_videoRooms mx_SpaceButton_narrow"
-          data-state="closed"
           role="button"
           tabindex="-1"
         >
@@ -209,7 +203,6 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         <div
           aria-label="Create a space"
           class="mx_AccessibleButton mx_SpaceButton mx_SpaceButton_new mx_SpaceButton_narrow"
-          data-state="closed"
           data-testid="create-space-button"
           role="button"
           tabindex="-1"
@@ -242,7 +235,6 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         aria-haspopup="dialog"
         aria-label="Threads"
         class="_icon-button_16nk7_17 mx_ThreadsActivityCentreButton"
-        data-state="closed"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -279,7 +271,6 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
       aria-expanded="false"
       aria-label="Quick settings"
       class="mx_AccessibleButton mx_QuickSettingsButton"
-      data-state="closed"
       role="button"
       tabindex="0"
     />

test/components/views/spaces/__snapshots__/ThreadsActivityCentre-test.tsx.snap

@@ -151,7 +151,7 @@ exports[`ThreadsActivityCentre should close the release announcement when the TA
         aria-haspopup="menu"
         aria-label="Threads"
         class="_icon-button_16nk7_17 mx_ThreadsActivityCentreButton"
-        data-state="closed"
+        data-state="open"
         id="radix-2"
         role="button"
         style="--cpd-icon-button-size: 32px;"
@@ -438,7 +438,6 @@ exports[`ThreadsActivityCentre should render the release announcement 1`] = `
         aria-haspopup="dialog"
         aria-label="Threads"
         class="_icon-button_16nk7_17 mx_ThreadsActivityCentreButton"
-        data-state="closed"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"

yarn.lock

@@ -3097,10 +3097,10 @@
   dependencies:
     svg2vectordrawable "^2.9.1"
 
-"@vector-im/compound-web@^4.1.1":
+"@vector-im/compound-web@^4.1.2":
-  version "4.1.1"
+  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.1.1.tgz#7a3c7deb8be2ca7f13f151a51434759d64687ad9"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-4.1.2.tgz#d8f9ba523700660942722a800c64406216bbbfea"
-  integrity sha512-vFJ6dyn712taz0TAt/ZwfwiD86ZbKyP9ePLcqCCeJ2M0dzvzrr0lCl702g6mbdiUKVqYwKHrqDhOUgsqb6TNoQ==
+  integrity sha512-u/jj8HF8qpX1NU+sh6f/S1B7HUMGcoAGYLH0wc5lVbf6x6elBsYKD0LSa+/8NDPuQqVWMztu76chUsM5slC49w==
   dependencies:
     "@floating-ui/react" "^0.26.9"
     "@floating-ui/react-dom" "^2.0.8"