fix(accessibility): Update editor packages & use hiddenLabel for Icon…

… Button (#1257)
prismicio · Dec 27, 2023 · 1b9bef7 · 1b9bef7
1 parent 85da77e
commit 1b9bef7
Show file tree

Hide file tree

Showing 31 changed files with 84 additions and 84 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...chine/src/features/customTypes/customTypesBuilder/PageSnippetDialog/PageSnippetDialog.tsx b/...chine/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
@@ -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/...ice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx b/...ice-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/...machine/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx b/...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
@@ -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/...ine/src/features/slices/convertLegacySlice/ConvertLegacySliceMergeWithIdenticalDialog.tsx b/...ine/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();