From 8dcebc08ca7800ac3aeb93c80b67dae80f4643b7 Mon Sep 17 00:00:00 2001
From: ChloeGarciaMillerand <chloe@garcia.cloud>
Date: Mon, 24 Aug 2026 18:05:45 +0200
Subject: [PATCH] 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 -->
---
 .../interfaces/Account/Preferences/AddPasswordRow.tsx     | 1 +
 .../interfaces/Account/Preferences/AnalyticsSettings.tsx  | 2 ++
 .../interfaces/Account/Preferences/DashboardToggle.tsx    | 8 +++++++-
 .../interfaces/Account/Preferences/HotkeyToggle.tsx       | 5 ++++-
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/studio/components/interfaces/Account/Preferences/AddPasswordRow.tsx b/apps/studio/components/interfaces/Account/Preferences/AddPasswordRow.tsx
index 825d034c785..f73dd41e0e9 100644
--- a/apps/studio/components/interfaces/Account/Preferences/AddPasswordRow.tsx
+++ b/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)}
diff --git a/apps/studio/components/interfaces/Account/Preferences/AnalyticsSettings.tsx b/apps/studio/components/interfaces/Account/Preferences/AnalyticsSettings.tsx
index cb8b36a90a9..cff8baee8c0 100644
--- a/apps/studio/components/interfaces/Account/Preferences/AnalyticsSettings.tsx
+++ b/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>
diff --git a/apps/studio/components/interfaces/Account/Preferences/DashboardToggle.tsx b/apps/studio/components/interfaces/Account/Preferences/DashboardToggle.tsx
index 6fd365221b5..f770132e89a 100644
--- a/apps/studio/components/interfaces/Account/Preferences/DashboardToggle.tsx
+++ b/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)
diff --git a/apps/studio/components/interfaces/Account/Preferences/HotkeyToggle.tsx b/apps/studio/components/interfaces/Account/Preferences/HotkeyToggle.tsx
index 0a46e6315f5..7832429692f 100644
--- a/apps/studio/components/interfaces/Account/Preferences/HotkeyToggle.tsx
+++ b/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)}
           />