moiroe

pinterest · Jan 16, 2025 · b1c77a2 · b1c77a2
1 parent 362844e
commit b1c77a2
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 12 deletions.
diff --git a/docs/pages/web/spinner.tsx b/docs/pages/web/spinner.tsx
@@ -21,7 +21,6 @@ import main from '../../examples/spinner/main';
 import white from '../../examples/spinner/white';
 
 export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen }) {
-
   return (
     <Page title={generatedDocGen?.displayName}>
       <PageHeader description={generatedDocGen?.description} name={generatedDocGen?.displayName}>
@@ -145,15 +144,17 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen
 
       <AccessibilitySection
         description={`
-      Be sure to include \`accessibilityLabel\`. Labels should relate to the specific part of the product where Spinner is being used (e.g. "Loading homefeed" when used on the homefeed surface). Don't forget to localize the label!
+      Be sure to include \`accessibilityLabel\` if there's no \`label\`. \`accessibilityLabel\` should relate to the specific part of the product where Spinner is being used (e.g. "Loading homefeed" when used on the homefeed surface). Don't forget to localize the label!
+
+      The override order for labels:  \`accessibilityLabel\` overrides \`label\`, \`label\` overrides default label from DefaultLabelProvider. DefaultLabelProvider is only accessible if there is not \`accessibilityLabel\` not \`label\`.
       `}
         name={generatedDocGen?.displayName}
       />
 
       <LocalizationSection
         code={localizationLabels}
         name={generatedDocGen?.displayName}
-        notes={`Note that \`accessibilityLabel\` is optional as DefaultLabelProvider provides default strings. Use custom labels if they need to be more specific.`}
+        notes={`Note that \`accessibilityLabel\` is optional as DefaultLabelProvider provides default strings. Use custom labels if they need to be more specific. DefaultLabelProvider is override by \`label\`.`}
       />
 
       <MainSection name="Variants">
@@ -173,17 +174,13 @@ export default function DocsPage({ generatedDocGen }: { generatedDocGen: DocGen
           />
           <MainSection.Card
             cardSize="lg"
-            sandpackExample={
-              <SandpackExample code={white} layout="column" name="Delay variant" />
-            }
+            sandpackExample={<SandpackExample code={white} layout="column" name="Delay variant" />}
             title="White"
           />
         </MainSection.Subsection>
 
         <MainSection.Subsection
-          description={`
-    Spinner supports a label.
-  `}
+          description={`Spinner supports a label. If \`label\` is provided, \`accessibilityLabel\` is not needed. \`accessibilityLabel\` overrides "label" for assistive technologies. See the [Accessibility guidelines](#Accessibility) for more information`}
           title="Label"
         >
           <MainSection.Card

diff --git a/packages/gestalt/src/Spinner.tsx b/packages/gestalt/src/Spinner.tsx
@@ -66,7 +66,7 @@ export default function Spinner({
 
   if (isInVRExperiment) {
     return (
-      <VRSpinner
+    <VRSpinner
         accessibilityLabel={accessibilityLabel}
         color={color === 'subtle' ? 'default' : color} // 'subtle' maps to 'default' as it is not a VR color variant
         delay={delay}
@@ -84,7 +84,7 @@ export default function Spinner({
           <div className={classnames(styles.icon, { [styles.delay]: delay })}>
             <InternalIcon
               accessibilityDescribedby={label ? id : undefined}
-              accessibilityLabel={accessibilityLabel ?? accessibilityLabelDefault}
+              accessibilityLabel={accessibilityLabel ?? label ?? accessibilityLabelDefault}
               // map non-classic colors to subtle
               color={color === 'default' || color === 'subtle' ? color : 'subtle'}
               icon="knoop"

diff --git a/packages/gestalt/src/Spinner/VRSpinner.tsx b/packages/gestalt/src/Spinner/VRSpinner.tsx
@@ -124,7 +124,7 @@ export default function Spinner({
       <Flex direction="column" gap={6}>
         <SpinnerBody
           accessibilityDescribedby={label ? id : undefined}
-          accessibilityLabel={accessibilityLabel ?? accessibilityLabelDefault}
+          accessibilityLabel={accessibilityLabel ?? label ?? accessibilityLabelDefault}
           color={color}
           delay={delay}
           onExitAnimationEnd={unmountSpinner}