From 05e8f8a0b1fd4c0b1e53c289baba3d073565b61a Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Sun, 13 Oct 2024 20:04:24 +0200
Subject: [PATCH] Use `<label>` HTML element when possible (#7609)

This PR:

- Uses `<label>` HTML elements when possible to represent labels
- Uses the new `useId()` React hook to get an identifier to link the
label with its input; it's more suitable than generating a UUID at every
render

Fixes #7281

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../modules/ui/input/components/TextInput.tsx       |  9 ++++++---
 .../src/modules/ui/input/components/Checkbox.tsx    |  3 +--
 .../src/modules/ui/input/components/Radio.tsx       |  3 +--
 .../src/modules/ui/input/components/TextInputV2.tsx | 12 ++++++++++--
 .../src/modules/ui/input/components/Toggle.tsx      | 13 ++++++++-----
 5 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx b/packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx
index 1b1af1e59ac0..760b7625ee2a 100644
--- a/packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx
+++ b/packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import styled from '@emotion/styled';
+import React, { useId } from 'react';
 
 interface TextInputProps {
   label?: string;
@@ -18,7 +18,7 @@ const StyledContainer = styled.div<{ fullWidth?: boolean }>`
   margin-bottom: ${({ theme }) => theme.spacing(4)};
 `;
 
-const StyledLabel = styled.span`
+const StyledLabel = styled.label`
   color: ${({ theme }) => theme.font.color.light};
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
@@ -65,12 +65,15 @@ const TextInput: React.FC<TextInputProps> = ({
   placeholder,
   icon,
 }) => {
+  const inputId = useId();
+
   return (
     <StyledContainer fullWidth={fullWidth}>
-      {label && <StyledLabel>{label}</StyledLabel>}
+      {label && <StyledLabel htmlFor={inputId}>{label}</StyledLabel>}
       <StyledInputContainer>
         {icon && <StyledIcon>{icon}</StyledIcon>}
         <StyledInput
+          id={inputId}
           type="text"
           value={value}
           onChange={(e) => onChange(e.target.value)}
diff --git a/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx b/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx
index 103036b7cfd7..fd3327c63f23 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Checkbox.tsx
@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 import * as React from 'react';
 import { IconCheck, IconMinus } from 'twenty-ui';
-import { v4 } from 'uuid';
 
 export enum CheckboxVariant {
   Primary = 'primary',
@@ -165,7 +164,7 @@ export const Checkbox = ({
     setIsInternalChecked(event.target.checked ?? false);
   };
 
-  const checkboxId = 'checkbox' + v4();
+  const checkboxId = React.useId();
 
   return (
     <StyledInputContainer
diff --git a/packages/twenty-front/src/modules/ui/input/components/Radio.tsx b/packages/twenty-front/src/modules/ui/input/components/Radio.tsx
index 5530aaa3a332..0d41ca1f8304 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Radio.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Radio.tsx
@@ -3,7 +3,6 @@ import { motion } from 'framer-motion';
 import * as React from 'react';
 import { RGBA } from 'twenty-ui';
 
-import { v4 } from 'uuid';
 import { RadioGroup } from './RadioGroup';
 
 export enum RadioSize {
@@ -134,7 +133,7 @@ export const Radio = ({
     onCheckedChange?.(event.target.checked);
   };
 
-  const optionId = v4();
+  const optionId = React.useId();
 
   return (
     <StyledContainer className={className} labelPosition={labelPosition}>
diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
index cf4b06f6aba9..1f64b2adc55b 100644
--- a/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/TextInputV2.tsx
@@ -6,6 +6,7 @@ import {
   ForwardedRef,
   InputHTMLAttributes,
   forwardRef,
+  useId,
   useRef,
   useState,
 } from 'react';
@@ -21,7 +22,7 @@ const StyledContainer = styled.div<
   width: ${({ fullWidth }) => (fullWidth ? `100%` : 'auto')};
 `;
 
-const StyledLabel = styled.span`
+const StyledLabel = styled.label`
   color: ${({ theme }) => theme.font.color.light};
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
@@ -169,9 +170,15 @@ const TextInputV2Component = (
     setPasswordVisible(!passwordVisible);
   };
 
+  const inputId = useId();
+
   return (
     <StyledContainer className={className} fullWidth={fullWidth ?? false}>
-      {label && <StyledLabel>{label + (required ? '*' : '')}</StyledLabel>}
+      {label && (
+        <StyledLabel htmlFor={inputId}>
+          {label + (required ? '*' : '')}
+        </StyledLabel>
+      )}
       <StyledInputContainer>
         {!!LeftIcon && (
           <StyledLeftIconContainer>
@@ -181,6 +188,7 @@ const TextInputV2Component = (
           </StyledLeftIconContainer>
         )}
         <StyledInput
+          id={inputId}
           data-testid={dataTestId}
           autoComplete={autoComplete || 'off'}
           ref={combinedRef}
diff --git a/packages/twenty-front/src/modules/ui/input/components/Toggle.tsx b/packages/twenty-front/src/modules/ui/input/components/Toggle.tsx
index eeceaee8934e..39bafac99582 100644
--- a/packages/twenty-front/src/modules/ui/input/components/Toggle.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/Toggle.tsx
@@ -69,11 +69,14 @@ export const Toggle = ({
   };
 
   useEffect(() => {
-    if (value !== isOn) {
-      setIsOn(value ?? false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value]);
+    setIsOn((isOn) => {
+      if (value !== isOn) {
+        return value ?? false;
+      }
+
+      return isOn;
+    });
+  }, [value, setIsOn]);
 
   return (
     <StyledContainer