From f11a8086b090f4ca309af61e711dbe7345288b6b Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Mon, 9 Feb 2026 23:17:03 +1100
Subject: [PATCH] fix: migrate all uses of `visuallyHidden` (#22001)

Replace all usages of MUI's `visuallyHidden` utility from `@mui/utils`
with Tailwind's `sr-only` class. Both produce identical CSS, so this is
a no-op behaviorally -- just removes another MUI dependency from the
codebase. Also updates the accessibility example in the frontend
contributing docs to match.
---
 docs/about/contributing/frontend.md                       | 8 ++------
 site/package.json                                         | 1 -
 site/pnpm-lock.yaml                                       | 3 ---
 site/src/components/IconField/IconField.tsx               | 3 +--
 site/src/modules/dashboard/Navbar/ProxyMenu.tsx           | 3 +--
 site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx     | 3 +--
 site/src/pages/LoginPage/OAuthSignInForm.tsx              | 3 +--
 .../WorkspaceActions/BuildParametersPopover.tsx           | 3 +--
 .../src/pages/WorkspacePage/WorkspaceScheduleControls.tsx | 5 ++---
 9 files changed, 9 insertions(+), 23 deletions(-)

diff --git a/docs/about/contributing/frontend.md b/docs/about/contributing/frontend.md
index a8a56df1ba..e4274738b5 100644
--- a/docs/about/contributing/frontend.md
+++ b/docs/about/contributing/frontend.md
@@ -220,16 +220,12 @@ screen-readers; a placeholder text value is not enough for all users.
 When possible, make sure that all image/graphic elements have accompanying text
 that describes the image. `<img />` elements should have an `alt` text value. In
 other situations, it might make sense to place invisible, descriptive text
-inside the component itself using MUI's `visuallyHidden` utility function.
+inside the component itself using Tailwind's `sr-only` class.
 
 ```tsx
-import { visuallyHidden } from "@mui/utils";
-
 <Button>
     <GearIcon />
-    <Box component="span" sx={visuallyHidden}>
-        Settings
-    </Box>
+    <span className="sr-only">Settings</span>
 </Button>;
 ```
 
diff --git a/site/package.json b/site/package.json
index 54bf503d72..d92d34eda4 100644
--- a/site/package.json
+++ b/site/package.json
@@ -49,7 +49,6 @@
 		"@monaco-editor/react": "4.7.0",
 		"@mui/material": "5.18.0",
 		"@mui/system": "5.18.0",
-		"@mui/utils": "5.17.1",
 		"@mui/x-tree-view": "7.29.10",
 		"@radix-ui/react-avatar": "1.1.11",
 		"@radix-ui/react-checkbox": "1.3.3",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
index 29c9c02252..c4d2c67a99 100644
--- a/site/pnpm-lock.yaml
+++ b/site/pnpm-lock.yaml
@@ -61,9 +61,6 @@ importers:
       '@mui/system':
         specifier: 5.18.0
         version: 5.18.0(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.2))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.2))(@types/react@19.2.7)(react@19.2.2))(@types/react@19.2.7)(react@19.2.2)
-      '@mui/utils':
-        specifier: 5.17.1
-        version: 5.17.1(@types/react@19.2.7)(react@19.2.2)
       '@mui/x-tree-view':
         specifier: 7.29.10
         version: 7.29.10(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.2))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.2))(@types/react@19.2.7)(react@19.2.2))(@mui/material@5.18.0(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.2))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.2))(@types/react@19.2.7)(react@19.2.2))(@types/react@19.2.7)(react-dom@19.2.2(react@19.2.2))(react@19.2.2))(@mui/system@5.18.0(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.2))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.7)(react@19.2.2))(@types/react@19.2.7)(react@19.2.2))(@types/react@19.2.7)(react@19.2.2))(@types/react@19.2.7)(react-dom@19.2.2(react@19.2.2))(react@19.2.2)
diff --git a/site/src/components/IconField/IconField.tsx b/site/src/components/IconField/IconField.tsx
index 4c6156899b..da8d7fae4e 100644
--- a/site/src/components/IconField/IconField.tsx
+++ b/site/src/components/IconField/IconField.tsx
@@ -1,7 +1,6 @@
 import { css, Global, useTheme } from "@emotion/react";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
-import { visuallyHidden } from "@mui/utils";
 import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Loader } from "components/Loader/Loader";
@@ -116,7 +115,7 @@ export const IconField: FC<IconFieldProps> = ({
       - Except we don't do it when running tests, because Jest doesn't define
       `IntersectionObserver`, and it would make them slower anyway. */}
 			{process.env.NODE_ENV !== "test" && (
-				<div css={{ ...visuallyHidden }}>
+				<div className="sr-only" aria-hidden="true">
 					<Suspense>
 						<EmojiPicker onEmojiSelect={() => {}} />
 					</Suspense>
diff --git a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
index 6151451415..9b6b43e5e8 100644
--- a/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
+++ b/site/src/modules/dashboard/Navbar/ProxyMenu.tsx
@@ -1,5 +1,4 @@
 import Skeleton from "@mui/material/Skeleton";
-import { visuallyHidden } from "@mui/utils";
 import type * as TypesGen from "api/typesGenerated";
 import { Abbr } from "components/Abbr/Abbr";
 import { Button } from "components/Button/Button";
@@ -74,7 +73,7 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
 		<DropdownMenu open={open} onOpenChange={setOpen}>
 			<DropdownMenuTrigger asChild>
 				<Button variant="outline" size="lg">
-					<span css={{ ...visuallyHidden }}>
+					<span className="sr-only">
 						Latency for {selectedProxy?.display_name ?? "your region"}
 					</span>
 
diff --git a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
index 42c3f9b47a..54f8afe673 100644
--- a/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
+++ b/site/src/pages/CreateTemplatePage/BuildLogsDrawer.tsx
@@ -1,7 +1,6 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import Drawer from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
-import { visuallyHidden } from "@mui/utils";
 import { JobError } from "api/queries/templates";
 import type { TemplateVersion } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
@@ -46,7 +45,7 @@ export const BuildLogsDrawer: FC<BuildLogsDrawerProps> = ({
 					<h3 css={styles.title}>Creating template...</h3>
 					<IconButton size="small" onClick={drawerProps.onClose}>
 						<XIcon className="size-icon-sm" />
-						<span style={visuallyHidden}>Close build logs</span>
+						<span className="sr-only">Close build logs</span>
 					</IconButton>
 				</header>
 
diff --git a/site/src/pages/LoginPage/OAuthSignInForm.tsx b/site/src/pages/LoginPage/OAuthSignInForm.tsx
index 9cf90c9a83..ebaecc2fbc 100644
--- a/site/src/pages/LoginPage/OAuthSignInForm.tsx
+++ b/site/src/pages/LoginPage/OAuthSignInForm.tsx
@@ -1,4 +1,3 @@
-import { visuallyHidden } from "@mui/utils";
 import type { AuthMethods } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
@@ -80,7 +79,7 @@ const OidcIcon: FC<OidcIconProps> = ({ iconUrl }) => {
 	return (
 		<>
 			<img alt="" src={iconUrl} aria-labelledby={oidcId} />
-			<div id={oidcId} css={{ ...visuallyHidden }}>
+			<div id={oidcId} className="sr-only">
 				Open ID Connect
 			</div>
 		</>
diff --git a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
index a39dcd949c..f31e45189a 100644
--- a/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx
@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import visuallyHidden from "@mui/utils/visuallyHidden";
 import { richParameters } from "api/queries/templates";
 import { workspaceBuildParameters } from "api/queries/workspaceBuilds";
 import type {
@@ -69,7 +68,7 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
 					className="min-w-fit"
 				>
 					<ChevronDownIcon />
-					<span css={{ ...visuallyHidden }}>{label}</span>
+					<span className="sr-only">{label}</span>
 				</TopbarButton>
 			</PopoverTrigger>
 			<PopoverContent
diff --git a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
index 027d384864..b3162024a5 100644
--- a/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx
@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import Link, { type LinkProps } from "@mui/material/Link";
-import { visuallyHidden } from "@mui/utils";
 import { getErrorMessage } from "api/errors";
 import {
 	updateDeadline,
@@ -218,7 +217,7 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 						}}
 					>
 						<MinusIcon />
-						<span style={visuallyHidden}>Subtract 1 hour from deadline</span>
+						<span className="sr-only">Subtract 1 hour from deadline</span>
 					</Button>
 				</TooltipTrigger>
 				<TooltipContent side="bottom">
@@ -236,7 +235,7 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 						}}
 					>
 						<PlusIcon />
-						<span style={visuallyHidden}>Add 1 hour to deadline</span>
+						<span className="sr-only">Add 1 hour to deadline</span>
 					</Button>
 				</TooltipTrigger>
 				<TooltipContent side="bottom">Add 1 hour to deadline</TooltipContent>