From 1b9bef7295dabe51012cfcc5bd0aac7400f2eea7 Mon Sep 17 00:00:00 2001
From: Xavier Rutayisire <xavier.rutayisire@gmail.com>
Date: Wed, 27 Dec 2023 22:32:14 +0100
Subject: [PATCH] fix(accessibility): Update editor packages & use hiddenLabel
 for Icon Button (#1257)

---
 .../components/AppLayout/index.tsx            |  2 +-
 .../CustomTypeBuilder/SliceZone/index.tsx     |  2 +-
 .../builders/SliceBuilder/Sidebar/index.tsx   |  2 +-
 .../SliceBuilder/SimulatorButton/index.tsx    |  2 +-
 .../Zone/components/EmptyState/index.tsx      |  2 +-
 .../lib/builders/common/Zone/index.jsx        |  2 +-
 packages/slice-machine/package.json           |  6 +--
 .../components/BlankSlate/BlankSlate.css.ts   |  5 ++-
 .../src/components/BlankSlate/BlankSlate.tsx  |  9 +---
 .../src/components/Card/Card.stories.tsx      |  6 +--
 .../src/components/HoverCard/HoverCard.css.ts |  9 ----
 .../HoverCard/HoverCard.stories.tsx           |  2 +-
 .../src/components/HoverCard/HoverCard.tsx    |  2 +-
 .../src/components/List/List.stories.tsx      |  4 +-
 .../SideNav/SideNavEnvironmentSelector.tsx    |  4 +-
 .../src/components/Window/Window.tsx          |  2 +-
 .../src/features/customTypes/EditDropdown.tsx | 12 +++---
 .../PageSnippetDialog/PageSnippetDialog.tsx   |  4 +-
 .../features/inAppGuide/InAppGuideDialog.tsx  |  8 +---
 .../ConvertLegacySliceAsNewSliceDialog.tsx    |  2 +-
 ...ConvertLegacySliceAsNewVariationDialog.tsx |  2 +-
 .../ConvertLegacySliceButton.tsx              |  2 +-
 ...ertLegacySliceMergeWithIdenticalDialog.tsx |  2 +-
 .../sliceBuilder/FloatingBackButton.tsx       |  2 +-
 .../slices/sliceCards/SharedSliceCard.tsx     |  4 +-
 playwright/pages/SliceBuilderPage.ts          |  2 +-
 playwright/pages/SlicesListPage.ts            |  4 +-
 .../pages/components/EnvironmentSelector.ts   | 12 ++++--
 playwright/pages/shared/TypeBuilderPage.ts    |  6 ++-
 playwright/pages/shared/TypesTablePage.ts     |  4 +-
 yarn.lock                                     | 41 +++++++++++--------
 31 files changed, 84 insertions(+), 84 deletions(-)

diff --git a/packages/slice-machine/components/AppLayout/index.tsx b/packages/slice-machine/components/AppLayout/index.tsx
index 5b5eb3c0ee..ba131d5759 100644
--- a/packages/slice-machine/components/AppLayout/index.tsx
+++ b/packages/slice-machine/components/AppLayout/index.tsx
@@ -83,7 +83,7 @@ export const AppLayoutBackButton: FC<AppLayoutBackButtonProps> = ({
         void router.push(url);
       }}
       startIcon="arrowBack"
-      variant="secondary"
+      color="grey"
     />
   );
 };
diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx
index 739add02ee..fbd6c1eea3 100644
--- a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx
+++ b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/index.tsx
@@ -213,7 +213,7 @@ const SliceZone: React.FC<SliceZoneProps> = ({
             sliceZone ? (
               <DropdownMenu>
                 <DropdownMenuTrigger>
-                  <Button variant="secondary" startIcon="add">
+                  <Button color="grey" startIcon="add">
                     Add slices
                   </Button>
                 </DropdownMenuTrigger>
diff --git a/packages/slice-machine/lib/builders/SliceBuilder/Sidebar/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/Sidebar/index.tsx
index b57ce844e5..a35fc927e6 100644
--- a/packages/slice-machine/lib/builders/SliceBuilder/Sidebar/index.tsx
+++ b/packages/slice-machine/lib/builders/SliceBuilder/Sidebar/index.tsx
@@ -94,7 +94,7 @@ export const Sidebar: FC<SidebarProps> = (props) => {
             // Set `position` to `relative` to position `Button` on top of
             // `Gradient`.
             sx={{ position: "relative" }}
-            variant="secondary"
+            color="grey"
           >
             Add a new variation
           </Button>
diff --git a/packages/slice-machine/lib/builders/SliceBuilder/SimulatorButton/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/SimulatorButton/index.tsx
index e1751dade2..679d003a94 100644
--- a/packages/slice-machine/lib/builders/SliceBuilder/SimulatorButton/index.tsx
+++ b/packages/slice-machine/lib/builders/SliceBuilder/SimulatorButton/index.tsx
@@ -155,7 +155,7 @@ const SimulatorButton: React.FC<{
               width={tokens.size[24]}
             />
           )}
-          variant="secondary"
+          color="grey"
         >
           Simulate
         </Button>
diff --git a/packages/slice-machine/lib/builders/common/Zone/components/EmptyState/index.tsx b/packages/slice-machine/lib/builders/common/Zone/components/EmptyState/index.tsx
index 62e4cbd513..351106602a 100644
--- a/packages/slice-machine/lib/builders/common/Zone/components/EmptyState/index.tsx
+++ b/packages/slice-machine/lib/builders/common/Zone/components/EmptyState/index.tsx
@@ -18,7 +18,7 @@ const ZoneEmptyState = ({
     </Box>
     <Box sx={{ display: "flex", justifyContent: "center", marginTop: 16 }}>
       <Button
-        variant="secondary"
+        color="grey"
         // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         onClick={() => onEnterSelectMode()}
         data-cy={`add-${zoneName}-field`}
diff --git a/packages/slice-machine/lib/builders/common/Zone/index.jsx b/packages/slice-machine/lib/builders/common/Zone/index.jsx
index e164ae4993..1b279fe73b 100644
--- a/packages/slice-machine/lib/builders/common/Zone/index.jsx
+++ b/packages/slice-machine/lib/builders/common/Zone/index.jsx
@@ -93,7 +93,7 @@ const Zone = ({
                 }-field`}
                 onClick={enterSelectMode}
                 startIcon="add"
-                variant="secondary"
+                grey="grey"
               >
                 Add a new field
               </Button>
diff --git a/packages/slice-machine/package.json b/packages/slice-machine/package.json
index b226c3ba3f..fd44551b30 100644
--- a/packages/slice-machine/package.json
+++ b/packages/slice-machine/package.json
@@ -38,9 +38,9 @@
   "devDependencies": {
     "@emotion/react": "11.11.1",
     "@extractus/oembed-extractor": "3.1.8",
-    "@prismicio/editor-fields": "0.4.17",
-    "@prismicio/editor-support": "0.4.17",
-    "@prismicio/editor-ui": "0.4.17",
+    "@prismicio/editor-fields": "0.4.18",
+    "@prismicio/editor-support": "0.4.18",
+    "@prismicio/editor-ui": "0.4.18",
     "@prismicio/mocks": "2.0.0-alpha.2",
     "@prismicio/simulator": "0.1.4",
     "@prismicio/types-internal": "2.2.0",
diff --git a/packages/slice-machine/src/components/BlankSlate/BlankSlate.css.ts b/packages/slice-machine/src/components/BlankSlate/BlankSlate.css.ts
index e4e895917e..0401d959d0 100644
--- a/packages/slice-machine/src/components/BlankSlate/BlankSlate.css.ts
+++ b/packages/slice-machine/src/components/BlankSlate/BlankSlate.css.ts
@@ -79,8 +79,11 @@ export const desc = style({
 
 export const actions = style([
   sprinkles({
-    gap: 16,
+    all: "unset",
     alignItems: "center",
+    boxSizing: "border-box",
+    display: "flex",
+    gap: 16,
     marginTop: 16,
   }),
   {
diff --git a/packages/slice-machine/src/components/BlankSlate/BlankSlate.tsx b/packages/slice-machine/src/components/BlankSlate/BlankSlate.tsx
index b4c375808c..500e762240 100644
--- a/packages/slice-machine/src/components/BlankSlate/BlankSlate.tsx
+++ b/packages/slice-machine/src/components/BlankSlate/BlankSlate.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { ButtonGroup, Text } from "@prismicio/editor-ui";
+import { Text } from "@prismicio/editor-ui";
 import type { CSSProperties, FC, PropsWithChildren } from "react";
 
 import * as styles from "./BlankSlate.css";
@@ -46,10 +46,5 @@ export const BlankSlateDescription: FC<PropsWithChildren> = (props) => (
 );
 
 export const BlankSlateActions: FC<PropsWithChildren> = (props) => (
-  <ButtonGroup
-    {...props}
-    className={styles.actions}
-    size="medium"
-    variant="secondary"
-  />
+  <div {...props} className={styles.actions} color="grey" />
 );
diff --git a/packages/slice-machine/src/components/Card/Card.stories.tsx b/packages/slice-machine/src/components/Card/Card.stories.tsx
index fc374c6b38..2ee0f72d7f 100644
--- a/packages/slice-machine/src/components/Card/Card.stories.tsx
+++ b/packages/slice-machine/src/components/Card/Card.stories.tsx
@@ -41,7 +41,7 @@ export const Default = {
         <CardMedia overlay={<></>} />
         <CardActions />
         <CardFooter
-          action={<Button variant="secondary">Action</Button>}
+          action={<Button color="grey">Action</Button>}
           subtitle="Subtitle"
           title="Title"
         />
@@ -66,7 +66,7 @@ export const SolidWithImg = {
                 renderStartIcon={() => (
                   <AddPhotoAlternateIcon color={tokens.color.greyLight11} />
                 )}
-                variant="secondary"
+                color="grey"
               >
                 Update screenshot
               </Button>
@@ -109,7 +109,7 @@ export const SolidWithDiv = {
             renderStartIcon={() => (
               <SyncAltIcon color={tokens.color.greyLight11} />
             )}
-            variant="secondary"
+            color="grey"
           >
             Turn into shared Slice
           </Button>
diff --git a/packages/slice-machine/src/components/HoverCard/HoverCard.css.ts b/packages/slice-machine/src/components/HoverCard/HoverCard.css.ts
index 7b82c35fc3..15200c628d 100644
--- a/packages/slice-machine/src/components/HoverCard/HoverCard.css.ts
+++ b/packages/slice-machine/src/components/HoverCard/HoverCard.css.ts
@@ -103,12 +103,3 @@ export const closeButtonContainer = style([
     paddingInline: 16,
   }),
 ]);
-
-export const closeButton = style([
-  blockWithDisplayRevert,
-  sprinkles({
-    boxShadow: 1,
-    textAlign: "center",
-    width: "100%",
-  }),
-]);
diff --git a/packages/slice-machine/src/components/HoverCard/HoverCard.stories.tsx b/packages/slice-machine/src/components/HoverCard/HoverCard.stories.tsx
index 8d3d4ab4ad..71c40157ed 100644
--- a/packages/slice-machine/src/components/HoverCard/HoverCard.stories.tsx
+++ b/packages/slice-machine/src/components/HoverCard/HoverCard.stories.tsx
@@ -32,7 +32,7 @@ export const Image = {
     children: (
       <>
         <HoverCardTitle>Prismic Academy©</HoverCardTitle>
-        <HoverCardMedia component="image" src="phil.png" />
+        <HoverCardMedia component="image" src="prismic-academy-101.png" />
         <HoverCardDescription>
           Lorem ipsum dolor sit amet consectetur. Aenean purus aliquam vel eget
           vitae etiam
diff --git a/packages/slice-machine/src/components/HoverCard/HoverCard.tsx b/packages/slice-machine/src/components/HoverCard/HoverCard.tsx
index 5ccb7e6895..84906ae58f 100644
--- a/packages/slice-machine/src/components/HoverCard/HoverCard.tsx
+++ b/packages/slice-machine/src/components/HoverCard/HoverCard.tsx
@@ -161,7 +161,7 @@ export const HoverCardCloseButton: FC<PropsWithChildren> = ({ children }) => {
 
   return (
     <div className={styles.closeButtonContainer}>
-      <Button className={styles.closeButton} onClick={handleClose}>
+      <Button sx={{ width: "100%" }} onClick={handleClose}>
         {children}
       </Button>
     </div>
diff --git a/packages/slice-machine/src/components/List/List.stories.tsx b/packages/slice-machine/src/components/List/List.stories.tsx
index fb9f1147bb..8b598d3bae 100644
--- a/packages/slice-machine/src/components/List/List.stories.tsx
+++ b/packages/slice-machine/src/components/List/List.stories.tsx
@@ -23,7 +23,7 @@ export const Default = {
                 Show code snippets?
               </Text>
               <Switch size="small" />
-              <Button startIcon="add" variant="secondary">
+              <Button startIcon="add" color="grey">
                 Add
               </Button>
             </>
@@ -35,7 +35,7 @@ export const Default = {
         <ListItem />
         <ListHeader
           actions={
-            <Button startIcon="add" variant="secondary">
+            <Button startIcon="add" color="grey">
               Add
             </Button>
           }
diff --git a/packages/slice-machine/src/components/SideNav/SideNavEnvironmentSelector.tsx b/packages/slice-machine/src/components/SideNav/SideNavEnvironmentSelector.tsx
index 5729b09ad5..72c4f42579 100644
--- a/packages/slice-machine/src/components/SideNav/SideNavEnvironmentSelector.tsx
+++ b/packages/slice-machine/src/components/SideNav/SideNavEnvironmentSelector.tsx
@@ -87,7 +87,7 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
           <IconButton
             icon={<LoginIcon className={styles.loginIcon} />}
             onClick={onLogInClick}
-            data-cy="environment-login-icon-button"
+            hiddenLabel="Log in to enable environments"
           />
         ) : undefined}
 
@@ -114,7 +114,7 @@ const EnvironmentDropdownMenu: FC<EnvironmentDropdownMenuProps> = (props) => {
   return (
     <DropdownMenu modal>
       <DropdownMenuTrigger disabled={environments.length < 2}>
-        <IconButton icon="unfoldMore" data-cy="environment-dropdown-button" />
+        <IconButton icon="unfoldMore" hiddenLabel="Select environment" />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" minWidth={256}>
         {/*
diff --git a/packages/slice-machine/src/components/Window/Window.tsx b/packages/slice-machine/src/components/Window/Window.tsx
index bb41819dd9..3633859955 100644
--- a/packages/slice-machine/src/components/Window/Window.tsx
+++ b/packages/slice-machine/src/components/Window/Window.tsx
@@ -46,7 +46,7 @@ export const WindowTabsList: FC<WindowTabsListProps> = ({
   <Tabs.List {...otherProps} className={styles.tabsList}>
     {children}
     <div className={styles.newTabButton}>
-      <IconButton icon="add" onClick={onAddNewTab} data-cy="add-tab-button" />
+      <IconButton icon="add" onClick={onAddNewTab} hiddenLabel="Add new tab" />
     </div>
   </Tabs.List>
 );
diff --git a/packages/slice-machine/src/features/customTypes/EditDropdown.tsx b/packages/slice-machine/src/features/customTypes/EditDropdown.tsx
index 28a9fffdfe..fb45745bc3 100644
--- a/packages/slice-machine/src/features/customTypes/EditDropdown.tsx
+++ b/packages/slice-machine/src/features/customTypes/EditDropdown.tsx
@@ -5,7 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   Icon,
-  Button,
+  IconButton,
 } from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
 
@@ -72,11 +72,13 @@ export const EditDropdown: FC<EditDropdownProps> = ({
     <>
       <DropdownMenu modal>
         <DropdownMenuTrigger disabled={isCustomTypeBeingConverted}>
-          <Button
-            loading={isCustomTypeBeingConverted}
-            startIcon="moreVert"
-            variant="secondary"
+          <IconButton
+            color="grey"
             data-testid="editDropdown"
+            hiddenLabel="Custom type actions"
+            icon="moreVert"
+            loading={isCustomTypeBeingConverted}
+            variant="solid"
           />
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">
diff --git a/packages/slice-machine/src/features/customTypes/customTypesBuilder/PageSnippetDialog/PageSnippetDialog.tsx b/packages/slice-machine/src/features/customTypes/customTypesBuilder/PageSnippetDialog/PageSnippetDialog.tsx
index 244d891a89..f31c30b79a 100644
--- a/packages/slice-machine/src/features/customTypes/customTypesBuilder/PageSnippetDialog/PageSnippetDialog.tsx
+++ b/packages/slice-machine/src/features/customTypes/customTypesBuilder/PageSnippetDialog/PageSnippetDialog.tsx
@@ -42,7 +42,7 @@ const PageSnippetContent: FC<PageSnippetContentProps> = ({ model }) => {
     <Dialog
       size="small"
       trigger={
-        <Button variant="secondary" onClick={trackOpenSnippet} startIcon="code">
+        <Button color="grey" onClick={trackOpenSnippet} startIcon="code">
           Page snippet
         </Button>
       }
@@ -75,7 +75,7 @@ export const PageSnippetDialog: FC<PageSnippetDialogProps> = ({ model }) => {
       <ErrorBoundary>
         <Suspense
           fallback={
-            <Button variant="secondary" startIcon="code">
+            <Button color="grey" startIcon="code">
               Page snippet
             </Button>
           }
diff --git a/packages/slice-machine/src/features/inAppGuide/InAppGuideDialog.tsx b/packages/slice-machine/src/features/inAppGuide/InAppGuideDialog.tsx
index 4d1997952a..da4552047b 100644
--- a/packages/slice-machine/src/features/inAppGuide/InAppGuideDialog.tsx
+++ b/packages/slice-machine/src/features/inAppGuide/InAppGuideDialog.tsx
@@ -72,13 +72,7 @@ export const InAppGuideDialog: FC = () => {
                     {content.title}
                   </Text>
                 </Box>
-                <Video
-                  src={content.videoUrl}
-                  sizing="contain"
-                  autoPlay
-                  controls
-                  loop
-                />
+                <Video src={content.videoUrl} sizing="contain" autoPlay loop />
                 <Text>{content.description}</Text>
               </Box>
 
diff --git a/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx b/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx
index 057fa0e6cd..20d9fed789 100644
--- a/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx
+++ b/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx
@@ -112,7 +112,7 @@ export const ConvertLegacySliceAsNewSliceDialog: FC<DialogProps> = ({
                       </label>
                       <Select
                         size="medium"
-                        variant="secondary"
+                        color="grey"
                         startIcon="folder"
                         flexContent={true}
                         value={formik.values.from}
diff --git a/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx b/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx
index f89e0afef3..464532e4da 100644
--- a/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx
+++ b/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx
@@ -89,7 +89,7 @@ export const ConvertLegacySliceAsNewVariationDialog: FC<DialogProps> = ({
                       </label>
                       <Select
                         size="medium"
-                        variant="secondary"
+                        color="grey"
                         startIcon="viewDay"
                         flexContent={true}
                         value={`${formik.values.libraryID}::${formik.values.sliceID}`}
diff --git a/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.tsx b/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.tsx
index 85324d5c93..eb14c39ed1 100644
--- a/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.tsx
+++ b/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.tsx
@@ -185,7 +185,7 @@ export const ConvertLegacySliceButton: FC<ConvertLegacySliceButtonProps> = ({
             startIcon="refresh"
             endIcon="arrowDropDown"
             size="medium"
-            variant="secondary"
+            color="grey"
           >
             Migrate legacy slice
           </Button>
diff --git a/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceMergeWithIdenticalDialog.tsx b/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceMergeWithIdenticalDialog.tsx
index b0c9f75386..260812b645 100644
--- a/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceMergeWithIdenticalDialog.tsx
+++ b/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceMergeWithIdenticalDialog.tsx
@@ -68,7 +68,7 @@ export const ConvertLegacySliceMergeWithIdenticalDialog: FC<DialogProps> = ({
                       </label>
                       <Select
                         size="medium"
-                        variant="secondary"
+                        color="grey"
                         startIcon="viewDay"
                         flexContent={true}
                         value={formik.values.path}
diff --git a/packages/slice-machine/src/features/slices/sliceBuilder/FloatingBackButton.tsx b/packages/slice-machine/src/features/slices/sliceBuilder/FloatingBackButton.tsx
index 99c91a57e5..d87e41f34a 100644
--- a/packages/slice-machine/src/features/slices/sliceBuilder/FloatingBackButton.tsx
+++ b/packages/slice-machine/src/features/slices/sliceBuilder/FloatingBackButton.tsx
@@ -52,7 +52,7 @@ const BackButton: FC<BackButtonProps> = ({ sourceCustomTypeId }) => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const url = CUSTOM_TYPES_CONFIG[format!].getBuilderPagePathname(id);
     return (
-      <ButtonGroup density="compact" variant="tertiary">
+      <ButtonGroup density="compact" color="dark">
         <Button
           onClick={() => {
             void router.push(url);
diff --git a/packages/slice-machine/src/features/slices/sliceCards/SharedSliceCard.tsx b/packages/slice-machine/src/features/slices/sliceCards/SharedSliceCard.tsx
index c44fd749df..08e8ef516e 100644
--- a/packages/slice-machine/src/features/slices/sliceCards/SharedSliceCard.tsx
+++ b/packages/slice-machine/src/features/slices/sliceCards/SharedSliceCard.tsx
@@ -163,7 +163,7 @@ export const SharedSliceCard: FC<SharedSliceCardProps> = (props) => {
           ) : action.type === "menu" ? (
             <DropdownMenu modal>
               <DropdownMenuTrigger disabled={disabled}>
-                <IconButton data-cy="slice-action-icon" icon="moreVert" />
+                <IconButton hiddenLabel="Slice actions" icon="moreVert" />
               </DropdownMenuTrigger>
               <DropdownMenuContent
                 align="end"
@@ -250,7 +250,7 @@ const UpdateScreenshotButton: FC<UpdateScreenshotButtonProps> = (props) => (
     renderStartIcon={() => (
       <AddPhotoAlternateIcon color={tokens.color.greyLight11} />
     )}
-    variant="secondary"
+    color="grey"
   >
     Update screenshot
   </Button>
diff --git a/playwright/pages/SliceBuilderPage.ts b/playwright/pages/SliceBuilderPage.ts
index 62c5c9c705..53d2e46691 100644
--- a/playwright/pages/SliceBuilderPage.ts
+++ b/playwright/pages/SliceBuilderPage.ts
@@ -98,7 +98,7 @@ export class SliceBuilderPage extends BuilderPage {
     action: "Rename" | "Delete",
   ) {
     await this.getVariationCard(name, variation)
-      .getByTestId("slice-action-icon")
+      .getByRole("button", { name: "Slice actions", exact: true })
       .click();
     await this.page
       .getByTestId("slice-action-icon-dropdown")
diff --git a/playwright/pages/SlicesListPage.ts b/playwright/pages/SlicesListPage.ts
index 4973d0a813..15bd62adbc 100644
--- a/playwright/pages/SlicesListPage.ts
+++ b/playwright/pages/SlicesListPage.ts
@@ -64,7 +64,9 @@ export class SlicesListPage extends SliceMachinePage {
   }
 
   async openActionMenu(name: string, action: "Rename" | "Delete") {
-    await this.getCard(name).getByTestId("slice-action-icon").click();
+    await this.getCard(name)
+      .getByRole("button", { name: "Slice actions", exact: true })
+      .click();
     await this.page
       .getByTestId("slice-action-icon-dropdown")
       .getByText(action, { exact: true })
diff --git a/playwright/pages/components/EnvironmentSelector.ts b/playwright/pages/components/EnvironmentSelector.ts
index d63cdf8a3c..0149b95cb0 100644
--- a/playwright/pages/components/EnvironmentSelector.ts
+++ b/playwright/pages/components/EnvironmentSelector.ts
@@ -20,11 +20,15 @@ export class EnvironmentSelector {
       name: "Login required",
       exact: true,
     });
-    // TODO(DT-1874): Replace with `getByRole` once `<IconButton>` supports labels.
-    this.loginIconButton = page.getByTestId("environment-login-icon-button");
+    this.loginIconButton = page.getByRole("button", {
+      name: "Log in to enable environments",
+      exact: true,
+    });
     this.environmentName = page.getByTestId("active-environment-name");
-    // TODO(DT-1874): Replace with `getByRole` once `<IconButton>` supports labels.
-    this.dropdownTrigger = page.getByTestId("environment-dropdown-button");
+    this.dropdownTrigger = page.getByRole("button", {
+      name: "Select environment",
+      exact: true,
+    });
   }
 
   /**
diff --git a/playwright/pages/shared/TypeBuilderPage.ts b/playwright/pages/shared/TypeBuilderPage.ts
index 5b8311eefb..acec5af0dc 100644
--- a/playwright/pages/shared/TypeBuilderPage.ts
+++ b/playwright/pages/shared/TypeBuilderPage.ts
@@ -66,8 +66,10 @@ export class TypeBuilderPage extends BuilderPage {
     // Tabs
     this.tabList = page.getByRole("tablist");
     this.tab = this.tabList.getByRole("tab");
-    // TODO(DT-1874): Replace with `getByRole` once `<IconButton>` supports labels.
-    this.addTabButton = this.tabList.getByTestId("add-tab-button");
+    this.addTabButton = this.tabList.getByRole("button", {
+      name: "Add new tab",
+      exact: true,
+    });
     // Static zone
     this.staticZone = page.getByTestId("ct-static-zone");
     this.staticZonePlaceholder = this.staticZone.getByText(
diff --git a/playwright/pages/shared/TypesTablePage.ts b/playwright/pages/shared/TypesTablePage.ts
index 2665c57460..6243a7ea08 100644
--- a/playwright/pages/shared/TypesTablePage.ts
+++ b/playwright/pages/shared/TypesTablePage.ts
@@ -73,7 +73,9 @@ export class TypesTablePage extends SliceMachinePage {
   }
 
   async openActionMenu(name: string, action: "Rename" | "Delete") {
-    await this.getRow(name).locator('[data-testid="editDropdown"]').click();
+    await this.getRow(name)
+      .getByRole("button", { name: "Custom type actions", exact: true })
+      .click();
     await this.page
       .getByRole("menuitem", { name: action, exact: true })
       .click();
diff --git a/yarn.lock b/yarn.lock
index 045eb66e7e..3eddd866ae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4820,12 +4820,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@prismicio/editor-fields@npm:0.4.17":
-  version: 0.4.17
-  resolution: "@prismicio/editor-fields@npm:0.4.17"
+"@prismicio/editor-fields@npm:0.4.18":
+  version: 0.4.18
+  resolution: "@prismicio/editor-fields@npm:0.4.18"
   dependencies:
     "@floating-ui/react-dom-interactions": 0.9.3
-    "@prismicio/editor-support": 0.4.17
+    "@prismicio/editor-support": 0.4.18
     "@prismicio/richtext": 2.1.1
     "@prismicio/types-internal": 2.3.1
     "@tiptap/core": 2.0.3
@@ -4856,19 +4856,23 @@ __metadata:
     uuid: 9.0.0
     zod: 3.21.4
   peerDependencies:
-    "@prismicio/editor-ui": ^0.4.17
+    "@prismicio/editor-ui": ^0.4.18
     react: 18
     react-dom: 18
-  checksum: 3f5acdb0859af0681975d98e7779b0bb5f082d4b07b2d9c5e886d528ac11e083bc536c3bd7469b3cee6b39e91208a87140ec8dbc1ffbf2182d93f37b7a3e3779
+  checksum: 1ae53fdbe6313f4c5b8de4c9283a411c27793485ca33a97efca3443233cb60bac7a1edbbeb7e18f0291f7c03e98c9ccd0e819b8f4ebadb55d7eb9d36a8edffa0
   languageName: node
   linkType: hard
 
-"@prismicio/editor-support@npm:0.4.17":
-  version: 0.4.17
-  resolution: "@prismicio/editor-support@npm:0.4.17"
+"@prismicio/editor-support@npm:0.4.18":
+  version: 0.4.18
+  resolution: "@prismicio/editor-support@npm:0.4.18"
   dependencies:
     "@prismicio/types-internal": 2.3.1
+    fp-ts: 2.12.3
     io-ts: 2.2.18
+    io-ts-types: 0.5.16
+    monocle-ts: ""
+    newtype-ts: ""
     tslib: 2.4.0
   peerDependencies:
     react: 17 || 18
@@ -4878,16 +4882,16 @@ __metadata:
       optional: true
     zod:
       optional: true
-  checksum: 0b435944216f45049c98b903fe696d272fa73cd0cea50ef8ce86018faeb3b2c3e57346b85aef28287169f1a701d9f3cf6e7b25a0079eaf3770f5e6bddb767ecb
+  checksum: ff25414add5d9f75f73f60ffed4f9b2b98dfa6d9c1aaf5d7ca87774b84c1a49b6b0b97ae38e571eadbec066d3152121a017bf0ca7d8a77c659f74f625b215b8b
   languageName: node
   linkType: hard
 
-"@prismicio/editor-ui@npm:0.4.17":
-  version: 0.4.17
-  resolution: "@prismicio/editor-ui@npm:0.4.17"
+"@prismicio/editor-ui@npm:0.4.18":
+  version: 0.4.18
+  resolution: "@prismicio/editor-ui@npm:0.4.18"
   dependencies:
     "@internationalized/date": 3.5.0
-    "@prismicio/editor-support": 0.4.17
+    "@prismicio/editor-support": 0.4.18
     "@radix-ui/react-avatar": 1.0.4
     "@radix-ui/react-checkbox": 1.0.4
     "@radix-ui/react-dialog": 1.0.5
@@ -4905,6 +4909,7 @@ __metadata:
     "@radix-ui/react-toggle-group": 1.0.1
     "@radix-ui/react-toolbar": 1.0.1
     "@radix-ui/react-tooltip": 1.0.7
+    "@radix-ui/react-visually-hidden": 1.0.3
     "@react-aria/calendar": 3.5.1
     "@react-aria/color": 3.0.0-beta.20
     "@react-aria/datepicker": 3.8.0
@@ -4926,7 +4931,7 @@ __metadata:
   peerDependencies:
     react: 17 || 18
     react-dom: 17 || 18
-  checksum: 218eaf83fada838776ba4e3c0a5806487479768fd05e153f1677e3e12034bf2416ccf4f2450e87ad52d31bd3c790f8038e5ef3eeaaaade01e004eb9e05d7ca38
+  checksum: c15a4ed2b28ceb98cc6e0cc75c74287b193641d209a4530d3a2508ab0c49beca71cc03a3228a16e679f8fefa93e736e3c84ec3f99772a2fcc41b30444a28e160
   languageName: node
   linkType: hard
 
@@ -30208,9 +30213,9 @@ __metadata:
   dependencies:
     "@emotion/react": 11.11.1
     "@extractus/oembed-extractor": 3.1.8
-    "@prismicio/editor-fields": 0.4.17
-    "@prismicio/editor-support": 0.4.17
-    "@prismicio/editor-ui": 0.4.17
+    "@prismicio/editor-fields": 0.4.18
+    "@prismicio/editor-support": 0.4.18
+    "@prismicio/editor-ui": 0.4.18
     "@prismicio/mocks": 2.0.0-alpha.2
     "@prismicio/simulator": 0.1.4
     "@prismicio/types-internal": 2.2.0