diff --git a/docs/examples/spinner/dontLabel.tsx b/docs/examples/spinner/dontLabel.tsx
index 518e83f9ed..2398c9dbc7 100644
--- a/docs/examples/spinner/dontLabel.tsx
+++ b/docs/examples/spinner/dontLabel.tsx
@@ -1,12 +1,10 @@
-import { Flex, Spinner, Text } from 'gestalt';
+import { Flex, Spinner } from 'gestalt';
 
 export default function Example() {
   return (
     <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
       <Flex direction="column" gap={2}>
-        <Spinner accessibilityLabel="Example spinner" show />
-
-        <Text weight="bold">Loading…</Text>
+        <Spinner accessibilityLabel="Dont Label improperly" label="Loading…" show />
       </Flex>
     </Flex>
   );
diff --git a/docs/examples/spinner/label.tsx b/docs/examples/spinner/label.tsx
index 9f43757668..14e91944b8 100644
--- a/docs/examples/spinner/label.tsx
+++ b/docs/examples/spinner/label.tsx
@@ -5,7 +5,7 @@ export default function Example() {
   return (
     <Box height="100%" width="100%">
       <Flex alignItems="center" height="100%" justifyContent="center" width="100%">
-        <Spinner label="We’re adding new ideas to your homefeed" show={!reduced} />
+        <Spinner accessibilityLabel="test" label="We’re adding new ideas to your homefeed" show={!reduced} />
       </Flex>
     </Box>
   );
diff --git a/packages/gestalt/src/Spinner.tsx b/packages/gestalt/src/Spinner.tsx
index 92bee42d99..a46429ec53 100644
--- a/packages/gestalt/src/Spinner.tsx
+++ b/packages/gestalt/src/Spinner.tsx
@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import classnames from 'classnames';
 import Box from './Box';
 import { useDefaultLabelContext } from './contexts/DefaultLabelProvider';
@@ -56,6 +57,7 @@ export default function Spinner({
   size = 'md',
 }: Props) {
   const { accessibilityLabel: accessibilityLabelDefault } = useDefaultLabelContext('Spinner');
+  const id = useId();
 
   const isInVRExperiment = useInExperiment({
     webExperimentName: 'web_gestalt_visualRefresh',
@@ -69,34 +71,37 @@ export default function Spinner({
         // 'subtle' maps to 'default' as it is not a VR color variant
         color={color === 'subtle' ? 'default' : color}
         delay={delay}
-        show={show}
+        label={label}
         // 'md' maps to 'lg' as it doesn't exist in VR Spinner
+        show={show}
         size={size === 'md' ? 'lg' : size}
       />
     );
   }
 
   return show ? (
-    <Flex gap={6}>
-      <Box display="flex" justifyContent="around" overflow="hidden">
-        <div className={classnames(styles.icon, { [styles.delay]: delay })}>
-          <Icon
-            accessibilityLabel={accessibilityLabel ?? accessibilityLabelDefault}
-            // map non-classic colors to subtle
-            color={color === 'default' || color === 'subtle' ? color : 'subtle'}
-            icon="knoop"
-            size={SIZE_NAME_TO_PIXEL[size]}
-          />
-        </div>
-      </Box>
-      {label && (
-        <Box minWidth={200}>
-          <TextUI align="center" size="sm">
-            {label}
-          </TextUI>
+    <Box padding={label ? 1 : undefined}>
+      <Flex direction="column" gap={6}>
+        <Box display="flex" justifyContent="around" overflow="hidden">
+          <div aria-describedby={id} className={classnames(styles.icon, { [styles.delay]: delay })}>
+            <Icon
+              accessibilityLabel={accessibilityLabel ?? label ?? accessibilityLabelDefault}
+              // map non-classic colors to subtle
+              color={color === 'default' || color === 'subtle' ? color : 'subtle'}
+              icon="knoop"
+              size={SIZE_NAME_TO_PIXEL[size]}
+            />
+          </div>
         </Box>
-      )}
-    </Flex>
+        {label && (
+          <Box minWidth={200}>
+            <TextUI align="center" id={id} size="sm">
+              {label}
+            </TextUI>
+          </Box>
+        )}
+      </Flex>{' '}
+    </Box>
   ) : (
     <div />
   );
diff --git a/packages/gestalt/src/Spinner/VRSpinner.tsx b/packages/gestalt/src/Spinner/VRSpinner.tsx
index c7cad75b68..7615a12ba8 100644
--- a/packages/gestalt/src/Spinner/VRSpinner.tsx
+++ b/packages/gestalt/src/Spinner/VRSpinner.tsx
@@ -1,9 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useId, useState } from 'react';
 import classnames from 'classnames';
 import vrLightDesignTokens from 'gestalt-design-tokens/dist/json/vr-theme/variables-light.json';
 import styles from './VRSpinner.css';
 import Box from '../Box';
 import { useDefaultLabelContext } from '../contexts/DefaultLabelProvider';
+import Flex from '../Flex';
+import TextUI from '../TextUI';
 
 const SIZE_NAME_TO_PIXEL = {
   sm: 32,
@@ -11,6 +13,7 @@ const SIZE_NAME_TO_PIXEL = {
 } as const;
 
 type SpinnerBodyProps = {
+  accessibilityDescribedby?: string;
   accessibilityLabel: string;
   delay: boolean;
   show: boolean;
@@ -20,6 +23,7 @@ type SpinnerBodyProps = {
 };
 
 function SpinnerBody({
+  accessibilityDescribedby,
   accessibilityLabel,
   delay,
   show,
@@ -39,7 +43,7 @@ function SpinnerBody({
       : {};
 
   return (
-    <Box display="flex" justifyContent="around">
+    <Box aria-describedby={accessibilityDescribedby} display="flex" justifyContent="around">
       <div
         aria-label={accessibilityLabel}
         className={classnames(styles.spinner, {
@@ -81,6 +85,7 @@ function SpinnerBody({
 
 type Props = {
   accessibilityLabel?: string;
+  label?: string;
   delay?: boolean;
   show: boolean;
   size?: 'sm' | 'lg';
@@ -90,12 +95,14 @@ type Props = {
 export default function Spinner({
   accessibilityLabel,
   delay = true,
+  label,
   show: showProp,
   size = 'lg',
   color = 'default',
 }: Props) {
   const [show, setShow] = useState(showProp);
   const { accessibilityLabel: accessibilityLabelDefault } = useDefaultLabelContext('Spinner');
+  const id = useId();
 
   const unmountSpinner = () => {
     if (!showProp) setShow(false);
@@ -108,14 +115,26 @@ export default function Spinner({
   if (!show) return null;
 
   return (
-    <SpinnerBody
-      accessibilityLabel={accessibilityLabel || accessibilityLabelDefault}
-      color={color}
-      delay={delay}
-      onExitAnimationEnd={unmountSpinner}
-      show={showProp}
-      size={size}
-    />
+    <Box padding={label ? 1 : undefined}>
+      <Flex direction="column" gap={6}>
+        <SpinnerBody
+          accessibilityDescribedby={id}
+          accessibilityLabel={accessibilityLabel ?? label ?? accessibilityLabelDefault}
+          color={color}
+          delay={delay}
+          onExitAnimationEnd={unmountSpinner}
+          show={showProp}
+          size={size}
+        />
+        {label && (
+          <Box minWidth={200}>
+            <TextUI align="center" id={id} size="sm">
+              {label}
+            </TextUI>
+          </Box>
+        )}
+      </Flex>
+    </Box>
   );
 }
 
diff --git a/packages/gestalt/src/Text.tsx b/packages/gestalt/src/Text.tsx
index cdb1b73129..378ab3b6af 100644
--- a/packages/gestalt/src/Text.tsx
+++ b/packages/gestalt/src/Text.tsx
@@ -42,6 +42,10 @@ type Props = {
    * Available for testing purposes, if needed. Consider [better queries](https://testing-library.com/docs/queries/about/#priority) before using this prop.
    */
   dataTestId?: string;
+  /**
+   * A unique identifier for the element.
+   */
+  id?: string;
   /**
    * Indicates how the text should flow with the surrounding content. See the [block vs inline variant](https://gestalt.pinterest.systems/web/text#Block-vs.-inline) for more details.
    */
@@ -92,6 +96,7 @@ const TextWithForwardRef = forwardRef<HTMLDivElement, Props>(function Text(
     children,
     color = 'default',
     dataTestId,
+    id,
     inline = false,
     italic = false,
     lineClamp,
@@ -170,6 +175,7 @@ const TextWithForwardRef = forwardRef<HTMLDivElement, Props>(function Text(
     <Tag
       className={cs}
       data-test-id={dataTestId}
+      id={id}
       title={
         title ?? (isNotNullish(lineClamp) && typeof children === 'string' ? children : undefined)
       }
diff --git a/packages/gestalt/src/TextUI.tsx b/packages/gestalt/src/TextUI.tsx
index c38a1f7bae..d99592e56b 100644
--- a/packages/gestalt/src/TextUI.tsx
+++ b/packages/gestalt/src/TextUI.tsx
@@ -43,6 +43,10 @@ type Props = {
    * Available for testing purposes, if needed. Consider [better queries](https://testing-library.com/docs/queries/about/#priority) before using this prop.
    */
   dataTestId?: string;
+  /**
+   * A unique identifier for the element.
+   */
+  id?: string;
   /**
    * Indicates how the text should flow with the surrounding content. See the [block vs inline variant](https://gestalt.pinterest.systems/web/text#Block-vs.-inline) for more details.
    */
@@ -91,6 +95,7 @@ const TextUIWithForwardRef = forwardRef<HTMLDivElement, Props>(function Text(
     overflow = 'breakWord',
     size = 'md',
     title,
+    id,
   }: Props,
   ref,
 ): ReactElement {
@@ -148,6 +153,7 @@ const TextUIWithForwardRef = forwardRef<HTMLDivElement, Props>(function Text(
     <Tag
       className={cs}
       data-test-id={dataTestId}
+      id={id}
       title={
         title ?? (isNotNullish(lineClamp) && typeof children === 'string' ? children : undefined)
       }
diff --git a/packages/gestalt/src/__snapshots__/Spinner.test.tsx.snap b/packages/gestalt/src/__snapshots__/Spinner.test.tsx.snap
index 02ae5e67dd..b4b622e326 100644
--- a/packages/gestalt/src/__snapshots__/Spinner.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Spinner.test.tsx.snap
@@ -4,96 +4,152 @@ exports[`Spinner does not render by default 1`] = `<div />`;
 
 exports[`Spinner renders when passed show 1`] = `
 <div
-  className="box justifyAround overflowHidden xsDisplayFlex"
+  className="box paddingXNaN paddingYNaN"
 >
   <div
-    className="icon delay"
+    className="Flex rowGap600 columnGap600 xsDirectionColumn"
   >
-    <svg
-      aria-hidden={null}
-      aria-label="Test"
-      className="subtle icon iconBlock"
-      height={40}
-      role="img"
-      viewBox="0 0 24 24"
-      width={40}
+    <div
+      className="FlexItem"
     >
-      <path
-        d="test-file-stub"
-      />
-    </svg>
+      <div
+        className="box justifyAround overflowHidden xsDisplayFlex"
+      >
+        <div
+          aria-describedby=":r1:"
+          className="icon delay"
+        >
+          <svg
+            aria-hidden={null}
+            aria-label="Test"
+            className="subtle icon iconBlock"
+            height={40}
+            role="img"
+            viewBox="0 0 24 24"
+            width={40}
+          >
+            <path
+              d="test-file-stub"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
   </div>
+   
 </div>
 `;
 
 exports[`Spinner renders with medium size 1`] = `
 <div
-  className="box justifyAround overflowHidden xsDisplayFlex"
+  className="box paddingXNaN paddingYNaN"
 >
   <div
-    className="icon delay"
+    className="Flex rowGap600 columnGap600 xsDirectionColumn"
   >
-    <svg
-      aria-hidden={null}
-      aria-label="Test"
-      className="subtle icon iconBlock"
-      height={40}
-      role="img"
-      viewBox="0 0 24 24"
-      width={40}
+    <div
+      className="FlexItem"
     >
-      <path
-        d="test-file-stub"
-      />
-    </svg>
+      <div
+        className="box justifyAround overflowHidden xsDisplayFlex"
+      >
+        <div
+          aria-describedby=":r3:"
+          className="icon delay"
+        >
+          <svg
+            aria-hidden={null}
+            aria-label="Test"
+            className="subtle icon iconBlock"
+            height={40}
+            role="img"
+            viewBox="0 0 24 24"
+            width={40}
+          >
+            <path
+              d="test-file-stub"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
   </div>
+   
 </div>
 `;
 
 exports[`Spinner renders with no delay 1`] = `
 <div
-  className="box justifyAround overflowHidden xsDisplayFlex"
+  className="box paddingXNaN paddingYNaN"
 >
   <div
-    className="icon"
+    className="Flex rowGap600 columnGap600 xsDirectionColumn"
   >
-    <svg
-      aria-hidden={null}
-      aria-label="Test"
-      className="subtle icon iconBlock"
-      height={40}
-      role="img"
-      viewBox="0 0 24 24"
-      width={40}
+    <div
+      className="FlexItem"
     >
-      <path
-        d="test-file-stub"
-      />
-    </svg>
+      <div
+        className="box justifyAround overflowHidden xsDisplayFlex"
+      >
+        <div
+          aria-describedby=":r2:"
+          className="icon"
+        >
+          <svg
+            aria-hidden={null}
+            aria-label="Test"
+            className="subtle icon iconBlock"
+            height={40}
+            role="img"
+            viewBox="0 0 24 24"
+            width={40}
+          >
+            <path
+              d="test-file-stub"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
   </div>
+   
 </div>
 `;
 
 exports[`Spinner renders with small size 1`] = `
 <div
-  className="box justifyAround overflowHidden xsDisplayFlex"
+  className="box paddingXNaN paddingYNaN"
 >
   <div
-    className="icon delay"
+    className="Flex rowGap600 columnGap600 xsDirectionColumn"
   >
-    <svg
-      aria-hidden={null}
-      aria-label="Test"
-      className="subtle icon iconBlock"
-      height={32}
-      role="img"
-      viewBox="0 0 24 24"
-      width={32}
+    <div
+      className="FlexItem"
     >
-      <path
-        d="test-file-stub"
-      />
-    </svg>
+      <div
+        className="box justifyAround overflowHidden xsDisplayFlex"
+      >
+        <div
+          aria-describedby=":r4:"
+          className="icon delay"
+        >
+          <svg
+            aria-hidden={null}
+            aria-label="Test"
+            className="subtle icon iconBlock"
+            height={32}
+            role="img"
+            viewBox="0 0 24 24"
+            width={32}
+          >
+            <path
+              d="test-file-stub"
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
   </div>
+   
 </div>
 `;