Tooltip: Remove extra data attribute (#12483)

* Update `@vector-im/compound-web` * Update snapshots * Update jest snapshotss * Update snapshots
matrix-org · May 6, 2024 · f8e040a · f8e040a
1 parent c121167
commit f8e040a
Show file tree

Hide file tree

Showing 44 changed files with 22 additions and 143 deletions.
diff --git a/package.json b/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",

diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -397,47 +397,41 @@ 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"
                   />
                   <button
                     aria-label="Italics"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Strikethrough"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Code block"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Quote"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <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,47 +643,41 @@ 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"
                   />
                   <button
                     aria-label="Italics"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconItalic"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Strikethrough"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconStrikethrough"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Code block"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconCode"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Quote"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconQuote"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"
                   />
                   <button
                     aria-label="Insert link"
                     class="mx_AccessibleButton mx_MessageComposerFormatBar_button mx_MessageComposerFormatBar_buttonIconInsertLink"
-                    data-state="closed"
                     role="button"
                     tabindex="-1"
                     type="button"

diff --git a/test/components/structures/__snapshots__/SpaceHierarchy-test.tsx.snap b/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

diff --git a/test/components/structures/__snapshots__/ThreadPanel-test.tsx.snap b/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"

diff --git a/test/components/views/avatars/__snapshots__/DecoratedRoomAvatar-test.tsx.snap b/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>

diff --git a/test/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap b/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"
             />

diff --git a/test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/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"

diff --git a/test/components/views/beacon/__snapshots__/LeftPanelLiveShareWarning-test.tsx.snap b/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"
   >

diff --git a/test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap b/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"

diff --git a/test/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap b/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"
     />

diff --git a/test/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/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"
       />

diff --git a/test/components/views/dialogs/__snapshots__/ServerPickerDialog-test.tsx.snap b/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

diff --git a/test/components/views/elements/__snapshots__/AppTile-test.tsx.snap b/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"
               >

diff --git a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/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"
   >

diff --git a/test/components/views/elements/__snapshots__/ImageView-test.tsx.snap b/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"
         />

diff --git a/test/components/views/elements/__snapshots__/InfoTooltip-test.tsx.snap b/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