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 diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx index 6a4ebe096a1..0a2336d69a7 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" /> - {hasHiddenLabel ? ( - - {srText} - - ) : null} + {hasHiddenLabel ? {srText} : null} ) } 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` +export const VisuallyHidden = styled.span` &:not(:focus):not(:active):not(:focus-within) { clip-path: inset(50%); height: 1px;