Remove CSS modules feature flag from VisuallyHidden

Author: jonrohan

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

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
+  }
 >

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