diff --git a/package-lock.json b/package-lock.json
index f6ec21dfe..2226f54d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10091,7 +10091,7 @@
     "buffer-crc32": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
-      "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+      "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=",
       "dev": true
     },
     "buffer-equal-constant-time": {
@@ -14970,7 +14970,7 @@
         "pify": {
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
           "dev": true
         }
       }
@@ -15453,7 +15453,7 @@
     "fd-slicer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
-      "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+      "integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
       "dev": true,
       "requires": {
         "pend": "~1.2.0"
@@ -23602,7 +23602,7 @@
     "ospath": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/ospath/-/ospath-1.2.2.tgz",
-      "integrity": "sha512-o6E5qJV5zkAbIDNhGSIlyOhScKXgQrSRMilfph0clDfM0nEnBOlKlH4sWDmG95BW/CvwNz0vmm7dJVtU2KlMiA==",
+      "integrity": "sha1-EnZjl3Sj+O8lcvf+QoDg6kVQwHs=",
       "dev": true
     },
     "p-cancelable": {
@@ -24155,7 +24155,7 @@
     "pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
+      "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
       "dev": true
     },
     "performance-now": {
@@ -27216,7 +27216,7 @@
     "request-progress": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/request-progress/-/request-progress-3.0.0.tgz",
-      "integrity": "sha512-MnWzEHHaxHO2iWiQuHrUPBi/1WeBf5PkxQqNyNvLl9VAYSdXkP8tQ3pBSeCPD+yw0v0Aq1zosWLz0BdeXpWwZg==",
+      "integrity": "sha1-TKdUCBx/7GP1BeT6qCWqBs1mnb4=",
       "dev": true,
       "requires": {
         "throttleit": "^1.0.0"
diff --git a/src/components/SortableChip/SortableChip.tsx b/src/components/SortableChip/SortableChip.tsx
index 2b41e3590..e118289f6 100644
--- a/src/components/SortableChip/SortableChip.tsx
+++ b/src/components/SortableChip/SortableChip.tsx
@@ -15,10 +15,14 @@ export interface SortableChipProps extends SortableElementProps {
 
 const useStyles = makeStyles(
   theme => ({
+    closeButton: {
+      marginLeft: theme.spacing(),
+      background: "none",
+      border: "none",
+    },
     closeIcon: {
       cursor: "pointer",
       fontSize: 16,
-      marginLeft: theme.spacing(),
       verticalAlign: "middle",
     },
     content: {
@@ -39,11 +43,18 @@ const useStyles = makeStyles(
   { name: "SortableChip" },
 );
 
-const SortableChip = SortableElement<SortableChipProps>(props => {
+const SortableChip = SortableElement((props: SortableChipProps) => {
   const { className, label, onClose } = props;
 
   const classes = useStyles(props);
 
+  const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    if (onClose) {
+      onClose();
+    }
+  };
+
   return (
     <div className={classNames(classes.root, className)}>
       <div className={classes.content}>
@@ -53,11 +64,13 @@ const SortableChip = SortableElement<SortableChipProps>(props => {
         />
         <Typography data-test-id="chip-label">{label}</Typography>
         {onClose && (
-          <CloseIcon
-            className={classes.closeIcon}
-            onClick={onClose}
+          <button
+            className={classes.closeButton}
+            onClick={handleClose}
             data-test-id="button-close"
-          />
+          >
+            <CloseIcon className={classes.closeIcon} />
+          </button>
         )}
       </div>
     </div>
diff --git a/src/components/SortableChip/SortableHandle.tsx b/src/components/SortableChip/SortableHandle.tsx
index 59828d4b8..b3efa5fd0 100644
--- a/src/components/SortableChip/SortableHandle.tsx
+++ b/src/components/SortableChip/SortableHandle.tsx
@@ -12,16 +12,20 @@ const useStyles = makeStyles(
   { name: "SortableHandle" },
 );
 
-interface SortableHandle {
+interface SortableHandleProps {
   className?: string;
 }
 
-const SortableHandle = SortableHandleHoc(props => {
+const SortableHandle = SortableHandleHoc((props: SortableHandleProps) => {
   const { className, ...restProps } = props;
   const classes = useStyles(props);
 
   return (
-    <DragIcon className={classNames(classes.drag, className)} {...restProps} />
+    <DragIcon
+      className={classNames(classes.drag, className)}
+      tabIndex={0}
+      {...restProps}
+    />
   );
 });
 
diff --git a/src/components/SortableChipsField/SortableContainer.tsx b/src/components/SortableChipsField/SortableContainer.tsx
index 01f88e250..c6bf81dbf 100644
--- a/src/components/SortableChipsField/SortableContainer.tsx
+++ b/src/components/SortableChipsField/SortableContainer.tsx
@@ -1,5 +1,14 @@
-import { SortableContainer as SortableContainerHoc } from "react-sortable-hoc";
+import {
+  SortableContainer as SortableContainerHoc,
+  SortableContainerProps as SortableContainerHocProps,
+} from "react-sortable-hoc";
 
-const SortableContainer = SortableContainerHoc(({ children }) => children);
+interface SortableContainerProps extends SortableContainerHocProps {
+  children: React.ReactElement;
+}
+
+const SortableContainer = SortableContainerHoc(
+  ({ children }: SortableContainerProps) => children,
+);
 
 export default SortableContainer;
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 76aaced65..c89f0209e 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -2032,6 +2032,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
                 fill="none"
                 focusable="false"
                 height="24"
+                tabindex="0"
                 viewBox="0 0 24 24"
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -2049,17 +2050,21 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
               >
                 References First Value
               </div>
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+              <button
+                class="SortableChip-closeButton-id"
                 data-test-id="button-close"
-                focusable="false"
-                viewBox="0 0 24 24"
               >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
           <div
@@ -2075,6 +2080,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
                 fill="none"
                 focusable="false"
                 height="24"
+                tabindex="0"
                 viewBox="0 0 24 24"
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -2092,17 +2098,21 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
               >
                 References Second Value
               </div>
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+              <button
+                class="SortableChip-closeButton-id"
                 data-test-id="button-close"
-                focusable="false"
-                viewBox="0 0 24 24"
               >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
           <div
@@ -2118,6 +2128,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
                 fill="none"
                 focusable="false"
                 height="24"
+                tabindex="0"
                 viewBox="0 0 24 24"
                 width="24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -2135,17 +2146,21 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
               >
                 References Third Value
               </div>
-              <svg
-                aria-hidden="true"
-                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+              <button
+                class="SortableChip-closeButton-id"
                 data-test-id="button-close"
-                focusable="false"
-                viewBox="0 0 24 24"
               >
-                <path
-                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                  />
+                </svg>
+              </button>
             </div>
           </div>
         </div>
@@ -15810,6 +15825,7 @@ exports[`Storyshots Generics / Sortable chip default 1`] = `
             fill="none"
             focusable="false"
             height="24"
+            tabindex="0"
             viewBox="0 0 24 24"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
@@ -15858,6 +15874,7 @@ exports[`Storyshots Generics / Sortable chip with x 1`] = `
             fill="none"
             focusable="false"
             height="24"
+            tabindex="0"
             viewBox="0 0 24 24"
             width="24"
             xmlns="http://www.w3.org/2000/svg"
@@ -15875,17 +15892,21 @@ exports[`Storyshots Generics / Sortable chip with x 1`] = `
           >
             Lorem Ipsum
           </div>
-          <svg
-            aria-hidden="true"
-            class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+          <button
+            class="SortableChip-closeButton-id"
             data-test-id="button-close"
-            focusable="false"
-            viewBox="0 0 24 24"
           >
-            <path
-              d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-            />
-          </svg>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              />
+            </svg>
+          </button>
         </div>
       </div>
     </div>
@@ -15918,6 +15939,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
               fill="none"
               focusable="false"
               height="24"
+              tabindex="0"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"
@@ -15935,17 +15957,21 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             >
               Item 1
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+            <button
+              class="SortableChip-closeButton-id"
               data-test-id="button-close"
-              focusable="false"
-              viewBox="0 0 24 24"
             >
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
@@ -15961,6 +15987,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
               fill="none"
               focusable="false"
               height="24"
+              tabindex="0"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"
@@ -15978,17 +16005,21 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             >
               Item 2
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+            <button
+              class="SortableChip-closeButton-id"
               data-test-id="button-close"
-              focusable="false"
-              viewBox="0 0 24 24"
             >
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
@@ -16004,6 +16035,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
               fill="none"
               focusable="false"
               height="24"
+              tabindex="0"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"
@@ -16021,17 +16053,21 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             >
               Item 3
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+            <button
+              class="SortableChip-closeButton-id"
               data-test-id="button-close"
-              focusable="false"
-              viewBox="0 0 24 24"
             >
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
@@ -16047,6 +16083,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
               fill="none"
               focusable="false"
               height="24"
+              tabindex="0"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"
@@ -16064,17 +16101,21 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             >
               Item 4
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+            <button
+              class="SortableChip-closeButton-id"
               data-test-id="button-close"
-              focusable="false"
-              viewBox="0 0 24 24"
             >
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
@@ -16090,6 +16131,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
               fill="none"
               focusable="false"
               height="24"
+              tabindex="0"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"
@@ -16107,17 +16149,21 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             >
               Item 5
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+            <button
+              class="SortableChip-closeButton-id"
               data-test-id="button-close"
-              focusable="false"
-              viewBox="0 0 24 24"
             >
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
@@ -16133,6 +16179,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
               fill="none"
               focusable="false"
               height="24"
+              tabindex="0"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"
@@ -16150,17 +16197,21 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             >
               Item 6
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+            <button
+              class="SortableChip-closeButton-id"
               data-test-id="button-close"
-              focusable="false"
-              viewBox="0 0 24 24"
             >
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </button>
           </div>
         </div>
       </div>
@@ -16218,6 +16269,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
               fill="none"
               focusable="false"
               height="24"
+              tabindex="0"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"
@@ -16235,17 +16287,21 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             >
               Item 1
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+            <button
+              class="SortableChip-closeButton-id"
               data-test-id="button-close"
-              focusable="false"
-              viewBox="0 0 24 24"
             >
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
@@ -16261,6 +16317,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
               fill="none"
               focusable="false"
               height="24"
+              tabindex="0"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"
@@ -16278,17 +16335,21 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             >
               Item 2
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+            <button
+              class="SortableChip-closeButton-id"
               data-test-id="button-close"
-              focusable="false"
-              viewBox="0 0 24 24"
             >
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
@@ -16304,6 +16365,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
               fill="none"
               focusable="false"
               height="24"
+              tabindex="0"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"
@@ -16321,17 +16383,21 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             >
               Item 3
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+            <button
+              class="SortableChip-closeButton-id"
               data-test-id="button-close"
-              focusable="false"
-              viewBox="0 0 24 24"
             >
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
@@ -16347,6 +16413,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
               fill="none"
               focusable="false"
               height="24"
+              tabindex="0"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"
@@ -16364,17 +16431,21 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             >
               Item 4
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+            <button
+              class="SortableChip-closeButton-id"
               data-test-id="button-close"
-              focusable="false"
-              viewBox="0 0 24 24"
             >
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
@@ -16390,6 +16461,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
               fill="none"
               focusable="false"
               height="24"
+              tabindex="0"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"
@@ -16407,17 +16479,21 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             >
               Item 5
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+            <button
+              class="SortableChip-closeButton-id"
               data-test-id="button-close"
-              focusable="false"
-              viewBox="0 0 24 24"
             >
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div
@@ -16433,6 +16509,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
               fill="none"
               focusable="false"
               height="24"
+              tabindex="0"
               viewBox="0 0 24 24"
               width="24"
               xmlns="http://www.w3.org/2000/svg"
@@ -16450,17 +16527,21 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             >
               Item 6
             </div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+            <button
+              class="SortableChip-closeButton-id"
               data-test-id="button-close"
-              focusable="false"
-              viewBox="0 0 24 24"
             >
-              <path
-                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+                />
+              </svg>
+            </button>
           </div>
         </div>
         <div