diff --git a/packages/components/src/color-picker/test/__snapshots__/index.js.snap b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
index 6137b1d80a4e74..e273ce72527815 100644
--- a/packages/components/src/color-picker/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-picker/test/__snapshots__/index.js.snap
@@ -5,51 +5,51 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -11,38 +11,38 @@
-          onTouchMove={[Function bound handleChange]}
-          onTouchStart={[Function bound handleChange]}
-          role="application"
+@@ -10,38 +10,38 @@
+        onTouchMove={[Function bound handleChange]}
+        onTouchStart={[Function bound handleChange]}
+        role="application"
+        style={
+          Object {
+-           "background": "hsl(210,100%, 50%)",
++           "background": "hsl(0,100%, 50%)",
+          }
+        }
+      >
+        <div
+          className="components-color-picker__saturation-white"
+        />
+        <div
+          className="components-color-picker__saturation-black"
+        />
+        <button
+-         aria-describedby="color-picker-saturation-4"
++         aria-describedby="color-picker-saturation-3"
+          aria-label="Choose a shade"
+          className="components-button components-color-picker__saturation-pointer"
+          onKeyDown={[Function bound handleKeyDown]}
           style={
             Object {
--             "background": "hsl(210,100%, 50%)",
-+             "background": "hsl(0,100%, 50%)",
+-             "left": "17%",
+-             "top": "20%",
++             "left": "0%",
++             "top": "0%",
             }
           }
-        >
-          <div
-            className="components-color-picker__saturation-white"
-          />
-          <div
-            className="components-color-picker__saturation-black"
-          />
-          <button
--           aria-describedby="color-picker-saturation-4"
-+           aria-describedby="color-picker-saturation-3"
-            aria-label="Choose a shade"
-            className="components-button components-color-picker__saturation-pointer"
-            onKeyDown={[Function preventKeyEvents]}
-            style={
-              Object {
--               "left": "17%",
--               "top": "20%",
-+               "left": "0%",
-+               "top": "0%",
-              }
-            }
-            type="button"
-          />
-          <div
-            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-            data-wp-c16t={true}
-            data-wp-component="VisuallyHidden"
--           id="color-picker-saturation-4"
-+           id="color-picker-saturation-3"
-            style={
-              Object {
-                "WebkitClipPath": "inset( 50% )",
-                "border": 0,
-                "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -73,11 +73,11 @@
+          type="button"
+        />
+        <div
+          className="components-visually-hidden css-1mm2cvy-View em57xhy0"
+          data-wp-c16t={true}
+          data-wp-component="VisuallyHidden"
+-         id="color-picker-saturation-4"
++         id="color-picker-saturation-3"
+          style={
+            Object {
+              "WebkitClipPath": "inset( 50% )",
+              "border": 0,
+              "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -71,11 +71,11 @@
         >
           <div
             className="components-color-picker__active"
@@ -62,43 +62,43 @@ Snapshot Diff:
           />
         </div>
         <div
-@@ -95,31 +95,31 @@
-                onMouseDown={[Function bound handleMouseDown]}
-                onTouchMove={[Function bound handleChange]}
-                onTouchStart={[Function bound handleChange]}
-              >
-                <div
--                 aria-describedby="components-color-picker__hue-description-4"
-+                 aria-describedby="components-color-picker__hue-description-3"
-                  aria-label="Hue value in degrees, from 0 to 359."
-                  aria-orientation="horizontal"
-                  aria-valuemax="1"
-                  aria-valuemin="359"
--                 aria-valuenow={210}
-+                 aria-valuenow={0}
-                  className="components-color-picker__hue-pointer"
-                  onKeyDown={[Function preventKeyEvents]}
-                  role="slider"
-                  style={
-                    Object {
--                     "left": "58.333333333333336%",
-+                     "left": "0%",
-                    }
+@@ -92,31 +92,31 @@
+              onMouseDown={[Function bound handleMouseDown]}
+              onTouchMove={[Function bound handleChange]}
+              onTouchStart={[Function bound handleChange]}
+            >
+              <div
+-               aria-describedby="components-color-picker__hue-description-4"
++               aria-describedby="components-color-picker__hue-description-3"
+                aria-label="Hue value in degrees, from 0 to 359."
+                aria-orientation="horizontal"
+                aria-valuemax="1"
+                aria-valuemin="359"
+-               aria-valuenow={210}
++               aria-valuenow={0}
+                className="components-color-picker__hue-pointer"
+                onKeyDown={[Function bound handleKeyDown]}
+                role="slider"
+                style={
+                  Object {
+-                   "left": "58.333333333333336%",
++                   "left": "0%",
                   }
-                  tabIndex="0"
-                />
-                <p
-                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-                  data-wp-c16t={true}
-                  data-wp-component="VisuallyHidden"
--                 id="components-color-picker__hue-description-4"
-+                 id="components-color-picker__hue-description-3"
-                  style={
-                    Object {
-                      "WebkitClipPath": "inset( 50% )",
-                      "border": 0,
-                      "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -153,22 +153,22 @@
+                }
+                tabIndex="0"
+              />
+              <p
+                className="components-visually-hidden css-1mm2cvy-View em57xhy0"
+                data-wp-c16t={true}
+                data-wp-component="VisuallyHidden"
+-               id="components-color-picker__hue-description-4"
++               id="components-color-picker__hue-description-3"
+                style={
+                  Object {
+                    "WebkitClipPath": "inset( 50% )",
+                    "border": 0,
+                    "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -149,22 +149,22 @@
             <div
               className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
             >
@@ -131,51 +131,51 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -11,38 +11,38 @@
-          onTouchMove={[Function bound handleChange]}
-          onTouchStart={[Function bound handleChange]}
-          role="application"
+@@ -10,38 +10,38 @@
+        onTouchMove={[Function bound handleChange]}
+        onTouchStart={[Function bound handleChange]}
+        role="application"
+        style={
+          Object {
+-           "background": "hsl(210,100%, 50%)",
++           "background": "hsl(0,100%, 50%)",
+          }
+        }
+      >
+        <div
+          className="components-color-picker__saturation-white"
+        />
+        <div
+          className="components-color-picker__saturation-black"
+        />
+        <button
+-         aria-describedby="color-picker-saturation-8"
++         aria-describedby="color-picker-saturation-7"
+          aria-label="Choose a shade"
+          className="components-button components-color-picker__saturation-pointer"
+          onKeyDown={[Function bound handleKeyDown]}
           style={
             Object {
--             "background": "hsl(210,100%, 50%)",
-+             "background": "hsl(0,100%, 50%)",
+-             "left": "17%",
+-             "top": "20%",
++             "left": "0%",
++             "top": "0%",
             }
           }
-        >
-          <div
-            className="components-color-picker__saturation-white"
-          />
-          <div
-            className="components-color-picker__saturation-black"
-          />
-          <button
--           aria-describedby="color-picker-saturation-8"
-+           aria-describedby="color-picker-saturation-7"
-            aria-label="Choose a shade"
-            className="components-button components-color-picker__saturation-pointer"
-            onKeyDown={[Function preventKeyEvents]}
-            style={
-              Object {
--               "left": "17%",
--               "top": "20%",
-+               "left": "0%",
-+               "top": "0%",
-              }
-            }
-            type="button"
-          />
-          <div
-            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-            data-wp-c16t={true}
-            data-wp-component="VisuallyHidden"
--           id="color-picker-saturation-8"
-+           id="color-picker-saturation-7"
-            style={
-              Object {
-                "WebkitClipPath": "inset( 50% )",
-                "border": 0,
-                "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -73,11 +73,11 @@
+          type="button"
+        />
+        <div
+          className="components-visually-hidden css-1mm2cvy-View em57xhy0"
+          data-wp-c16t={true}
+          data-wp-component="VisuallyHidden"
+-         id="color-picker-saturation-8"
++         id="color-picker-saturation-7"
+          style={
+            Object {
+              "WebkitClipPath": "inset( 50% )",
+              "border": 0,
+              "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -71,11 +71,11 @@
         >
           <div
             className="components-color-picker__active"
@@ -188,43 +188,43 @@ Snapshot Diff:
           />
         </div>
         <div
-@@ -95,31 +95,31 @@
-                onMouseDown={[Function bound handleMouseDown]}
-                onTouchMove={[Function bound handleChange]}
-                onTouchStart={[Function bound handleChange]}
-              >
-                <div
--                 aria-describedby="components-color-picker__hue-description-8"
-+                 aria-describedby="components-color-picker__hue-description-7"
-                  aria-label="Hue value in degrees, from 0 to 359."
-                  aria-orientation="horizontal"
-                  aria-valuemax="1"
-                  aria-valuemin="359"
--                 aria-valuenow={210}
-+                 aria-valuenow={0}
-                  className="components-color-picker__hue-pointer"
-                  onKeyDown={[Function preventKeyEvents]}
-                  role="slider"
-                  style={
-                    Object {
--                     "left": "58.333333333333336%",
-+                     "left": "0%",
-                    }
+@@ -92,31 +92,31 @@
+              onMouseDown={[Function bound handleMouseDown]}
+              onTouchMove={[Function bound handleChange]}
+              onTouchStart={[Function bound handleChange]}
+            >
+              <div
+-               aria-describedby="components-color-picker__hue-description-8"
++               aria-describedby="components-color-picker__hue-description-7"
+                aria-label="Hue value in degrees, from 0 to 359."
+                aria-orientation="horizontal"
+                aria-valuemax="1"
+                aria-valuemin="359"
+-               aria-valuenow={210}
++               aria-valuenow={0}
+                className="components-color-picker__hue-pointer"
+                onKeyDown={[Function bound handleKeyDown]}
+                role="slider"
+                style={
+                  Object {
+-                   "left": "58.333333333333336%",
++                   "left": "0%",
                   }
-                  tabIndex="0"
-                />
-                <p
-                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-                  data-wp-c16t={true}
-                  data-wp-component="VisuallyHidden"
--                 id="components-color-picker__hue-description-8"
-+                 id="components-color-picker__hue-description-7"
-                  style={
-                    Object {
-                      "WebkitClipPath": "inset( 50% )",
-                      "border": 0,
-                      "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -153,22 +153,22 @@
+                }
+                tabIndex="0"
+              />
+              <p
+                className="components-visually-hidden css-1mm2cvy-View em57xhy0"
+                data-wp-c16t={true}
+                data-wp-component="VisuallyHidden"
+-               id="components-color-picker__hue-description-8"
++               id="components-color-picker__hue-description-7"
+                style={
+                  Object {
+                    "WebkitClipPath": "inset( 50% )",
+                    "border": 0,
+                    "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -149,22 +149,22 @@
             <div
               className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
             >
@@ -257,51 +257,51 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -11,38 +11,38 @@
-          onTouchMove={[Function bound handleChange]}
-          onTouchStart={[Function bound handleChange]}
-          role="application"
+@@ -10,38 +10,38 @@
+        onTouchMove={[Function bound handleChange]}
+        onTouchStart={[Function bound handleChange]}
+        role="application"
+        style={
+          Object {
+-           "background": "hsl(210,100%, 50%)",
++           "background": "hsl(0,100%, 50%)",
+          }
+        }
+      >
+        <div
+          className="components-color-picker__saturation-white"
+        />
+        <div
+          className="components-color-picker__saturation-black"
+        />
+        <button
+-         aria-describedby="color-picker-saturation-10"
++         aria-describedby="color-picker-saturation-9"
+          aria-label="Choose a shade"
+          className="components-button components-color-picker__saturation-pointer"
+          onKeyDown={[Function bound handleKeyDown]}
           style={
             Object {
--             "background": "hsl(210,100%, 50%)",
-+             "background": "hsl(0,100%, 50%)",
+-             "left": "17%",
+-             "top": "20%",
++             "left": "0%",
++             "top": "0%",
             }
           }
-        >
-          <div
-            className="components-color-picker__saturation-white"
-          />
-          <div
-            className="components-color-picker__saturation-black"
-          />
-          <button
--           aria-describedby="color-picker-saturation-10"
-+           aria-describedby="color-picker-saturation-9"
-            aria-label="Choose a shade"
-            className="components-button components-color-picker__saturation-pointer"
-            onKeyDown={[Function preventKeyEvents]}
-            style={
-              Object {
--               "left": "17%",
--               "top": "20%",
-+               "left": "0%",
-+               "top": "0%",
-              }
-            }
-            type="button"
-          />
-          <div
-            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-            data-wp-c16t={true}
-            data-wp-component="VisuallyHidden"
--           id="color-picker-saturation-10"
-+           id="color-picker-saturation-9"
-            style={
-              Object {
-                "WebkitClipPath": "inset( 50% )",
-                "border": 0,
-                "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -73,11 +73,11 @@
+          type="button"
+        />
+        <div
+          className="components-visually-hidden css-1mm2cvy-View em57xhy0"
+          data-wp-c16t={true}
+          data-wp-component="VisuallyHidden"
+-         id="color-picker-saturation-10"
++         id="color-picker-saturation-9"
+          style={
+            Object {
+              "WebkitClipPath": "inset( 50% )",
+              "border": 0,
+              "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -71,11 +71,11 @@
         >
           <div
             className="components-color-picker__active"
@@ -314,43 +314,43 @@ Snapshot Diff:
           />
         </div>
         <div
-@@ -95,31 +95,31 @@
-                onMouseDown={[Function bound handleMouseDown]}
-                onTouchMove={[Function bound handleChange]}
-                onTouchStart={[Function bound handleChange]}
-              >
-                <div
--                 aria-describedby="components-color-picker__hue-description-10"
-+                 aria-describedby="components-color-picker__hue-description-9"
-                  aria-label="Hue value in degrees, from 0 to 359."
-                  aria-orientation="horizontal"
-                  aria-valuemax="1"
-                  aria-valuemin="359"
--                 aria-valuenow={210}
-+                 aria-valuenow={0}
-                  className="components-color-picker__hue-pointer"
-                  onKeyDown={[Function preventKeyEvents]}
-                  role="slider"
-                  style={
-                    Object {
--                     "left": "58.333333333333336%",
-+                     "left": "0%",
-                    }
+@@ -92,31 +92,31 @@
+              onMouseDown={[Function bound handleMouseDown]}
+              onTouchMove={[Function bound handleChange]}
+              onTouchStart={[Function bound handleChange]}
+            >
+              <div
+-               aria-describedby="components-color-picker__hue-description-10"
++               aria-describedby="components-color-picker__hue-description-9"
+                aria-label="Hue value in degrees, from 0 to 359."
+                aria-orientation="horizontal"
+                aria-valuemax="1"
+                aria-valuemin="359"
+-               aria-valuenow={210}
++               aria-valuenow={0}
+                className="components-color-picker__hue-pointer"
+                onKeyDown={[Function bound handleKeyDown]}
+                role="slider"
+                style={
+                  Object {
+-                   "left": "58.333333333333336%",
++                   "left": "0%",
                   }
-                  tabIndex="0"
-                />
-                <p
-                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-                  data-wp-c16t={true}
-                  data-wp-component="VisuallyHidden"
--                 id="components-color-picker__hue-description-10"
-+                 id="components-color-picker__hue-description-9"
-                  style={
-                    Object {
-                      "WebkitClipPath": "inset( 50% )",
-                      "border": 0,
-                      "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -153,22 +153,22 @@
+                }
+                tabIndex="0"
+              />
+              <p
+                className="components-visually-hidden css-1mm2cvy-View em57xhy0"
+                data-wp-c16t={true}
+                data-wp-component="VisuallyHidden"
+-               id="components-color-picker__hue-description-10"
++               id="components-color-picker__hue-description-9"
+                style={
+                  Object {
+                    "WebkitClipPath": "inset( 50% )",
+                    "border": 0,
+                    "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -149,22 +149,22 @@
             <div
               className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
             >
@@ -383,51 +383,51 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -11,38 +11,38 @@
-          onTouchMove={[Function bound handleChange]}
-          onTouchStart={[Function bound handleChange]}
-          role="application"
+@@ -10,38 +10,38 @@
+        onTouchMove={[Function bound handleChange]}
+        onTouchStart={[Function bound handleChange]}
+        role="application"
+        style={
+          Object {
+-           "background": "hsl(210,100%, 50%)",
++           "background": "hsl(0,100%, 50%)",
+          }
+        }
+      >
+        <div
+          className="components-color-picker__saturation-white"
+        />
+        <div
+          className="components-color-picker__saturation-black"
+        />
+        <button
+-         aria-describedby="color-picker-saturation-6"
++         aria-describedby="color-picker-saturation-5"
+          aria-label="Choose a shade"
+          className="components-button components-color-picker__saturation-pointer"
+          onKeyDown={[Function bound handleKeyDown]}
           style={
             Object {
--             "background": "hsl(210,100%, 50%)",
-+             "background": "hsl(0,100%, 50%)",
+-             "left": "17%",
+-             "top": "20%",
++             "left": "0%",
++             "top": "0%",
             }
           }
-        >
-          <div
-            className="components-color-picker__saturation-white"
-          />
-          <div
-            className="components-color-picker__saturation-black"
-          />
-          <button
--           aria-describedby="color-picker-saturation-6"
-+           aria-describedby="color-picker-saturation-5"
-            aria-label="Choose a shade"
-            className="components-button components-color-picker__saturation-pointer"
-            onKeyDown={[Function preventKeyEvents]}
-            style={
-              Object {
--               "left": "17%",
--               "top": "20%",
-+               "left": "0%",
-+               "top": "0%",
-              }
-            }
-            type="button"
-          />
-          <div
-            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-            data-wp-c16t={true}
-            data-wp-component="VisuallyHidden"
--           id="color-picker-saturation-6"
-+           id="color-picker-saturation-5"
-            style={
-              Object {
-                "WebkitClipPath": "inset( 50% )",
-                "border": 0,
-                "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -73,11 +73,11 @@
+          type="button"
+        />
+        <div
+          className="components-visually-hidden css-1mm2cvy-View em57xhy0"
+          data-wp-c16t={true}
+          data-wp-component="VisuallyHidden"
+-         id="color-picker-saturation-6"
++         id="color-picker-saturation-5"
+          style={
+            Object {
+              "WebkitClipPath": "inset( 50% )",
+              "border": 0,
+              "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -71,11 +71,11 @@
         >
           <div
             className="components-color-picker__active"
@@ -440,43 +440,43 @@ Snapshot Diff:
           />
         </div>
         <div
-@@ -95,31 +95,31 @@
-                onMouseDown={[Function bound handleMouseDown]}
-                onTouchMove={[Function bound handleChange]}
-                onTouchStart={[Function bound handleChange]}
-              >
-                <div
--                 aria-describedby="components-color-picker__hue-description-6"
-+                 aria-describedby="components-color-picker__hue-description-5"
-                  aria-label="Hue value in degrees, from 0 to 359."
-                  aria-orientation="horizontal"
-                  aria-valuemax="1"
-                  aria-valuemin="359"
--                 aria-valuenow={210}
-+                 aria-valuenow={0}
-                  className="components-color-picker__hue-pointer"
-                  onKeyDown={[Function preventKeyEvents]}
-                  role="slider"
-                  style={
-                    Object {
--                     "left": "58.333333333333336%",
-+                     "left": "0%",
-                    }
+@@ -92,31 +92,31 @@
+              onMouseDown={[Function bound handleMouseDown]}
+              onTouchMove={[Function bound handleChange]}
+              onTouchStart={[Function bound handleChange]}
+            >
+              <div
+-               aria-describedby="components-color-picker__hue-description-6"
++               aria-describedby="components-color-picker__hue-description-5"
+                aria-label="Hue value in degrees, from 0 to 359."
+                aria-orientation="horizontal"
+                aria-valuemax="1"
+                aria-valuemin="359"
+-               aria-valuenow={210}
++               aria-valuenow={0}
+                className="components-color-picker__hue-pointer"
+                onKeyDown={[Function bound handleKeyDown]}
+                role="slider"
+                style={
+                  Object {
+-                   "left": "58.333333333333336%",
++                   "left": "0%",
                   }
-                  tabIndex="0"
-                />
-                <p
-                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-                  data-wp-c16t={true}
-                  data-wp-component="VisuallyHidden"
--                 id="components-color-picker__hue-description-6"
-+                 id="components-color-picker__hue-description-5"
-                  style={
-                    Object {
-                      "WebkitClipPath": "inset( 50% )",
-                      "border": 0,
-                      "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -153,22 +153,22 @@
+                }
+                tabIndex="0"
+              />
+              <p
+                className="components-visually-hidden css-1mm2cvy-View em57xhy0"
+                data-wp-c16t={true}
+                data-wp-component="VisuallyHidden"
+-               id="components-color-picker__hue-description-6"
++               id="components-color-picker__hue-description-5"
+                style={
+                  Object {
+                    "WebkitClipPath": "inset( 50% )",
+                    "border": 0,
+                    "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -149,22 +149,22 @@
             <div
               className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
             >
@@ -509,59 +509,59 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -22,11 +22,11 @@
-          />
-          <div
-            className="components-color-picker__saturation-black"
-          />
-          <button
--           aria-describedby="color-picker-saturation-2"
-+           aria-describedby="color-picker-saturation-1"
-            aria-label="Choose a shade"
-            className="components-button components-color-picker__saturation-pointer"
-            onKeyDown={[Function preventKeyEvents]}
-            style={
-              Object {
-@@ -38,11 +38,11 @@
-          />
-          <div
-            className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-            data-wp-c16t={true}
-            data-wp-component="VisuallyHidden"
--           id="color-picker-saturation-2"
-+           id="color-picker-saturation-1"
-            style={
-              Object {
-                "WebkitClipPath": "inset( 50% )",
-                "border": 0,
-                "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -95,11 +95,11 @@
-                onMouseDown={[Function bound handleMouseDown]}
-                onTouchMove={[Function bound handleChange]}
-                onTouchStart={[Function bound handleChange]}
-              >
-                <div
--                 aria-describedby="components-color-picker__hue-description-2"
-+                 aria-describedby="components-color-picker__hue-description-1"
-                  aria-label="Hue value in degrees, from 0 to 359."
-                  aria-orientation="horizontal"
-                  aria-valuemax="1"
-                  aria-valuemin="359"
-                  aria-valuenow={0}
-@@ -115,11 +115,11 @@
-                />
-                <p
-                  className="components-visually-hidden css-1mm2cvy-View em57xhy0"
-                  data-wp-c16t={true}
-                  data-wp-component="VisuallyHidden"
--                 id="components-color-picker__hue-description-2"
-+                 id="components-color-picker__hue-description-1"
-                  style={
-                    Object {
-                      "WebkitClipPath": "inset( 50% )",
-                      "border": 0,
-                      "clip": "rect(1px, 1px, 1px, 1px)",
-@@ -153,22 +153,22 @@
+@@ -21,11 +21,11 @@
+        />
+        <div
+          className="components-color-picker__saturation-black"
+        />
+        <button
+-         aria-describedby="color-picker-saturation-2"
++         aria-describedby="color-picker-saturation-1"
+          aria-label="Choose a shade"
+          className="components-button components-color-picker__saturation-pointer"
+          onKeyDown={[Function bound handleKeyDown]}
+          style={
+            Object {
+@@ -37,11 +37,11 @@
+        />
+        <div
+          className="components-visually-hidden css-1mm2cvy-View em57xhy0"
+          data-wp-c16t={true}
+          data-wp-component="VisuallyHidden"
+-         id="color-picker-saturation-2"
++         id="color-picker-saturation-1"
+          style={
+            Object {
+              "WebkitClipPath": "inset( 50% )",
+              "border": 0,
+              "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -92,11 +92,11 @@
+              onMouseDown={[Function bound handleMouseDown]}
+              onTouchMove={[Function bound handleChange]}
+              onTouchStart={[Function bound handleChange]}
+            >
+              <div
+-               aria-describedby="components-color-picker__hue-description-2"
++               aria-describedby="components-color-picker__hue-description-1"
+                aria-label="Hue value in degrees, from 0 to 359."
+                aria-orientation="horizontal"
+                aria-valuemax="1"
+                aria-valuemin="359"
+                aria-valuenow={0}
+@@ -112,11 +112,11 @@
+              />
+              <p
+                className="components-visually-hidden css-1mm2cvy-View em57xhy0"
+                data-wp-c16t={true}
+                data-wp-component="VisuallyHidden"
+-               id="components-color-picker__hue-description-2"
++               id="components-color-picker__hue-description-1"
+                style={
+                  Object {
+                    "WebkitClipPath": "inset( 50% )",
+                    "border": 0,
+                    "clip": "rect(1px, 1px, 1px, 1px)",
+@@ -149,22 +149,22 @@
             <div
               className="components-base-control__field css-igk9ll-StyledField e1puf3u2"
             >
@@ -614,61 +614,59 @@ exports[`ColorPicker should render color picker 1`] = `
   <div
     className="components-color-picker__saturation"
   >
-    <div>
+    <div
+      className="components-color-picker__saturation-color"
+      onMouseDown={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
+      role="application"
+      style={
+        Object {
+          "background": "hsl(0,100%, 50%)",
+        }
+      }
+    >
       <div
-        className="components-color-picker__saturation-color"
-        onMouseDown={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
-        role="application"
+        className="components-color-picker__saturation-white"
+      />
+      <div
+        className="components-color-picker__saturation-black"
+      />
+      <button
+        aria-describedby="color-picker-saturation-0"
+        aria-label="Choose a shade"
+        className="components-button components-color-picker__saturation-pointer"
+        onKeyDown={[Function]}
         style={
           Object {
-            "background": "hsl(0,100%, 50%)",
+            "left": "0%",
+            "top": "0%",
           }
         }
-      >
-        <div
-          className="components-color-picker__saturation-white"
-        />
-        <div
-          className="components-color-picker__saturation-black"
-        />
-        <button
-          aria-describedby="color-picker-saturation-0"
-          aria-label="Choose a shade"
-          className="components-button components-color-picker__saturation-pointer"
-          onKeyDown={[Function]}
-          style={
-            Object {
-              "left": "0%",
-              "top": "0%",
-            }
-          }
-          type="button"
-        />
-        <div
-          className="components-visually-hidden emotion-0 emotion-1"
-          data-wp-c16t={true}
-          data-wp-component="VisuallyHidden"
-          id="color-picker-saturation-0"
-          style={
-            Object {
-              "WebkitClipPath": "inset( 50% )",
-              "border": 0,
-              "clip": "rect(1px, 1px, 1px, 1px)",
-              "clipPath": "inset( 50% )",
-              "height": "1px",
-              "margin": "-1px",
-              "overflow": "hidden",
-              "padding": 0,
-              "position": "absolute",
-              "width": "1px",
-              "wordWrap": "normal",
-            }
+        type="button"
+      />
+      <div
+        className="components-visually-hidden emotion-0 emotion-1"
+        data-wp-c16t={true}
+        data-wp-component="VisuallyHidden"
+        id="color-picker-saturation-0"
+        style={
+          Object {
+            "WebkitClipPath": "inset( 50% )",
+            "border": 0,
+            "clip": "rect(1px, 1px, 1px, 1px)",
+            "clipPath": "inset( 50% )",
+            "height": "1px",
+            "margin": "-1px",
+            "overflow": "hidden",
+            "padding": 0,
+            "position": "absolute",
+            "width": "1px",
+            "wordWrap": "normal",
           }
-        >
-          Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
-        </div>
+        }
+      >
+        Use your arrow keys to change the base color. Move up to lighten the color, down to darken, left to decrease saturation, and right to increase saturation.
       </div>
     </div>
   </div>
@@ -693,60 +691,58 @@ exports[`ColorPicker should render color picker 1`] = `
       <div
         className="components-color-picker__toggles"
       >
-        <div>
+        <div
+          className="components-color-picker__hue"
+        >
           <div
-            className="components-color-picker__hue"
+            className="components-color-picker__hue-gradient"
+          />
+          <div
+            className="components-color-picker__hue-bar"
+            onMouseDown={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
           >
             <div
-              className="components-color-picker__hue-gradient"
-            />
-            <div
-              className="components-color-picker__hue-bar"
-              onMouseDown={[Function]}
-              onTouchMove={[Function]}
-              onTouchStart={[Function]}
-            >
-              <div
-                aria-describedby="components-color-picker__hue-description-0"
-                aria-label="Hue value in degrees, from 0 to 359."
-                aria-orientation="horizontal"
-                aria-valuemax="1"
-                aria-valuemin="359"
-                aria-valuenow={0}
-                className="components-color-picker__hue-pointer"
-                onKeyDown={[Function]}
-                role="slider"
-                style={
-                  Object {
-                    "left": "0%",
-                  }
+              aria-describedby="components-color-picker__hue-description-0"
+              aria-label="Hue value in degrees, from 0 to 359."
+              aria-orientation="horizontal"
+              aria-valuemax="1"
+              aria-valuemin="359"
+              aria-valuenow={0}
+              className="components-color-picker__hue-pointer"
+              onKeyDown={[Function]}
+              role="slider"
+              style={
+                Object {
+                  "left": "0%",
                 }
-                tabIndex="0"
-              />
-              <p
-                className="components-visually-hidden emotion-0 emotion-1"
-                data-wp-c16t={true}
-                data-wp-component="VisuallyHidden"
-                id="components-color-picker__hue-description-0"
-                style={
-                  Object {
-                    "WebkitClipPath": "inset( 50% )",
-                    "border": 0,
-                    "clip": "rect(1px, 1px, 1px, 1px)",
-                    "clipPath": "inset( 50% )",
-                    "height": "1px",
-                    "margin": "-1px",
-                    "overflow": "hidden",
-                    "padding": 0,
-                    "position": "absolute",
-                    "width": "1px",
-                    "wordWrap": "normal",
-                  }
+              }
+              tabIndex="0"
+            />
+            <p
+              className="components-visually-hidden emotion-0 emotion-1"
+              data-wp-c16t={true}
+              data-wp-component="VisuallyHidden"
+              id="components-color-picker__hue-description-0"
+              style={
+                Object {
+                  "WebkitClipPath": "inset( 50% )",
+                  "border": 0,
+                  "clip": "rect(1px, 1px, 1px, 1px)",
+                  "clipPath": "inset( 50% )",
+                  "height": "1px",
+                  "margin": "-1px",
+                  "overflow": "hidden",
+                  "padding": 0,
+                  "position": "absolute",
+                  "width": "1px",
+                  "wordWrap": "normal",
                 }
-              >
-                Move the arrow left or right to change hue.
-              </p>
-            </div>
+              }
+            >
+              Move the arrow left or right to change hue.
+            </p>
           </div>
         </div>
       </div>