moire

pinterest · Jan 16, 2025 · 2bccd91 · 2bccd91
1 parent 70267de
commit 2bccd91
Show file tree

Hide file tree

Showing 7 changed files with 181 additions and 91 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,16 +1,19 @@
-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,
   lg: 56,
 } 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
@@ -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
@@ -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)
       }