fix!: resolve issue 'The label's for attribute doesn't match any element id'

Author: mchappell

src/design-system/text-box/text-box.component.tsx

@@ -14,7 +14,7 @@ import type { Sx } from '../../design-tokens';
 export interface TextBoxProps extends Form.FormControlProps {
   required?: boolean;
   disabled?: boolean;
-  id?: string;
+  id: string;
   label: string;
   name?: string;
   defaultValue?: string;
@@ -67,7 +67,9 @@ export const TextBox = ({
             data-testid={rest['data-testid']}
           />
         </Form.Control>
-        <Form.Label className={cn(cx.label)}>{label}</Form.Label>
+        <Form.Label htmlFor={id} className={cn(cx.label)}>
+          {label}
+        </Form.Label>
       </Form.Field>
     </Flex>
     {errorMessage && (

src/design-system/text-box/text-box.stories.tsx

@@ -24,19 +24,24 @@ export default {
 const MainComponents = (): JSX.Element => (
   <Variants.Row>
     <Variants.Cell>
-      <TextBox label="Label" value="" />
+      <TextBox label="Label" value="" id="empty" />
     </Variants.Cell>
     <Variants.Cell>
       <TextBox label="Label" value="" id="hover" />
     </Variants.Cell>
     <Variants.Cell>
-      <TextBox label="Label" value="Input Text" />
+      <TextBox label="Label" value="Input Text" id="with-value" />
     </Variants.Cell>
     <Variants.Cell>
-      <TextBox label="Label" value="Input Text" errorMessage="Error" />
+      <TextBox
+        label="Label"
+        value="Input Text"
+        errorMessage="Error"
+        id="with-error"
+      />
     </Variants.Cell>
     <Variants.Cell>
-      <TextBox label="Label" value="Input Text" disabled />
+      <TextBox label="Label" value="Input Text" disabled id="disabled" />
     </Variants.Cell>
     <Variants.Cell>
       <TextBox label="Label" value="" id="focus" />
@@ -53,6 +58,7 @@ export const Overview = (): JSX.Element => {
         <Section title="Copy for use">
           <Flex flexDirection="column" alignItems="center" w="$fill" my="$32">
             <TextBox
+              id="default"
               value={value}
               label="Text"
               onChange={(event): void => {