From d01dcd4120017d16677ae870c3d1e0f7d1b13b47 Mon Sep 17 00:00:00 2001
From: Jordan Koschei <91091570+jordankoschei-okta@users.noreply.github.com>
Date: Wed, 29 Mar 2023 15:28:41 -0400
Subject: [PATCH] feat: add missing autoFocus from TextField

* fix: add missing autoFocus from TextField

* docs: add a11y docs for TextField autofocus
---
 packages/odyssey-react-mui/src/TextField.tsx               | 7 +++++++
 .../src/components/odyssey-mui/TextField/TextField.mdx     | 6 ++++++
 .../components/odyssey-mui/TextField/TextField.stories.tsx | 4 ++++
 3 files changed, 17 insertions(+)

diff --git a/packages/odyssey-react-mui/src/TextField.tsx b/packages/odyssey-react-mui/src/TextField.tsx
index 06c966e056..1e5c8c391e 100644
--- a/packages/odyssey-react-mui/src/TextField.tsx
+++ b/packages/odyssey-react-mui/src/TextField.tsx
@@ -42,6 +42,10 @@ import {
 } from "./";
 
 export type TextFieldProps = {
+  /**
+   * If `true`, the component will receive focus automatically.
+   */
+  autoFocus?: boolean;
   /**
    * This prop helps users to fill forms faster, especially on mobile devices.
    * The name can be confusing, as it's more like an autofill.
@@ -126,6 +130,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
     {
       autoCompleteType,
+      autoFocus,
       endAdornment,
       errorMessage,
       hint,
@@ -187,6 +192,8 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         {hint && <FormHelperText id={hintId}>{hint}</FormHelperText>}
         <InputBase
           autoComplete={autoCompleteType}
+          /* eslint-disable-next-line jsx-a11y/no-autofocus */
+          autoFocus={autoFocus}
           endAdornment={
             type === "password" ? (
               <InputAdornment position="end">
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.mdx b/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.mdx
index 91d0840aac..4563e37dbe 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.mdx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.mdx
@@ -163,3 +163,9 @@ Finally, Users with low digital literacy may not understand the purpose or behav
 ### Purpose
 
 When collecting an individual's personal data, you must define the input's purpose via the `autocomplete` attribute. This allows users to automate the filling of fields and ensures the purpose is known, regardless of the label. A complete list of fields this is required for may be found <a href="https://www.w3.org/TR/WCAG21/#input-purposes">in the WCAG spec</a>.
+
+### Autofocus
+
+Except for very specific cases, we advise against using the `autoFocus` prop; unless used considerately, the sense of focus being "teleported" to an unexpected part of the page can be jarring to users, especially those using screen readers.
+
+More details can be found [on MDN's `autofocus` page](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations).
diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.stories.tsx
index 06739a02ee..63c997d4fa 100644
--- a/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.stories.tsx
+++ b/packages/odyssey-storybook/src/components/odyssey-mui/TextField/TextField.stories.tsx
@@ -29,6 +29,10 @@ const storybookMeta: ComponentMeta<typeof TextField> = {
       control: "text",
       defaultValue: "name",
     },
+    autoFocus: {
+      control: "boolean",
+      defaultValue: false,
+    },
     isDisabled: {
       control: "boolean",
       defaultValue: false,