From 5b6ca16ec4b30a02732db64785dc955bef3e1692 Mon Sep 17 00:00:00 2001
From: Henri Bernard <132286421+hebernardEquisoft@users.noreply.github.com>
Date: Tue, 3 Dec 2024 08:17:00 -0500
Subject: [PATCH] chore(form-field): post master merge

---
 .../combobox/combobox.test.tsx.snap           |  3 ++
 .../src/components/combobox/combobox.tsx      |  1 +
 .../date-picker/date-picker.test.tsx.snap     |  9 ++++
 .../dropdown-list/dropdown-list.test.tsx.snap |  4 ++
 .../feedbacks/invalid-field-message.tsx       | 24 +++++++---
 .../react/src/components/feedbacks/types.ts   |  4 +-
 .../field-container/field-container.tsx       | 22 +++-------
 .../src/components/field-container/types.ts   |  7 +++
 .../src/components/field-container/utils.ts   |  7 +--
 packages/react/src/components/hint/hint.tsx   | 23 +++++++---
 packages/react/src/components/hint/types.ts   |  4 +-
 packages/react/src/components/input/types.ts  |  6 +--
 .../react/src/components/label/label.test.tsx |  4 +-
 .../src/components/label/label.test.tsx.snap  |  2 +
 packages/react/src/components/label/label.tsx | 44 +++++++++++++++----
 packages/react/src/components/label/types.ts  |  6 ++-
 .../search/search-input.test.tsx.snap         |  4 ++
 .../components/slider/slider.test.tsx.snap    |  3 ++
 .../stepper-input/stepper-input.test.tsx.snap |  4 ++
 .../text-area/text-area.test.tsx.snap         |  2 +
 .../text-input/text-input.test.tsx.snap       |  6 +++
 21 files changed, 139 insertions(+), 50 deletions(-)

diff --git a/packages/react/src/components/combobox/combobox.test.tsx.snap b/packages/react/src/components/combobox/combobox.test.tsx.snap
index b7008d2b5e..07a0e6b8ea 100644
--- a/packages/react/src/components/combobox/combobox.test.tsx.snap
+++ b/packages/react/src/components/combobox/combobox.test.tsx.snap
@@ -266,6 +266,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -770,6 +771,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1722,6 +1724,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
diff --git a/packages/react/src/components/combobox/combobox.tsx b/packages/react/src/components/combobox/combobox.tsx
index 2aa03a1c62..2bdc426d1c 100644
--- a/packages/react/src/components/combobox/combobox.tsx
+++ b/packages/react/src/components/combobox/combobox.tsx
@@ -77,6 +77,7 @@ const Textbox = styled.input<TextboxProps>`
     width: 100%;
 
     ${focus};
+
     &::placeholder {
         color: ${({ theme }) => theme.component['combobox-placeholder-text-color']};
         font-style: italic;
diff --git a/packages/react/src/components/date-picker/date-picker.test.tsx.snap b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
index 5ce12fea63..f49107a729 100644
--- a/packages/react/src/components/date-picker/date-picker.test.tsx.snap
+++ b/packages/react/src/components/date-picker/date-picker.test.tsx.snap
@@ -350,6 +350,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -740,6 +741,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1132,6 +1134,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1524,6 +1527,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1944,6 +1948,7 @@ label + .c5 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -2350,6 +2355,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -2908,6 +2914,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -4209,6 +4216,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -5485,6 +5493,7 @@ label + .c3 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
diff --git a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
index 5b5e85e4a4..988e209724 100644
--- a/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
+++ b/packages/react/src/components/dropdown-list/dropdown-list.test.tsx.snap
@@ -217,6 +217,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -665,6 +666,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1139,6 +1141,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -2561,6 +2564,7 @@ input + .c2 {
 >
   <label
     class="c2 c3"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
diff --git a/packages/react/src/components/feedbacks/invalid-field-message.tsx b/packages/react/src/components/feedbacks/invalid-field-message.tsx
index 027f8468e3..174dcef908 100644
--- a/packages/react/src/components/feedbacks/invalid-field-message.tsx
+++ b/packages/react/src/components/feedbacks/invalid-field-message.tsx
@@ -1,6 +1,9 @@
-import { PropsWithChildren, VoidFunctionComponent } from 'react';
+import { forwardRef, PropsWithChildren, ReactElement, Ref } from 'react';
 import styled from 'styled-components';
+import { useDataAttributes } from '../../hooks/use-data-attributes';
+import { useId } from '../../hooks/use-id';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { useFieldControlContext } from '../field-container/context';
 import { Icon } from '../icon/icon';
 import { InvalidFieldMessageProps } from './types';
 
@@ -19,16 +22,25 @@ const StyledIcon = styled(Icon)`
     margin-right: var(--spacing-base);
 `;
 
-export const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<InvalidFieldMessageProps>> = ({
-    children, id, noInvalidFieldIcon,
-}) => {
+export const InvalidFieldMessage = forwardRef(({
+    children,
+    id: providedId,
+    noInvalidFieldIcon,
+    ...otherProps
+}: PropsWithChildren<InvalidFieldMessageProps>, ref: Ref<HTMLSpanElement>): ReactElement => {
     const { isMobile } = useDeviceContext();
+    const dataAttributes = useDataAttributes(otherProps);
+    const { slotIds } = useFieldControlContext({});
+    const id = useId(providedId ?? slotIds?.invalid);
 
     return (
         <StyledValidationMessage
             data-testid="invalid-field"
             id={id}
+            ref={ref}
             $isMobile={isMobile}
+            {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
+            {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
         >
             {!noInvalidFieldIcon && (
                 <StyledIcon name="alertOctagon" size={isMobile ? '24' : '16'} />
@@ -36,4 +48,6 @@ export const InvalidFieldMessage: VoidFunctionComponent<PropsWithChildren<Invali
             {children}
         </StyledValidationMessage>
     );
-};
+});
+
+InvalidFieldMessage.displayName = 'InvalidFieldMessage';
diff --git a/packages/react/src/components/feedbacks/types.ts b/packages/react/src/components/feedbacks/types.ts
index 882faefe2a..1d11af5e1c 100644
--- a/packages/react/src/components/feedbacks/types.ts
+++ b/packages/react/src/components/feedbacks/types.ts
@@ -1,6 +1,8 @@
 import { NativeSpanProps } from '../../types/native-props';
 import { FieldContainerProps } from '../field-container/types';
 
+type PartialNativeSpanProps = Omit<NativeSpanProps, 'ref'>;
+
 type CommonFieldContainerProps = Pick<FieldContainerProps, 'noInvalidFieldIcon'>;
 
-export interface InvalidFieldMessageProps extends NativeSpanProps, CommonFieldContainerProps {}
+export interface InvalidFieldMessageProps extends PartialNativeSpanProps, CommonFieldContainerProps {}
diff --git a/packages/react/src/components/field-container/field-container.tsx b/packages/react/src/components/field-container/field-container.tsx
index 14ccf2ae2f..e8db1c3092 100644
--- a/packages/react/src/components/field-container/field-container.tsx
+++ b/packages/react/src/components/field-container/field-container.tsx
@@ -63,7 +63,8 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
         hint,
         required,
         disabled,
-    }), [fieldId, ariaLabel, ariaLabelledby, ariaDescribedby, valid, hint, required, disabled]);
+        slotIds,
+    }), [fieldId, ariaLabel, ariaLabelledby, ariaDescribedby, valid, hint, required, disabled, slotIds]);
 
     return (
         <FieldControlContext.Provider value={contextValues}>
@@ -75,23 +76,10 @@ export const FieldContainer: FunctionComponent<PropsWithChildren<FieldContainerP
                 $valid={valid}
                 {...props /* eslint-disable-line react/jsx-props-no-spreading */}
             >
-                {label && (
-                    <Label
-                        id={slotIds.label}
-                        forId={fieldId}
-                        tooltip={tooltip}
-                        required={required}
-                    >
-                        {label}
-                    </Label>
-                )}
-                {hint && (
-                    <Hint id={slotIds.hint}>
-                        {hint}
-                    </Hint>
-                )}
+                {label && <Label tooltip={tooltip}>{label}</Label>}
+                {hint && <Hint>{hint}</Hint>}
                 {!valid && (
-                    <InvalidFieldMessage id={slotIds.invalid} noInvalidFieldIcon={noInvalidFieldIcon}>
+                    <InvalidFieldMessage noInvalidFieldIcon={noInvalidFieldIcon}>
                         {validationErrorMessage}
                     </InvalidFieldMessage>
                 )}
diff --git a/packages/react/src/components/field-container/types.ts b/packages/react/src/components/field-container/types.ts
index 00d085807c..4f1fc6fe9b 100644
--- a/packages/react/src/components/field-container/types.ts
+++ b/packages/react/src/components/field-container/types.ts
@@ -1,5 +1,11 @@
 import { TooltipProps } from '../tooltip/tooltip';
 
+export interface FieldSlotIds {
+    label?: string;
+    hint?: string;
+    invalid?: string;
+}
+
 export interface FieldControlProps {
     id?: string;
     ariaLabel?: string;
@@ -8,6 +14,7 @@ export interface FieldControlProps {
     disabled?: boolean;
     required?: boolean;
     valid?: boolean;
+    slotIds?: FieldSlotIds;
 }
 
 export interface FieldContainerProps extends FieldControlProps {
diff --git a/packages/react/src/components/field-container/utils.ts b/packages/react/src/components/field-container/utils.ts
index 1aeec1ebf3..5c5261ecb7 100644
--- a/packages/react/src/components/field-container/utils.ts
+++ b/packages/react/src/components/field-container/utils.ts
@@ -1,12 +1,7 @@
 import { ReactNode } from 'react';
 import { devConsole } from '../../utils/dev-console';
 import { joinStrings } from '../../utils/string';
-
-interface FieldSlotIds {
-    label?: string;
-    hint?: string;
-    invalid?: string;
-}
+import { FieldSlotIds } from './types';
 
 export function getSlotId(prop: ReactNode, fieldId: string, propName: string): string | undefined {
     return prop ? `${fieldId}_${propName}` : undefined;
diff --git a/packages/react/src/components/hint/hint.tsx b/packages/react/src/components/hint/hint.tsx
index 53e7033751..1f45c40226 100644
--- a/packages/react/src/components/hint/hint.tsx
+++ b/packages/react/src/components/hint/hint.tsx
@@ -1,6 +1,9 @@
-import { PropsWithChildren, VoidFunctionComponent } from 'react';
+import { forwardRef, PropsWithChildren, ReactElement, Ref } from 'react';
 import styled from 'styled-components';
+import { useDataAttributes } from '../../hooks/use-data-attributes';
+import { useId } from '../../hooks/use-id';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { useFieldControlContext } from '../field-container/context';
 import { HintProps } from './types';
 
 const StyledHint = styled.span<{ $isMobile: boolean }>`
@@ -12,18 +15,28 @@ const StyledHint = styled.span<{ $isMobile: boolean }>`
     line-height: ${({ $isMobile }) => ($isMobile ? '1.5rem' : '1.25rem')};
 `;
 
-export const Hint: VoidFunctionComponent<PropsWithChildren<HintProps>> = ({
-    children, id,
-}) => {
+export const Hint = forwardRef(({
+    children,
+    id: providedId,
+    ...otherProps
+}: PropsWithChildren<HintProps>, ref: Ref<HTMLSpanElement>): ReactElement => {
     const { isMobile } = useDeviceContext();
+    const dataAttributes = useDataAttributes(otherProps);
+    const { slotIds } = useFieldControlContext({});
+    const id = useId(providedId ?? slotIds?.hint);
 
     return (
         <StyledHint
             data-testid="field-hint"
             id={id}
+            ref={ref}
             $isMobile={isMobile}
+            {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
+            {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
         >
             {children}
         </StyledHint>
     );
-};
+});
+
+Hint.displayName = 'Hint';
diff --git a/packages/react/src/components/hint/types.ts b/packages/react/src/components/hint/types.ts
index 7b539f205a..df2ff5c53f 100644
--- a/packages/react/src/components/hint/types.ts
+++ b/packages/react/src/components/hint/types.ts
@@ -1,3 +1,5 @@
 import { NativeSpanProps } from '../../types/native-props';
 
-export interface HintProps extends NativeSpanProps {}
+type PartialNativeSpanProps = Omit<NativeSpanProps, 'ref'>
+
+export interface HintProps extends PartialNativeSpanProps {}
diff --git a/packages/react/src/components/input/types.ts b/packages/react/src/components/input/types.ts
index c30778f752..2db37b468d 100644
--- a/packages/react/src/components/input/types.ts
+++ b/packages/react/src/components/input/types.ts
@@ -1,7 +1,7 @@
-import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+import { NativeInputProps } from '../../types/native-props';
 import { FieldControlProps } from '../field-container/types';
 
-type BaseInputProps = Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+type PartialNativeInputProps = Omit<NativeInputProps,
     | 'ref'
 >;
 
@@ -12,4 +12,4 @@ type CommonFieldControlProps = Pick<FieldControlProps,
     | 'valid'
 >;
 
-export type InputProps = BaseInputProps & CommonFieldControlProps;
+export type InputProps = PartialNativeInputProps & CommonFieldControlProps;
diff --git a/packages/react/src/components/label/label.test.tsx b/packages/react/src/components/label/label.test.tsx
index 8eeaa77991..1cc1f09c8e 100644
--- a/packages/react/src/components/label/label.test.tsx
+++ b/packages/react/src/components/label/label.test.tsx
@@ -4,14 +4,14 @@ import { Label } from './label';
 
 describe('Label', () => {
     test('contains tooltip when tooltip prop is defined', () => {
-        const wrapper = mountWithTheme(<Label htmlFor="test" tooltip={{ label: 'test' }}>Test</Label>);
+        const wrapper = mountWithTheme(<Label forId="test" tooltip={{ label: 'test' }}>Test</Label>);
 
         expect(wrapper.find(Tooltip).exists()).toBe(true);
     });
 
     test('Matches the snapshot', () => {
         const tree = renderWithTheme(
-            <Label htmlFor="test-id">
+            <Label forId="test-id">
                 Children
             </Label>,
         );
diff --git a/packages/react/src/components/label/label.test.tsx.snap b/packages/react/src/components/label/label.test.tsx.snap
index 44e2e9ab35..a689ec389f 100644
--- a/packages/react/src/components/label/label.test.tsx.snap
+++ b/packages/react/src/components/label/label.test.tsx.snap
@@ -23,7 +23,9 @@ input + .c0 {
 
 <label
   class="c0 c1"
+  data-testid="label"
   for="test-id"
+  id="uuid1"
 >
   Children
 </label>
diff --git a/packages/react/src/components/label/label.tsx b/packages/react/src/components/label/label.tsx
index c4a4dba183..a3a82c00de 100644
--- a/packages/react/src/components/label/label.tsx
+++ b/packages/react/src/components/label/label.tsx
@@ -1,6 +1,9 @@
-import { Fragment, FunctionComponent, PropsWithChildren } from 'react';
+import { forwardRef, Fragment, FunctionComponent, PropsWithChildren, ReactElement, Ref } from 'react';
 import styled from 'styled-components';
+import { useDataAttributes } from '../../hooks/use-data-attributes';
+import { useId } from '../../hooks/use-id';
 import { useDeviceContext } from '../device-context-provider/device-context-provider';
+import { useFieldControlContext } from '../field-container/context';
 import { Tooltip } from '../tooltip/tooltip';
 import { useTranslation } from '../../i18n/use-translation';
 import { LabelProps, RequiredLabelProps } from './types';
@@ -45,19 +48,44 @@ const RequiredLabel: FunctionComponent<RequiredLabelProps> = ({ type }) => {
     }
 };
 
-export const Label: FunctionComponent<PropsWithChildren<LabelProps>> = ({
-    className, children, forId, id, tooltip, required, requiredLabelType = 'text',
-}) => {
-    const WrapperComponent = tooltip ? StyledWrapper : Fragment;
+export const Label = forwardRef(({
+    id: providedId,
+    forId: providedForId,
+    className,
+    children,
+    tooltip,
+    ...otherProps
+}: PropsWithChildren<LabelProps>, ref: Ref<HTMLLabelElement>): ReactElement => {
     const { isMobile } = useDeviceContext();
+    const dataAttributes = useDataAttributes(otherProps);
+    const {
+        id: inputId,
+        slotIds,
+        required,
+    } = useFieldControlContext({});
+    const id = useId(slotIds?.label ?? providedId);
+    const htmlFor = inputId ?? providedForId;
+
+    const WrapperComponent = tooltip ? StyledWrapper : Fragment;
 
     return (
         <WrapperComponent>
-            <StyledLabel className={className} htmlFor={forId} id={id} $isMobile={isMobile}>
+            <StyledLabel
+                data-testid={`${inputId ? 'field-' : ''}label`}
+                className={className}
+                htmlFor={htmlFor}
+                id={id}
+                ref={ref}
+                $isMobile={isMobile}
+                {...otherProps /* eslint-disable-line react/jsx-props-no-spreading */}
+                {...dataAttributes /* eslint-disable-line react/jsx-props-no-spreading */}
+            >
                 {children}
-                {required && <RequiredLabel type={requiredLabelType} />}
+                {required && <RequiredLabel />}
             </StyledLabel>
             {tooltip && <StyledTooltip {...tooltip} /* eslint-disable-line react/jsx-props-no-spreading */ />}
         </WrapperComponent>
     );
-};
+});
+
+Label.displayName = 'Label';
diff --git a/packages/react/src/components/label/types.ts b/packages/react/src/components/label/types.ts
index 1ee856c645..cceff0f4ed 100644
--- a/packages/react/src/components/label/types.ts
+++ b/packages/react/src/components/label/types.ts
@@ -1,10 +1,12 @@
 import { NativeLabelProps } from '../../types/native-props';
 import { FieldContainerProps } from '../field-container/types';
 
+type PartialNativeLabelProps = Omit<NativeLabelProps, 'ref'>;
+
 type CommonFieldContainerProps = Pick<FieldContainerProps, 'required' | 'tooltip'>;
 
-export interface LabelProps extends NativeLabelProps, CommonFieldContainerProps {
-    forId: string;
+export interface LabelProps extends PartialNativeLabelProps, CommonFieldContainerProps {
+    forId?: string;
     requiredLabelType?: 'text';
 }
 
diff --git a/packages/react/src/components/search/search-input.test.tsx.snap b/packages/react/src/components/search/search-input.test.tsx.snap
index 214f18a9c1..75362d991c 100644
--- a/packages/react/src/components/search/search-input.test.tsx.snap
+++ b/packages/react/src/components/search/search-input.test.tsx.snap
@@ -314,11 +314,15 @@ input:valid + .c8 {
           >
             <styled.label
               $isMobile={false}
+              data-testid="search-icon"
               htmlFor="search-input"
+              id="uuid1"
             >
               <label
                 className="c2 c3"
+                data-testid="search-icon"
                 htmlFor="search-input"
+                id="uuid1"
               >
                 <styled.svg
                   disabled={true}
diff --git a/packages/react/src/components/slider/slider.test.tsx.snap b/packages/react/src/components/slider/slider.test.tsx.snap
index 54d2ee1077..470b6f94c7 100644
--- a/packages/react/src/components/slider/slider.test.tsx.snap
+++ b/packages/react/src/components/slider/slider.test.tsx.snap
@@ -236,6 +236,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -556,6 +557,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -851,6 +853,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
diff --git a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
index 39ae2b8398..08d2407d92 100644
--- a/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
+++ b/packages/react/src/components/stepper-input/stepper-input.test.tsx.snap
@@ -254,6 +254,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -591,6 +592,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -795,6 +797,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1069,6 +1072,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
diff --git a/packages/react/src/components/text-area/text-area.test.tsx.snap b/packages/react/src/components/text-area/text-area.test.tsx.snap
index 1a6f70be29..3b6c22fa32 100644
--- a/packages/react/src/components/text-area/text-area.test.tsx.snap
+++ b/packages/react/src/components/text-area/text-area.test.tsx.snap
@@ -119,6 +119,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid3"
     id="uuid3_label"
   >
@@ -256,6 +257,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid3"
     id="uuid3_label"
   >
diff --git a/packages/react/src/components/text-input/text-input.test.tsx.snap b/packages/react/src/components/text-input/text-input.test.tsx.snap
index 9e25ac04ad..15072da459 100644
--- a/packages/react/src/components/text-input/text-input.test.tsx.snap
+++ b/packages/react/src/components/text-input/text-input.test.tsx.snap
@@ -139,6 +139,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -298,6 +299,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -457,6 +459,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -638,6 +641,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -829,6 +833,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >
@@ -1019,6 +1024,7 @@ input + .c1 {
 >
   <label
     class="c1 c2"
+    data-testid="field-label"
     for="uuid2"
     id="uuid2_label"
   >