From bf976b47761d8d4c03e493b19ab2ba7af9097602 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 19 Dec 2024 22:57:16 +0000
Subject: [PATCH 1/2] Remove CSS modules feature flag from VisuallyHidden

---
 .../__snapshots__/CounterLabel.test.tsx.snap  | 24 +----------
 .../src/VisuallyHidden/VisuallyHidden.tsx     | 41 ++-----------------
 .../__snapshots__/Autocomplete.test.tsx.snap  | 12 +-----
 3 files changed, 6 insertions(+), 71 deletions(-)

diff --git a/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap b/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
index 77ff00aad26..27f0f50a32b 100644
--- a/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
+++ b/packages/react/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
@@ -1,16 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CounterLabel renders with secondary scheme when no "scheme" prop is provided 1`] = `
-.c0:not(:focus):not(:active):not(:focus-within) {
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 <div>
   <span
     aria-hidden="true"
@@ -20,7 +10,7 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro
     1234
   </span>
   <span
-    class="c0"
+    class="VisuallyHidden"
   >
      (
     1234
@@ -30,16 +20,6 @@ exports[`CounterLabel renders with secondary scheme when no "scheme" prop is pro
 `;
 
 exports[`CounterLabel respects the primary "scheme" prop 1`] = `
-.c0:not(:focus):not(:active):not(:focus-within) {
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 <div>
   <span
     aria-hidden="true"
@@ -49,7 +29,7 @@ exports[`CounterLabel respects the primary "scheme" prop 1`] = `
     1234
   </span>
   <span
-    class="c0"
+    class="VisuallyHidden"
   >
      (
     1234
diff --git a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
index de1addffe15..8ab6cbdaad1 100644
--- a/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
@@ -1,52 +1,17 @@
-import styled from 'styled-components'
-import type {SxProp} from '../sx'
-import sx from '../sx'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import {clsx} from 'clsx'
-import {useFeatureFlag} from '../FeatureFlags'
 import React, {type HTMLAttributes} from 'react'
 import classes from './VisuallyHidden.module.css'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
-
-/**
- * Provides a component that implements the "visually hidden" technique. This is
- * analagous to the common `sr-only` class. Children that are rendered inside
- * this component will not be visible but will be available to screen readers.
- *
- * Note: if this component, or a descendant, has focus then this component will
- * no longer be visually hidden.
- *
- * @see https://www.scottohara.me/blog/2023/03/21/visually-hidden-hack.html
- */
-const StyledVisuallyHidden = toggleStyledComponent(
-  CSS_MODULES_FEATURE_FLAG,
-  'span',
-  styled.span<SxProp>`
-    &:not(:focus):not(:active):not(:focus-within) {
-      clip-path: inset(50%);
-      height: 1px;
-      overflow: hidden;
-      position: absolute;
-      white-space: nowrap;
-      width: 1px;
-    }
-
-    ${sx}
-  `,
-)
-
 export const VisuallyHidden = ({className, children, ...rest}: VisuallyHiddenProps) => {
-  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
   return (
-    <StyledVisuallyHidden className={clsx(className, enabled && classes.VisuallyHidden)} {...rest}>
+    <span className={clsx(className, classes.VisuallyHidden)} {...rest}>
       {children}
-    </StyledVisuallyHidden>
+    </span>
   )
 }
 
 export type VisuallyHiddenProps = React.PropsWithChildren<
   HTMLAttributes<HTMLSpanElement> & {
     className?: string
-  } & SxProp
+  }
 >
diff --git a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index f5301afd6c0..640bd2e803e 100644
--- a/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -537,16 +537,6 @@ exports[`snapshots renders a loading state 1`] = `
   justify-content: center;
 }
 
-.c3:not(:focus):not(:active):not(:focus-within) {
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 .c2 {
   -webkit-animation: rotate-keyframes 1s linear infinite;
   animation: rotate-keyframes 1s linear infinite;
@@ -606,7 +596,7 @@ exports[`snapshots renders a loading state 1`] = `
           />
         </svg>
         <span
-          className="c3"
+          className="VisuallyHidden"
           id=":r2h:"
         >
           Loading

From 201f6269bb8b0caec58549ea66c19c81cd8a8f5d Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Thu, 19 Dec 2024 15:03:52 -0800
Subject: [PATCH 2/2] Create angry-bugs-dance.md

---
 .changeset/angry-bugs-dance.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/angry-bugs-dance.md

diff --git a/.changeset/angry-bugs-dance.md b/.changeset/angry-bugs-dance.md
new file mode 100644
index 00000000000..548cab3ea44
--- /dev/null
+++ b/.changeset/angry-bugs-dance.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove CSS modules feature flag from VisuallyHidden