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

@@ -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>;
 ```