From 6141fea08fd003c4a9fd38fb2d19468b6e72699a Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Thu, 11 Jul 2024 11:59:29 -0400
Subject: [PATCH 01/15] fix(InfoTip): fix DOM ordering + tip not being reread

---
 packages/gamut/src/Tip/InfoTip/index.tsx | 35 ++++++++++++++++--------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index 3d52d32092..9e001bab33 100644
--- a/packages/gamut/src/Tip/InfoTip/index.tsx
+++ b/packages/gamut/src/Tip/InfoTip/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { Text } from '../../Typography';
 import { FloatingTip } from '../shared/FloatingTip';
@@ -79,18 +79,29 @@ export const InfoTip: React.FC<InfoTipProps> = ({
     ...rest,
   };
 
-  return (
+  const screenReaderText = (
+    <Text screenreader aria-live="assertive">
+      {!isTipHidden ? info : `\xa0`}
+    </Text>
+  );
+
+  const tipContent = (
+    <Tip {...tipProps} type="info">
+      <InfoTipButton
+        active={!isTipHidden}
+        emphasis={emphasis}
+        onClick={() => clickHandler()}
+      />
+    </Tip>
+  );
+
+  return alignment.includes('top') ? (
+    <>
+      {screenReaderText} {tipContent}
+    </>
+  ) : (
     <>
-      <Text screenreader aria-live="assertive">
-        {!isTipHidden ? info : ''}
-      </Text>
-      <Tip {...tipProps} type="info">
-        <InfoTipButton
-          active={!isTipHidden}
-          emphasis={emphasis}
-          onClick={() => clickHandler()}
-        />
-      </Tip>
+      {tipContent} {screenReaderText}
     </>
   );
 };

From 4027d2c74738c34289f96048a04505de528fed61 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Thu, 11 Jul 2024 12:16:02 -0400
Subject: [PATCH 02/15] remove useMemo

---
 packages/gamut/src/Tip/InfoTip/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index 9e001bab33..76210fd040 100644
--- a/packages/gamut/src/Tip/InfoTip/index.tsx
+++ b/packages/gamut/src/Tip/InfoTip/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { Text } from '../../Typography';
 import { FloatingTip } from '../shared/FloatingTip';

From de2bc6a2513a4cc70ca141597127491dedccc7e4 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Thu, 11 Jul 2024 16:49:06 -0400
Subject: [PATCH 03/15] fix DOM order, mostly

---
 packages/gamut/src/Tip/InfoTip/index.tsx    | 38 +++++++++---
 packages/gamut/src/Tip/shared/InlineTip.tsx | 65 +++++++++++++--------
 2 files changed, 71 insertions(+), 32 deletions(-)

diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index 76210fd040..1e69556f07 100644
--- a/packages/gamut/src/Tip/InfoTip/index.tsx
+++ b/packages/gamut/src/Tip/InfoTip/index.tsx
@@ -28,6 +28,7 @@ export const InfoTip: React.FC<InfoTipProps> = ({
   ...rest
 }) => {
   const [isTipHidden, setHideTip] = useState(true);
+  const [isAriaHidden, setIsAriaHidden] = useState(false);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const [loaded, setLoaded] = useState(false);
 
@@ -35,11 +36,26 @@ export const InfoTip: React.FC<InfoTipProps> = ({
     setLoaded(true);
   }, []);
 
+  const setTipIsHidden = (nextTipState: boolean) => {
+    if (!nextTipState) {
+      setHideTip(nextTipState);
+      if (placement !== 'floating') {
+        // on inline component - stops text from being able to be navigated through, instead user can nav through visible text
+        setTimeout(() => {
+          setIsAriaHidden(true);
+        }, 1000);
+      }
+    } else {
+      if (isAriaHidden) setIsAriaHidden(false);
+      setHideTip(nextTipState);
+    }
+  };
+
   const escapeKeyPressHandler = (
     event: React.KeyboardEvent<HTMLDivElement>
   ) => {
     if (event.key === 'Escape') {
-      setHideTip(true);
+      setTipIsHidden(true);
     }
   };
 
@@ -50,13 +66,13 @@ export const InfoTip: React.FC<InfoTipProps> = ({
         ? !wrapperRef.current?.contains(e?.target)
         : true)
     ) {
-      setHideTip(true);
+      setTipIsHidden(true);
     }
   };
 
   const clickHandler = () => {
     const currentTipState = !isTipHidden;
-    setHideTip(currentTipState);
+    setTipIsHidden(currentTipState);
     // we want to call the onClick handler after the tip has mounted
     if (onClick) setTimeout(() => onClick({ isTipHidden: currentTipState }), 0);
   };
@@ -79,13 +95,13 @@ export const InfoTip: React.FC<InfoTipProps> = ({
     ...rest,
   };
 
-  const screenReaderText = (
-    <Text screenreader aria-live="assertive">
+  const text = (
+    <Text aria-hidden={isAriaHidden} aria-live="assertive" screenreader>
       {!isTipHidden ? info : `\xa0`}
     </Text>
   );
 
-  const tipContent = (
+  const tip = (
     <Tip {...tipProps} type="info">
       <InfoTipButton
         active={!isTipHidden}
@@ -95,13 +111,17 @@ export const InfoTip: React.FC<InfoTipProps> = ({
     </Tip>
   );
 
-  return alignment.includes('top') ? (
+  // on floating alignment - since this uses React.Portal we're breaking the DOM order so the screenreader text need to be navigable and never aria-hidden
+
+  return placement !== 'floating' || alignment.includes('top') ? (
     <>
-      {screenReaderText} {tipContent}
+      {text}
+      {tip}
     </>
   ) : (
     <>
-      {tipContent} {screenReaderText}
+      {tip}
+      {text}
     </>
   );
 };
diff --git a/packages/gamut/src/Tip/shared/InlineTip.tsx b/packages/gamut/src/Tip/shared/InlineTip.tsx
index 2136c75fab..a827bc8ba9 100644
--- a/packages/gamut/src/Tip/shared/InlineTip.tsx
+++ b/packages/gamut/src/Tip/shared/InlineTip.tsx
@@ -21,31 +21,50 @@ export const InlineTip: React.FC<TipPlacementComponentProps> = ({
   const InlineTipWrapper = isToolType ? ToolTipContainer : InfoTipContainer;
   const InlineWrapperProps = isToolType ? {} : { hideTip: isTipHidden };
 
+  // CASS - you need to swap the order here
+
+  const target = (
+    <TargetContainer
+      ref={wrapperRef}
+      onKeyDown={
+        escapeKeyPressHandler ? (e) => escapeKeyPressHandler(e) : undefined
+      }
+    >
+      {children}
+    </TargetContainer>
+  );
+
+  const tipBody = (
+    <InlineTipWrapper
+      alignment={alignment}
+      zIndex={zIndex ?? 1}
+      {...InlineWrapperProps}
+    >
+      <TipBody
+        alignment={alignment.includes('center') ? 'centered' : 'aligned'}
+        color="currentColor"
+        id={id}
+        width={narrow ? narrowWidth : undefined}
+        zIndex="auto"
+      >
+        {info}
+      </TipBody>
+    </InlineTipWrapper>
+  );
+
   return (
     <TipWrapper>
-      <TargetContainer
-        ref={wrapperRef}
-        onKeyDown={
-          escapeKeyPressHandler ? (e) => escapeKeyPressHandler(e) : undefined
-        }
-      >
-        {children}
-      </TargetContainer>
-      <InlineTipWrapper
-        alignment={alignment}
-        zIndex={zIndex ?? 1}
-        {...InlineWrapperProps}
-      >
-        <TipBody
-          alignment={alignment.includes('center') ? 'centered' : 'aligned'}
-          color="currentColor"
-          id={id}
-          width={narrow ? narrowWidth : undefined}
-          zIndex="auto"
-        >
-          {info}
-        </TipBody>
-      </InlineTipWrapper>
+      {alignment.includes('top') ? (
+        <>
+          {tipBody}
+          {target}
+        </>
+      ) : (
+        <>
+          {target}
+          {tipBody}
+        </>
+      )}
     </TipWrapper>
   );
 };

From a87120ec5a12d307fecac427c19256efab58fa0f Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Thu, 11 Jul 2024 16:52:50 -0400
Subject: [PATCH 04/15] fix comments

---
 packages/gamut/src/Tip/InfoTip/index.tsx    | 2 +-
 packages/gamut/src/Tip/shared/InlineTip.tsx | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index 1e69556f07..182bdc1d43 100644
--- a/packages/gamut/src/Tip/InfoTip/index.tsx
+++ b/packages/gamut/src/Tip/InfoTip/index.tsx
@@ -111,7 +111,7 @@ export const InfoTip: React.FC<InfoTipProps> = ({
     </Tip>
   );
 
-  // on floating alignment - since this uses React.Portal we're breaking the DOM order so the screenreader text need to be navigable and never aria-hidden
+  // on floating alignment - since this uses React.Portal we're breaking the DOM order so the screenreader text need to be navigable, in the correct DOM order, and never aria-hidden
 
   return placement !== 'floating' || alignment.includes('top') ? (
     <>
diff --git a/packages/gamut/src/Tip/shared/InlineTip.tsx b/packages/gamut/src/Tip/shared/InlineTip.tsx
index a827bc8ba9..335df436dc 100644
--- a/packages/gamut/src/Tip/shared/InlineTip.tsx
+++ b/packages/gamut/src/Tip/shared/InlineTip.tsx
@@ -21,8 +21,6 @@ export const InlineTip: React.FC<TipPlacementComponentProps> = ({
   const InlineTipWrapper = isToolType ? ToolTipContainer : InfoTipContainer;
   const InlineWrapperProps = isToolType ? {} : { hideTip: isTipHidden };
 
-  // CASS - you need to swap the order here
-
   const target = (
     <TargetContainer
       ref={wrapperRef}

From b4fc1bec0d30dfeaa3d712d7ad2070a095a164a2 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Fri, 12 Jul 2024 12:26:23 -0400
Subject: [PATCH 05/15] comments

---
 packages/gamut/src/Tip/InfoTip/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index 182bdc1d43..9743f9c593 100644
--- a/packages/gamut/src/Tip/InfoTip/index.tsx
+++ b/packages/gamut/src/Tip/InfoTip/index.tsx
@@ -111,7 +111,7 @@ export const InfoTip: React.FC<InfoTipProps> = ({
     </Tip>
   );
 
-  // on floating alignment - since this uses React.Portal we're breaking the DOM order so the screenreader text need to be navigable, in the correct DOM order, and never aria-hidden
+  // on floating alignment - since this uses React.Portal we're breaking the DOM order so the screenreader text needs to be navigable, in the correct DOM order, and never aria-hidden
 
   return placement !== 'floating' || alignment.includes('top') ? (
     <>

From eb48ef1587a6bec210799b3d0167bb2848da7bb6 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Fri, 12 Jul 2024 16:42:16 -0400
Subject: [PATCH 06/15] move css specificity to parent + refactor

---
 packages/gamut/src/Tip/ToolTip/elements.tsx | 14 ++++----------
 packages/gamut/src/Tip/shared/elements.tsx  |  9 ++++++++-
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/gamut/src/Tip/ToolTip/elements.tsx b/packages/gamut/src/Tip/ToolTip/elements.tsx
index b93908d926..4d65c24f26 100644
--- a/packages/gamut/src/Tip/ToolTip/elements.tsx
+++ b/packages/gamut/src/Tip/ToolTip/elements.tsx
@@ -1,15 +1,9 @@
 import styled from '@emotion/styled';
 
 import { Box } from '../../Box';
-import { TargetContainer, ToolTipContainerProps } from '../shared/elements';
+import { ToolTipContainerProps } from '../shared/elements';
 import { toolTipAlignmentVariants } from '../shared/styles';
 
-export const ToolTipContainer = styled(Box)<ToolTipContainerProps>`
-  ${TargetContainer}:hover + &,
-  ${TargetContainer}:focus-within + &,
-  &:hover {
-    opacity: 1;
-    visibility: visible;
-  }
-  ${toolTipAlignmentVariants}
-`;
+export const ToolTipContainer = styled(Box)<ToolTipContainerProps>(
+  toolTipAlignmentVariants
+);
diff --git a/packages/gamut/src/Tip/shared/elements.tsx b/packages/gamut/src/Tip/shared/elements.tsx
index b1668f9510..99e2608c15 100644
--- a/packages/gamut/src/Tip/shared/elements.tsx
+++ b/packages/gamut/src/Tip/shared/elements.tsx
@@ -11,7 +11,14 @@ import {
 } from './styles';
 
 export const TipWrapper = styled.div(
-  css({ position: 'relative', display: 'inline-flex' })
+  css({
+    '&:hover > div, &:focus-within > div': {
+      opacity: 1,
+      visibility: 'visible',
+    },
+    position: 'relative',
+    display: 'inline-flex',
+  })
 );
 
 enum TargetSelectors {

From e50bb5e9d0e2aac9e3715f4984e964d99aa4747f Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Fri, 12 Jul 2024 17:00:47 -0400
Subject: [PATCH 07/15] hide tooltip text from CTRL + OPT

---
 packages/gamut/src/Tip/ToolTip/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gamut/src/Tip/ToolTip/index.tsx b/packages/gamut/src/Tip/ToolTip/index.tsx
index 13368a3e8f..9529389411 100644
--- a/packages/gamut/src/Tip/ToolTip/index.tsx
+++ b/packages/gamut/src/Tip/ToolTip/index.tsx
@@ -69,7 +69,7 @@ export const ToolTip: React.FC<ToolTipProps> = ({
   return (
     <>
       {shouldRenderAriaTip && (
-        <Text screenreader id={id} role="tooltip">
+        <Text aria-hidden screenreader id={id} role="tooltip">
           {adjustedInfo}
         </Text>
       )}

From c08fafb22e33ef83212979c9721fb35898051bce Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Fri, 12 Jul 2024 17:14:13 -0400
Subject: [PATCH 08/15] fix wrappers

---
 packages/gamut/src/Tip/shared/InlineTip.tsx | 19 +++++++++++++------
 packages/gamut/src/Tip/shared/elements.tsx  | 16 +++++++++++++---
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/packages/gamut/src/Tip/shared/InlineTip.tsx b/packages/gamut/src/Tip/shared/InlineTip.tsx
index 335df436dc..c72d34bbb7 100644
--- a/packages/gamut/src/Tip/shared/InlineTip.tsx
+++ b/packages/gamut/src/Tip/shared/InlineTip.tsx
@@ -1,6 +1,12 @@
 import { InfoTipContainer } from '../InfoTip/styles';
 import { ToolTipContainer } from '../ToolTip/elements';
-import { TargetContainer, TipBody, TipWrapper } from './elements';
+import {
+  InfoTipWrapper,
+  TargetContainer,
+  TipBody,
+  TipWrapper,
+  ToolTipWrapper,
+} from './elements';
 import { narrowWidth } from './styles';
 import { TipPlacementComponentProps } from './types';
 
@@ -18,7 +24,8 @@ export const InlineTip: React.FC<TipPlacementComponentProps> = ({
 }) => {
   const isToolType = type === 'tool';
 
-  const InlineTipWrapper = isToolType ? ToolTipContainer : InfoTipContainer;
+  const InlineTipWrapper = isToolType ? ToolTipWrapper : InfoTipWrapper;
+  const InlineTipBodyWrapper = isToolType ? ToolTipContainer : InfoTipContainer;
   const InlineWrapperProps = isToolType ? {} : { hideTip: isTipHidden };
 
   const target = (
@@ -33,7 +40,7 @@ export const InlineTip: React.FC<TipPlacementComponentProps> = ({
   );
 
   const tipBody = (
-    <InlineTipWrapper
+    <InlineTipBodyWrapper
       alignment={alignment}
       zIndex={zIndex ?? 1}
       {...InlineWrapperProps}
@@ -47,11 +54,11 @@ export const InlineTip: React.FC<TipPlacementComponentProps> = ({
       >
         {info}
       </TipBody>
-    </InlineTipWrapper>
+    </InlineTipBodyWrapper>
   );
 
   return (
-    <TipWrapper>
+    <InlineTipWrapper>
       {alignment.includes('top') ? (
         <>
           {tipBody}
@@ -63,6 +70,6 @@ export const InlineTip: React.FC<TipPlacementComponentProps> = ({
           {tipBody}
         </>
       )}
-    </TipWrapper>
+    </InlineTipWrapper>
   );
 };
diff --git a/packages/gamut/src/Tip/shared/elements.tsx b/packages/gamut/src/Tip/shared/elements.tsx
index 99e2608c15..26c260c719 100644
--- a/packages/gamut/src/Tip/shared/elements.tsx
+++ b/packages/gamut/src/Tip/shared/elements.tsx
@@ -10,14 +10,24 @@ import {
   toolTipBodyCss,
 } from './styles';
 
-export const TipWrapper = styled.div(
+const tipWrapperStyles = {
+  position: 'relative',
+  display: 'inline-flex',
+} as const;
+
+export const ToolTipWrapper = styled.div(
   css({
     '&:hover > div, &:focus-within > div': {
       opacity: 1,
       visibility: 'visible',
     },
-    position: 'relative',
-    display: 'inline-flex',
+    ...tipWrapperStyles,
+  })
+);
+
+export const InfoTipWrapper = styled.div(
+  css({
+    ...tipWrapperStyles,
   })
 );
 

From d485d9a8c8c2d078a4b93b0c593ca438415d4ef9 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Fri, 12 Jul 2024 17:25:21 -0400
Subject: [PATCH 09/15] deprecated tip working

---
 .../src/Tip/DeprecatedToolTip/DeprecatedInlineToolTip.tsx   | 6 +++---
 packages/gamut/src/Tip/shared/InlineTip.tsx                 | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/gamut/src/Tip/DeprecatedToolTip/DeprecatedInlineToolTip.tsx b/packages/gamut/src/Tip/DeprecatedToolTip/DeprecatedInlineToolTip.tsx
index 026badae1a..2846bad1d4 100644
--- a/packages/gamut/src/Tip/DeprecatedToolTip/DeprecatedInlineToolTip.tsx
+++ b/packages/gamut/src/Tip/DeprecatedToolTip/DeprecatedInlineToolTip.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { TargetContainer, TipBody, TipWrapper } from '../shared/elements';
+import { TargetContainer, TipBody, ToolTipWrapper } from '../shared/elements';
 import { escapeKeyPressHandler } from '../shared/utils';
 import { ToolTipContainer } from '../ToolTip/elements';
 import {
@@ -20,7 +20,7 @@ export const DeprecatedInlineToolTip: React.FC<DeprecatedToolTipPlacementCompone
   const accessibilityProps = getDeprecatedAccessibilityProps({ focusable, id });
 
   return (
-    <TipWrapper>
+    <ToolTipWrapper>
       <TargetContainer
         onKeyDown={(e) => escapeKeyPressHandler(e)}
         {...accessibilityProps}
@@ -42,6 +42,6 @@ export const DeprecatedInlineToolTip: React.FC<DeprecatedToolTipPlacementCompone
           {children}
         </TipBody>
       </ToolTipContainer>
-    </TipWrapper>
+    </ToolTipWrapper>
   );
 };
diff --git a/packages/gamut/src/Tip/shared/InlineTip.tsx b/packages/gamut/src/Tip/shared/InlineTip.tsx
index c72d34bbb7..58f130d79c 100644
--- a/packages/gamut/src/Tip/shared/InlineTip.tsx
+++ b/packages/gamut/src/Tip/shared/InlineTip.tsx
@@ -4,7 +4,6 @@ import {
   InfoTipWrapper,
   TargetContainer,
   TipBody,
-  TipWrapper,
   ToolTipWrapper,
 } from './elements';
 import { narrowWidth } from './styles';

From 6009baeceea613932e7fb12c8ec100f7b00813d1 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Fri, 12 Jul 2024 17:40:46 -0400
Subject: [PATCH 10/15] fix tests and more comments

---
 .../src/Button/__tests__/IconButton.test.tsx   | 18 ++++++++++++++----
 packages/gamut/src/Tip/ToolTip/index.tsx       |  1 +
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/gamut/src/Button/__tests__/IconButton.test.tsx b/packages/gamut/src/Button/__tests__/IconButton.test.tsx
index dfde346e29..cea7b37e3d 100644
--- a/packages/gamut/src/Button/__tests__/IconButton.test.tsx
+++ b/packages/gamut/src/Button/__tests__/IconButton.test.tsx
@@ -43,27 +43,37 @@ describe('IconButton', () => {
     const { view } = renderView({});
 
     view.getByRole('button', { name: label });
-    view.getByRole('tooltip', { name: tipText });
+
+    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(
+      tipText
+    );
   });
 
   it('renders a tip with both labels when they are not repetitive', async () => {
     const { view } = renderView({ tip: uniqueTip });
 
     view.getByRole('button', { name: label });
-    view.getByRole('tooltip', { name: uniqueTip });
+    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(
+      uniqueTip
+    );
   });
 
   it('renders a true aria-label based on tip when aria-label is not defined', async () => {
     const { view } = renderView({ 'aria-label': undefined });
 
     view.getByRole('button', { name: label });
-    view.getByRole('tooltip', { name: tipText });
+    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(
+      tipText
+    );
   });
 
   it('renders a floating tip', async () => {
     const { view } = renderFloatingView({});
 
-    view.getByRole('tooltip', { name: tipText });
+    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(
+      tipText
+    );
+
     expect(view.queryByText(tip)).toBeNull();
 
     const cta = view.getByRole('button', { name: label });
diff --git a/packages/gamut/src/Tip/ToolTip/index.tsx b/packages/gamut/src/Tip/ToolTip/index.tsx
index 9529389411..5f76d95139 100644
--- a/packages/gamut/src/Tip/ToolTip/index.tsx
+++ b/packages/gamut/src/Tip/ToolTip/index.tsx
@@ -69,6 +69,7 @@ export const ToolTip: React.FC<ToolTipProps> = ({
   return (
     <>
       {shouldRenderAriaTip && (
+        // These are aria-hidden to ensure there's no duplication of content for screen readers navigating with CTRL + OPTION + ARROW
         <Text aria-hidden screenreader id={id} role="tooltip">
           {adjustedInfo}
         </Text>

From 32b328c2dc1048b88b226625e08f5e2956682e3e Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Mon, 15 Jul 2024 10:01:02 -0400
Subject: [PATCH 11/15] fix tooltip test

---
 packages/gamut/src/Tip/__tests__/ToolTip.test.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/gamut/src/Tip/__tests__/ToolTip.test.tsx b/packages/gamut/src/Tip/__tests__/ToolTip.test.tsx
index 8793b242e0..eca355f679 100644
--- a/packages/gamut/src/Tip/__tests__/ToolTip.test.tsx
+++ b/packages/gamut/src/Tip/__tests__/ToolTip.test.tsx
@@ -19,7 +19,9 @@ describe('ToolTip', () => {
     it('has an accessible tooltip', () => {
       const { view } = renderView({});
 
-      view.getByRole('tooltip', { name: info });
+      expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(
+        info
+      );
     });
     it('removes the label text when hasLabel is true', () => {
       const { view } = renderView({
@@ -29,7 +31,9 @@ describe('ToolTip', () => {
       });
 
       view.getByRole('button', { name: 'Click' });
-      view.getByRole('tooltip', { name: info });
+      expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(
+        info
+      );
     });
     it('hides ariaTooltip when there is no text other than the aria-label', () => {
       const { view } = renderView({
@@ -66,7 +70,7 @@ describe('floating placement', () => {
   it('has an accessible tooltip', () => {
     const { view } = renderView({ placement: 'floating' });
 
-    view.getByRole('tooltip', { name: info });
+    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(info);
   });
   it('removes the label text when hasRepetitiveLabel is true', () => {
     const { view } = renderView({
@@ -77,7 +81,7 @@ describe('floating placement', () => {
     });
 
     view.getByRole('button', { name: 'Click' });
-    view.getByRole('tooltip', { name: info });
+    expect(view.getByRole('tooltip', { hidden: true })).toHaveTextContent(info);
   });
   it('shows the tip when it is hovered over', () => {
     const { view } = renderView({
@@ -88,7 +92,7 @@ describe('floating placement', () => {
 
     userEvent.hover(view.getByRole('button'));
 
-    view.getByRole('tooltip');
+    view.getByRole('tooltip', { hidden: true });
     expect(view.queryAllByText(info).length).toBe(2);
   });
   it('calls onClick when clicked', () => {

From 04617df9626206e272065ce58784d75914762f32 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Mon, 15 Jul 2024 17:20:18 -0400
Subject: [PATCH 12/15] jaws test

---
 packages/gamut/src/Tip/InfoTip/index.tsx    | 12 ++++++++----
 packages/gamut/src/Tip/shared/InlineTip.tsx |  1 +
 packages/gamut/src/Tip/shared/elements.tsx  | 12 ++++++++++++
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index 9743f9c593..ad54ee1be9 100644
--- a/packages/gamut/src/Tip/InfoTip/index.tsx
+++ b/packages/gamut/src/Tip/InfoTip/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { Text } from '../../Typography';
+import { JawsTipText } from '../shared/elements';
 import { FloatingTip } from '../shared/FloatingTip';
 import { InlineTip } from '../shared/InlineTip';
 import {
@@ -96,9 +97,12 @@ export const InfoTip: React.FC<InfoTipProps> = ({
   };
 
   const text = (
-    <Text aria-hidden={isAriaHidden} aria-live="assertive" screenreader>
-      {!isTipHidden ? info : `\xa0`}
-    </Text>
+    <>
+      <JawsTipText>upjaws</JawsTipText>
+      <Text aria-hidden={isAriaHidden} aria-live="assertive" screenreader>
+        {!isTipHidden ? info : `\xa0`}
+      </Text>
+    </>
   );
 
   const tip = (
@@ -113,7 +117,7 @@ export const InfoTip: React.FC<InfoTipProps> = ({
 
   // on floating alignment - since this uses React.Portal we're breaking the DOM order so the screenreader text needs to be navigable, in the correct DOM order, and never aria-hidden
 
-  return placement !== 'floating' || alignment.includes('top') ? (
+  return placement === 'floating' && alignment.includes('bottom') ? (
     <>
       {text}
       {tip}
diff --git a/packages/gamut/src/Tip/shared/InlineTip.tsx b/packages/gamut/src/Tip/shared/InlineTip.tsx
index 58f130d79c..de91b48f03 100644
--- a/packages/gamut/src/Tip/shared/InlineTip.tsx
+++ b/packages/gamut/src/Tip/shared/InlineTip.tsx
@@ -50,6 +50,7 @@ export const InlineTip: React.FC<TipPlacementComponentProps> = ({
         id={id}
         width={narrow ? narrowWidth : undefined}
         zIndex="auto"
+        aria-hidden={isToolType}
       >
         {info}
       </TipBody>
diff --git a/packages/gamut/src/Tip/shared/elements.tsx b/packages/gamut/src/Tip/shared/elements.tsx
index 26c260c719..d8b47e010f 100644
--- a/packages/gamut/src/Tip/shared/elements.tsx
+++ b/packages/gamut/src/Tip/shared/elements.tsx
@@ -4,6 +4,7 @@ import styled from '@emotion/styled';
 
 import { Box } from '../../Box';
 import { Selectors } from '../../ButtonBase/ButtonBase';
+import { Text } from '../../Typography';
 import {
   inlineToolTipBodyAlignments,
   toolTipAlignmentVariants,
@@ -67,3 +68,14 @@ export interface ToolTipContainerProps
 export const TipBody = styled(Box)<
   StyleProps<typeof inlineToolTipBodyAlignments>
 >(css({ ...toolTipBodyCss }), inlineToolTipBodyAlignments);
+
+export const JawsTipText = styled(Text)(
+  css({
+    clipPath: 'inset(50%)',
+    height: '1px',
+    overflow: 'hidden',
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px',
+  })
+);

From bdb0cdbad8dd7e9087725e94abf12d25e062cc07 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Tue, 16 Jul 2024 11:24:51 -0400
Subject: [PATCH 13/15] fix text ordering for jaws testing;

---
 packages/gamut/src/Tip/InfoTip/index.tsx   | 11 ++++-------
 packages/gamut/src/Tip/shared/elements.tsx | 12 ------------
 2 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index ad54ee1be9..efc4b82dcf 100644
--- a/packages/gamut/src/Tip/InfoTip/index.tsx
+++ b/packages/gamut/src/Tip/InfoTip/index.tsx
@@ -97,12 +97,9 @@ export const InfoTip: React.FC<InfoTipProps> = ({
   };
 
   const text = (
-    <>
-      <JawsTipText>upjaws</JawsTipText>
-      <Text aria-hidden={isAriaHidden} aria-live="assertive" screenreader>
-        {!isTipHidden ? info : `\xa0`}
-      </Text>
-    </>
+    <Text aria-hidden={isAriaHidden} aria-live="assertive" screenreader>
+      {!isTipHidden ? info : `\xa0`}
+    </Text>
   );
 
   const tip = (
@@ -117,7 +114,7 @@ export const InfoTip: React.FC<InfoTipProps> = ({
 
   // on floating alignment - since this uses React.Portal we're breaking the DOM order so the screenreader text needs to be navigable, in the correct DOM order, and never aria-hidden
 
-  return placement === 'floating' && alignment.includes('bottom') ? (
+  return placement === 'floating' && alignment.includes('top') ? (
     <>
       {text}
       {tip}
diff --git a/packages/gamut/src/Tip/shared/elements.tsx b/packages/gamut/src/Tip/shared/elements.tsx
index d8b47e010f..26c260c719 100644
--- a/packages/gamut/src/Tip/shared/elements.tsx
+++ b/packages/gamut/src/Tip/shared/elements.tsx
@@ -4,7 +4,6 @@ import styled from '@emotion/styled';
 
 import { Box } from '../../Box';
 import { Selectors } from '../../ButtonBase/ButtonBase';
-import { Text } from '../../Typography';
 import {
   inlineToolTipBodyAlignments,
   toolTipAlignmentVariants,
@@ -68,14 +67,3 @@ export interface ToolTipContainerProps
 export const TipBody = styled(Box)<
   StyleProps<typeof inlineToolTipBodyAlignments>
 >(css({ ...toolTipBodyCss }), inlineToolTipBodyAlignments);
-
-export const JawsTipText = styled(Text)(
-  css({
-    clipPath: 'inset(50%)',
-    height: '1px',
-    overflow: 'hidden',
-    position: 'absolute',
-    whiteSpace: 'nowrap',
-    width: '1px',
-  })
-);

From 9a457336b69d68e92c08f7b602bc24b87cae5d83 Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Tue, 16 Jul 2024 11:31:42 -0400
Subject: [PATCH 14/15] rm imports

---
 packages/gamut/src/Tip/InfoTip/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index efc4b82dcf..53ce6dcfee 100644
--- a/packages/gamut/src/Tip/InfoTip/index.tsx
+++ b/packages/gamut/src/Tip/InfoTip/index.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { Text } from '../../Typography';
-import { JawsTipText } from '../shared/elements';
 import { FloatingTip } from '../shared/FloatingTip';
 import { InlineTip } from '../shared/InlineTip';
 import {

From f27b64a2ffc81aaa6b69e0372e650aea3956e79d Mon Sep 17 00:00:00 2001
From: dreamwasp <cass.spain@skillsoft.com>
Date: Tue, 16 Jul 2024 13:41:16 -0400
Subject: [PATCH 15/15] jaws navigable screenreader text

---
 packages/gamut/src/Tip/InfoTip/elements.tsx |  8 ++++++++
 packages/gamut/src/Tip/InfoTip/index.tsx    | 10 +++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 packages/gamut/src/Tip/InfoTip/elements.tsx

diff --git a/packages/gamut/src/Tip/InfoTip/elements.tsx b/packages/gamut/src/Tip/InfoTip/elements.tsx
new file mode 100644
index 0000000000..25b9ce1a4c
--- /dev/null
+++ b/packages/gamut/src/Tip/InfoTip/elements.tsx
@@ -0,0 +1,8 @@
+import { css } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
+
+import { Text } from '../../Typography';
+
+export const ScreenreaderNavigableTaxt = styled(Text)(
+  css({ position: 'relative' })
+);
diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index 53ce6dcfee..4084334a0c 100644
--- a/packages/gamut/src/Tip/InfoTip/index.tsx
+++ b/packages/gamut/src/Tip/InfoTip/index.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { Text } from '../../Typography';
 import { FloatingTip } from '../shared/FloatingTip';
 import { InlineTip } from '../shared/InlineTip';
 import {
@@ -8,6 +7,7 @@ import {
   TipBaseProps,
   tipDefaultProps,
 } from '../shared/types';
+import { ScreenreaderNavigableTaxt } from './elements';
 import { InfoTipButton } from './InfoTipButton';
 
 export type InfoTipProps = TipBaseProps & {
@@ -96,9 +96,13 @@ export const InfoTip: React.FC<InfoTipProps> = ({
   };
 
   const text = (
-    <Text aria-hidden={isAriaHidden} aria-live="assertive" screenreader>
+    <ScreenreaderNavigableTaxt
+      aria-hidden={isAriaHidden}
+      aria-live="assertive"
+      screenreader
+    >
       {!isTipHidden ? info : `\xa0`}
-    </Text>
+    </ScreenreaderNavigableTaxt>
   );
 
   const tip = (