fix: ESLint errors relating to accessibility in account preferences (#49301)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Improve toggle accessibility and `aria-label` for screen readers.

## What is the current behavior?

Toggles have no accessible name or description because FormItemLayout is
not properly linked to the Switch.
An `aria-label` was missing.

## What is the new behavior?

An `aria-label` and IDs have been added to associate the label with the
switch and make the toggles accessible to screen readers.

## Additional context

No visual changes have been made.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Accessibility**
  * Improved screen reader labels for password visibility controls.
  * Linked preference labels with their corresponding toggle controls.
* Added descriptive identifiers to telemetry, dashboard, and hotkey
settings for easier navigation.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/studio/components/interfaces/Account/Preferences/AddPasswordRow.tsx

@@ -120,6 +120,7 @@ const AddPasswordForm = ({ email, onClose }: { email: string; onClose: () => voi
                     actions={
                       <Button
                         icon={passwordHidden ? <Eye /> : <EyeOff />}
+                        aria-label={passwordHidden ? 'Show password' : 'Hide Password'}
                         variant="default"
                         className="w-7"
                         onClick={() => setPasswordHidden((prev) => !prev)}

apps/studio/components/interfaces/Account/Preferences/AnalyticsSettings.tsx

@@ -72,6 +72,7 @@ export const AnalyticsSettings = () => {
                     layout="flex-row-reverse"
                     label="Send telemetry data from Supabase services"
                     description="By opting in to sharing telemetry data, Supabase can analyze usage patterns to enhance user experience and use it for marketing and advertising purposes"
+                    id="telemetry"
                   >
                     <FormControl>
                       <Switch
@@ -80,6 +81,7 @@ export const AnalyticsSettings = () => {
                           field.onChange(value)
                           handleToggle(value)
                         }}
+                        id="telemetry"
                       />
                     </FormControl>
                   </FormItemLayout>

apps/studio/components/interfaces/Account/Preferences/DashboardToggle.tsx

@@ -26,9 +26,15 @@ export function DashboardToggle<T extends FieldValues>({
         control={form.control}
         name={name}
         render={({ field }) => (
-          <FormItemLayout layout="flex-row-reverse" label={label} description={description}>
+          <FormItemLayout
+            layout="flex-row-reverse"
+            label={label}
+            description={description}
+            id={name}
+          >
             <FormControl>
               <Switch
+                id={name}
                 checked={field.value}
                 onCheckedChange={(value) => {
                   field.onChange(value)

apps/studio/components/interfaces/Account/Preferences/HotkeyToggle.tsx

@@ -19,7 +19,9 @@ export function HotkeyToggle({ definition, isLast }: HotkeyToggleProps) {
   return (
     <CardContent className={isLast ? undefined : 'border-b'}>
       <div className="flex items-center justify-between gap-x-3">
-        <label className="text-sm text-foreground">{definition.label}</label>
+        <label htmlFor={`id-${definition.id}`} className="text-sm text-foreground">
+          {definition.label}
+        </label>
         <div className="flex items-center gap-x-3">
           <div className="flex items-center gap-1">
             {definition.sequence.map((step, i) => (
@@ -30,6 +32,7 @@ export function HotkeyToggle({ definition, isLast }: HotkeyToggleProps) {
             ))}
           </div>
           <Switch
+            id={`id-${definition.id}`}
             checked={enabled}
             onCheckedChange={(checked) => setShortcutEnabled(definition.id as ShortcutId, checked)}
           />