From 2061c9805869bd44dbf424feec27cf8ab32452bd Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Thu, 20 Jun 2024 13:13:07 -0500
Subject: [PATCH 1/3] refactor(VisuallyHidden): use span by default over div

---
 packages/react/src/internal/components/VisuallyHidden.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/internal/components/VisuallyHidden.tsx b/packages/react/src/internal/components/VisuallyHidden.tsx
index 560a2aa6768..f6683aecc5b 100644
--- a/packages/react/src/internal/components/VisuallyHidden.tsx
+++ b/packages/react/src/internal/components/VisuallyHidden.tsx
@@ -12,7 +12,7 @@ import sx from '../../sx'
  *
  * @see https://www.scottohara.me/blog/2023/03/21/visually-hidden-hack.html
  */
-export const VisuallyHidden = styled.div<SxProp>`
+export const VisuallyHidden = styled.span<SxProp>`
   &:not(:focus):not(:active):not(:focus-within) {
     clip-path: inset(50%);
     height: 1px;

From 965698634d7920d2bf0408bd7d3b4ce1278bb847 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Thu, 20 Jun 2024 14:47:13 -0500
Subject: [PATCH 2/3] refactor(VisuallyHidden): update base element from div to
 span

---
 packages/react/src/Spinner/Spinner.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index 33f7e1a6ddd..c980c506be8 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -57,11 +57,7 @@ function Spinner({size: sizeKey = 'medium', srText = 'Loading', 'aria-label': ar
           vectorEffect="non-scaling-stroke"
         />
       </svg>
-      {hasHiddenLabel ? (
-        <VisuallyHidden as="span" id={labelId}>
-          {srText}
-        </VisuallyHidden>
-      ) : null}
+      {hasHiddenLabel ? <VisuallyHidden id={labelId}>{srText}</VisuallyHidden> : null}
     </Box>
   )
 }

From eaa9b66f1f19e3956132d42a064bf1279c4e49cd Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@users.noreply.github.com>
Date: Thu, 20 Jun 2024 14:50:07 -0500
Subject: [PATCH 3/3] chore: add changesets

---
 .changeset/thick-jars-count.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/thick-jars-count.md

diff --git a/.changeset/thick-jars-count.md b/.changeset/thick-jars-count.md
new file mode 100644
index 00000000000..7108b5f934d
--- /dev/null
+++ b/.changeset/thick-jars-count.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update internal VisuallyHidden helper to use a `span` by default over a `div` to support more nesting scenarios by default