Adding name prop in LabeledTextField for the TextField component (#2324)

## Summary:
- Adds `name` prop for `LabeledTextField` so that it can be set on the `TextField` component.

This is useful for setting the `name` attribute with the `autocomplete` attribute on input fields. This will help address a [LevelAccess issue](https://khanacademy.hub.essentia11y.com/short-link/C9J-QKFwoBnaiDMD) on the login page for FEI-5839: `Ensure that common input fields allow autocomplete and use standard autocomplete values`

Issue: WB-1762

## Test plan:
- Confirm that setting the `name` prop sets the `name` attribute on the input field in LabeledTextField (`?path=/story/packages-form-labeledtextfield--default&args=testId:;name:test-123`)

<img width="1577" alt="Screenshot 2024-09-18 at 3 34 27 PM" src="https://github.com/user-attachments/assets/9f07cc3e-6b3a-4389-a702-12acd44a361a">

Author: beaesguerra

Reviewers: jandrade, beaesguerra

Required Reviewers:

Approved By: jandrade

Checks: ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ⏭️  Publish npm snapshot, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: #2324

.changeset/empty-wasps-beg.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-form": minor
+---
+
+LabeledTextField: Adds `name` prop for the `TextField` component

__docs__/wonder-blocks-form/labeled-text-field.argtypes.ts

@@ -82,6 +82,18 @@ export default {
         },
     },
 
+    name: {
+        description: "Provide a name for the TextField.",
+        table: {
+            type: {
+                summary: "string",
+            },
+        },
+        control: {
+            type: "text",
+        },
+    },
+
     disabled: {
         description: `Whether the input should be disabled. Defaults to false.
             If the disabled prop is set to \`true\`, LabeledTextField will have disabled

packages/wonder-blocks-form/src/components/__tests__/labeled-text-field.test.tsx

@@ -381,6 +381,25 @@ describe("LabeledTextField", () => {
         expect(input).toBeInTheDocument();
     });
 
+    it("name prop is passed to input", async () => {
+        // Arrange
+        const name = "test-name";
+
+        // Act
+        render(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                name={name}
+            />,
+        );
+
+        // Assert
+        const input = await screen.findByRole("textbox");
+        expect(input).toHaveAttribute("name", name);
+    });
+
     it("style prop is passed to fieldheading", async () => {
         // Arrange
         const styles = StyleSheet.create({

packages/wonder-blocks-form/src/components/labeled-text-field.tsx

@@ -126,6 +126,10 @@ type CommonProps = {
      * Specifies if the TextField allows autocomplete.
      */
     autoComplete?: string;
+    /**
+     * Provide a name for the TextField.
+     */
+    name?: string;
 };
 
 type OtherInputProps = CommonProps & {
@@ -228,6 +232,7 @@ class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
             autoComplete,
             forwardedRef,
             ariaDescribedby,
+            name,
             // NOTE: We are not using this prop, but we need to remove it from
             // `otherProps` so it doesn't override the `handleValidate` function
             // call. We use `otherProps` due to a limitation in TypeScript where
@@ -275,6 +280,7 @@ class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
                                 readOnly={readOnly}
                                 autoComplete={autoComplete}
                                 ref={forwardedRef}
+                                name={name}
                                 {...otherProps}
                             />
                         }