try on pr env

Codecademy · Sep 25, 2024 · bb6348e · bb6348e
1 parent adaf964
commit bb6348e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/packages/gamut/src/Tip/PreviewTip/index.tsx b/packages/gamut/src/Tip/PreviewTip/index.tsx
@@ -1,4 +1,5 @@
 import { useId } from '@reach/auto-id';
+import { set } from 'lodash';
 import {
   ComponentProps,
   FocusEvent,
@@ -18,7 +19,7 @@ import {
   tipDefaultProps,
 } from '../shared/types';
 import { PreviewTipAnchor } from './elements';
-import { getPreviewDescription } from './utils';
+import { getPreviewDescription, getPreviewLabel } from './utils';
 
 export type PreviewTipProps = ComponentProps<typeof Anchor> &
   Pick<TipBaseProps, 'placement'> &
@@ -61,6 +62,7 @@ export const PreviewTip: React.FC<PreviewTipProps> = ({
   const isFloating = placement === 'floating';
   const Tip = loaded && isFloating ? FloatingTip : InlineTip;
 
+  const label = getPreviewLabel({ avatar, children });
   const description = useMemo(
     () => getPreviewDescription({ linkDescription, overline, username }),
     [linkDescription, overline, username]
@@ -82,19 +84,20 @@ export const PreviewTip: React.FC<PreviewTipProps> = ({
     <Tip {...tipProps} type="preview">
       <Text
         aria-hidden={!isLive}
-        aria-live={isLive ? 'polite' : 'off'}
+        aria-live={isLive ? 'assertive' : 'off'}
         aria-busy={loading}
         screenreader
-        id={descriptionId}
       >
-        {loading && !linkDescription
-          ? 'Preview content is loading '
-          : `${description}`}
+        <div id={descriptionId}>
+          {loading && !linkDescription
+            ? 'Preview content is loading '
+            : `${description}`}
+        </div>
       </Text>
 
       <PreviewTipAnchor
         {...rest}
-        aria-label={avatar ? `Profile Preview:` : `Link Preview:`}
+        aria-label={label}
         aria-describedby={descriptionId}
         display={avatar && rest?.display === undefined ? 'flex' : rest?.display}
         tipType={avatar ? 'avatar' : 'anchor'}

diff --git a/packages/gamut/src/Tip/PreviewTip/utils.ts b/packages/gamut/src/Tip/PreviewTip/utils.ts
@@ -9,3 +9,12 @@ export const getPreviewDescription = ({
     username ? `${username} ` : ''
   }${linkDescription}`;
 };
+
+export const getPreviewLabel = ({
+  avatar,
+  children,
+}: Pick<PreviewTipProps, 'avatar' | 'children'>) => {
+  const textChildren = typeof children === 'string' ? `${children} ` : '';
+
+  return avatar ? 'Profile Preview:' : `${textChildren}Link Preview:`;
+};