Refactor ConnectView profile state management (v2.7)

- Improved accessibility in `UserSettings.tsx` using a `visuallyHidden` style object for unit system descriptions.
- Expanded integration tests in `page.test.tsx` to verify component orchestration.
- Fixed height validation error display for imperial units.
- Ensured raw numeric state (`userWeightKg`, etc.) to prevent regressions.
- All 653 unit tests and 5 VRT tests pass.
- Clean lint and format.

Co-authored-by: arii <342438+arii@users.noreply.github.com>

Author: google-labs-jules[bot]

app/client/connect/UserSettings.tsx

@@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack'
 import TextField from '@mui/material/TextField'
 import ToggleButton from '@mui/material/ToggleButton'
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+import Box from '@mui/material/Box'
 import {
   FormControl,
   FormLabel,
@@ -15,6 +16,18 @@ import {
 import { UserProfileState } from '@/types/connect'
 import { Gender } from '@/types/core'
 
+const visuallyHidden = {
+  border: 0,
+  clip: 'rect(0 0 0 0)',
+  height: '1px',
+  margin: -1,
+  overflow: 'hidden',
+  padding: 0,
+  position: 'absolute',
+  whiteSpace: 'nowrap',
+  width: '1px',
+} as const
+
 interface UserSettingsProps {
   profile: UserProfileState
 }
@@ -36,9 +49,9 @@ const UserSettings: React.FC<UserSettingsProps> = ({ profile }) => {
         aria-describedby="unit-system-description"
         fullWidth
       >
-        <p id="unit-system-description" style={{ display: 'none' }}>
+        <Box id="unit-system-description" sx={visuallyHidden}>
           Currently selected unit system is {data.unitSystem}.
-        </p>
+        </Box>
         <ToggleButton value="IMPERIAL" aria-label="imperial units">
           Imperial (lbs, ft, in)
         </ToggleButton>