docs: update screenreader text example to keep screenreader focus indicator on screen

Updating the text screenreader story to keep the focus indicator of screenreaders on-screen.

Author: LinKCoding

packages/styleguide/src/lib/Typography/Text/Text.mdx

@@ -95,6 +95,8 @@ Text has some special props with common use cases to make your life easier.
 
 <Canvas of={TextStories.Screenreader} />
 
+If you need the focus indicator of a screenreader to stay on the screen, you can wrap the screenreader `Text` inside a parent element, like `Box` and set its `aria-labeledby` attribute to that matches the `id` of the `Text`. Depending on your use case, you might need to also set `aria-hidden` on the `Text` in order for the screenreader to not read the same text twice. Inspect the example above to see how it works.
+
 ### Highlight
 
 <Canvas of={TextStories.Highlight} />

packages/styleguide/src/lib/Typography/Text/Text.stories.tsx

@@ -1,4 +1,4 @@
-import { Column, LayoutGrid, Text } from '@codecademy/gamut';
+import { Box, Column, LayoutGrid, Text } from '@codecademy/gamut';
 // eslint-disable-next-line gamut/import-paths
 import {
   typographyElementVariants,
@@ -131,11 +131,15 @@ export const Screenreader: Story = {
             </Text>
           </Column>
           <Column size={9}>
-            <Text screenreader={variant}>
-              {variant
-                ? 'Visible only to screenreaders'
-                : 'When set to "false", this text is visible to non-screenreaders.'}
-            </Text>
+            {variant ? (
+              <Box aria-labelledby="example-sr-text" role="note" width={4}>
+                <Text aria-hidden id="example-sr-text" screenreader>
+                  Visible only to screenreaders
+                </Text>
+              </Box>
+            ) : (
+              <Text>This text is visible to non-screenreaders.</Text>
+            )}
           </Column>
         </Fragment>
       ))}