fix(verificationCode): add htmlFor for label (#5573)

Author: philibea

.changeset/dark-pugs-worry.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Add htmlFor on label for VerificationCode

.github/workflows/ci.yml

@@ -13,7 +13,7 @@ jobs:
   build:
     strategy:
       matrix:
-        node: ["22"]
+        node: ["22", "24"]
     runs-on: ubuntu-24.04
     env:
       TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
@@ -143,7 +143,7 @@ jobs:
     needs: [typecheck, format]
     strategy:
       matrix:
-        node: ["22"]
+        node: ["22", "24"]
     steps:
       - uses: actions/checkout@v5
         with:

packages/form/src/components/VerificationCodeField/__tests__/__snapshots__/index.test.tsx.snap

@@ -100,7 +100,9 @@ exports[`verificationCodeField > should render correctly 1`] = `
           class="uv_toi52u0 uv_toi52u3j uv_toi52u2j uv_toi52u7d uv_toi52u1v uv_toi52u5d"
         >
           <label
-            class="uv_17td3g92 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owq uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+            class="uv_17td3g91 uv_m4c9ow0 uv_m4c9ow2 uv_m4c9ow4 uv_m4c9ow6 uv_m4c9ow8 uv_m4c9owb uv_m4c9owi uv_m4c9owq uv_m4c9ow1b uv_m4c9ow20 uv_m4c9ow3c"
+            for="verification-code-input-0"
+            id="verification-code-input-label"
           >
             Code
           </label>

packages/ui/src/components/VerificationCode/__tests__/__snapshots__/index.test.tsx.snap

@@ -559,7 +559,9 @@ exports[`verificationCode > render correctly with label 1`] = `
       class="emotion-0 emotion-1"
     >
       <label
-        class="styles_default__17td3g92 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_bodyStrong__m4c9owq style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+        class="styles_htmlFor__17td3g91 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_bodyStrong__m4c9owq style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+        for="«re»-0"
+        id="«re»-label"
       >
         test
       </label>
@@ -718,7 +720,9 @@ exports[`verificationCode > render correctly with labelDescription 1`] = `
         class="styles__toi52u0 styles_alignItems_center_xxsmall__toi52u3d styles_flexDirection_row_xxsmall__toi52u2j styles_flexWrap_nowrap_xxsmall__toi52u7d styles_gap_0.5rem_xxsmall__toi52u7 styles_justifyContent_normal_xxsmall__toi52u5d"
       >
         <label
-          class="styles_default__17td3g92 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_bodyStrong__m4c9owq style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+          class="styles_htmlFor__17td3g91 style__m4c9ow0 style_strikeThrough_false__m4c9ow2 style_italic_false__m4c9ow4 style_underline_false__m4c9ow6 style_oneLine_false__m4c9ow8 style_sentiment_neutral__m4c9owb style_prominence_default__m4c9owi style_variant_bodyStrong__m4c9owq style_disabled_false__m4c9ow1b style_undefined_compound_24__m4c9ow20 style_undefined_compound_72__m4c9ow3c"
+          for="«rn»-0"
+          id="«rn»-label"
         >
           test
         </label>

packages/ui/src/components/VerificationCode/__tests__/index.test.tsx

@@ -128,6 +128,10 @@ describe('verificationCode', () => {
 
   test('render correctly with label', () => {
     const { asFragment } = renderWithTheme(<VerificationCode label="test" />)
+
+    const code = screen.getByLabelText('test')
+    expect(code).toBeInTheDocument()
+    expect(code).toBeEnabled()
     expect(asFragment()).toMatchSnapshot()
   })
 

packages/ui/src/components/VerificationCode/index.tsx

@@ -179,6 +179,7 @@ export const VerificationCode = ({
   success,
 }: VerificationCodeProps) => {
   const uniqueId = useId()
+  const id = inputId || uniqueId
   const valuesArray = Object.assign(new Array(fields).fill(''), [
     ...initialValue.substring(0, fields),
   ])
@@ -337,6 +338,8 @@ export const VerificationCode = ({
     <FieldSet className={className} data-testid={dataTestId}>
       {label || labelDescription ? (
         <Label
+          htmlFor={`${id}-0`}
+          id={`${id}-label`}
           labelDescription={labelDescription}
           required={required}
           size={size === 'xlarge' ? 'large' : size}
@@ -354,7 +357,7 @@ export const VerificationCode = ({
             data-success={!!success}
             data-testid={index}
             disabled={disabled}
-            id={`${inputId || uniqueId}-${index}`}
+            id={`${id}-${index}`}
             inputSize={size}
             key={`field-${index}`}
             onChange={inputOnChange(index)}