jaws navigable screenreader text

Codecademy · Jul 16, 2024 · f27b64a · f27b64a
1 parent 19ec4c7
commit f27b64a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/packages/gamut/src/Tip/InfoTip/elements.tsx 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
@@ -1,13 +1,13 @@
 import { useEffect, useRef, useState } from 'react';
 
-import { Text } from '../../Typography';
 import { FloatingTip } from '../shared/FloatingTip';
 import { InlineTip } from '../shared/InlineTip';
 import {
   TipBaseAlignment,
   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 = (