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

@@ -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">

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).

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,