@okta/odyssey-react-mui 0.21.1 → 0.21.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "0.21.1",
+  "version": "0.21.2",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -25,7 +25,7 @@
     "@mui/lab": "^5.0.0-alpha.117",
     "@mui/material": "^5.11.6",
     "@mui/utils": "^5.11.2",
-    "@okta/odyssey-design-tokens": "0.21.1"
+    "@okta/odyssey-design-tokens": "0.21.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -33,5 +33,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "721bec01e965f923e751749922e1073f63066783"
+  "gitHead": "294f5141125cf05fe9fc7cbda318bd85a1adafad"
 }

package/src/Banner.tsx

@@ -12,7 +12,7 @@
 
 import { AlertColor, AlertProps } from "@mui/material";
 import { memo } from "react";
-import { Alert, Link } from "./";
+import { Alert, Link, visuallyHidden } from "./";
 
 export interface BannerProps {
   /**
@@ -55,6 +55,7 @@ const Banner = ({
   text,
 }: BannerProps) => (
   <Alert onClose={onClose} role={role} severity={severity} variant="banner">
+    <span style={visuallyHidden}>{severity}:</span>
     {text}
     {linkUrl && (
       <Link href={linkUrl} variant="monochrome">

package/src/Infobox.tsx

@@ -12,7 +12,7 @@
 
 import { AlertColor } from "@mui/material";
 import { memo, ReactNode } from "react";
-import { Alert, AlertTitle } from ".";
+import { Alert, AlertTitle, visuallyHidden } from ".";
 
 export interface InfoboxProps {
   /**
@@ -37,6 +37,7 @@ export interface InfoboxProps {
 
 const Infobox = ({ children, severity, role, title }: InfoboxProps) => (
   <Alert role={role} severity={severity} variant="infobox">
+    <span style={visuallyHidden}>{severity}: </span>
     {title && <AlertTitle>{title}</AlertTitle>}
     {children}
   </Alert>

package/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,8 +192,10 @@ 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={
-            inputType === "password" ? (
+            type === "password" ? (
               <InputAdornment position="end">
                 <IconButton
                   aria-label="toggle password visibility"

package/src/theme/components.tsx

@@ -171,10 +171,6 @@ export const components: ThemeOptions["components"] = {
             backgroundColor: theme.palette.primary.dark,
           },
 
-          "&:focus-visible": {
-            outlineColor: theme.palette.primary.main,
-          },
-
           "&:active": {
             backgroundColor: theme.palette.primary.main,
           },
@@ -197,10 +193,6 @@ export const components: ThemeOptions["components"] = {
             color: theme.palette.primary.main,
           },
 
-          "&:focus-visible": {
-            outlineColor: theme.palette.primary.main,
-          },
-
           "&:active": {
             borderColor: theme.palette.primary.main,
           },
@@ -224,7 +216,7 @@ export const components: ThemeOptions["components"] = {
           },
 
           "&:focus-visible": {
-            outlineColor: theme.palette.error.main,
+            boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`,
             backgroundColor: theme.palette.error.dark,
           },
 
@@ -249,15 +241,12 @@ export const components: ThemeOptions["components"] = {
             backgroundColor: "rgba(29, 29, 33, 0.1)",
             borderColor: "transparent",
           },
-          "&:focus-visible": {
-            outlineColor: theme.palette.primary.main,
-          },
           "&:active": {
             backgroundColor: "rgba(29, 29, 33, 0.2)",
             borderColor: "transparent",
           },
           "&:disabled": {
-            backgroundColor: "rgba(235, 235, 237, 0.6)",
+            backgroundColor: "transparent",
             color: theme.palette.text.secondary,
             borderColor: "transparent",
           },
@@ -312,15 +301,12 @@ export const components: ThemeOptions["components"] = {
         position: "relative",
         marginBlock: "0",
         marginInline: "0",
-        transitionProperty:
-          "color, background-color, border-color, outline-offset, outline-color",
+        transitionProperty: "color, background-color, border-color, box-shadow",
         transitionDuration: "100ms",
         transitionTimingFunction: "linear",
         borderWidth: theme.mixins.borderWidth,
         borderStyle: theme.mixins.borderStyle,
         borderRadius: theme.mixins.borderRadius,
-        outlineColor: "transparent",
-        outlineOffset: "0",
         fontSize: theme.typography.body1.fontSize,
         lineHeight: theme.typography.ui.lineHeight,
         whiteSpace: "nowrap",
@@ -330,9 +316,9 @@ export const components: ThemeOptions["components"] = {
         },
 
         "&:focus-visible": {
-          outlineOffset: "2px",
-          outlineStyle: "solid",
-          outlineWidth: "2px",
+          boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.primary.main}`,
+          outline: "2px solid transparent",
+          outlineOffset: "1px",
         },
 
         "&:disabled": {
@@ -395,12 +381,6 @@ export const components: ThemeOptions["components"] = {
             color: theme.palette.error.dark,
           },
         },
-        "&.Mui-focusVisible": {
-          outlineColor: theme.palette.primary.main,
-          outlineOffset: 0,
-          outlineStyle: "solid",
-          outlineWidth: "2px",
-        },
       }),
     },
   },
@@ -729,7 +709,7 @@ export const components: ThemeOptions["components"] = {
           },
         },
 
-        p: {
+        "p:not([class])": {
           maxWidth: theme.mixins.maxWidth,
           marginBlockStart: 0,
           marginBlockEnd: theme.spacing(4),
@@ -994,14 +974,14 @@ export const components: ThemeOptions["components"] = {
       root: ({ theme }) => ({
         fontSize: theme.typography.subtitle1.fontSize,
         lineHeight: "1.33333333",
-        marginTop: theme.spacing(2),
+        marginBlockStart: theme.spacing(2),
         ".MuiFormLabel-root + &": {
-          marginTop: `-${theme.spacing(1)}`,
+          marginBlockStart: `-${theme.spacing(1)}`,
           color: theme.palette.text.secondary,
         },
-        marginBottom: theme.spacing(2),
+        marginBlockEnd: theme.spacing(2),
         "&:last-child": {
-          marginBottom: 0,
+          marginBlockEnd: 0,
         },
         textAlign: "start",
       }),
@@ -1121,10 +1101,9 @@ export const components: ThemeOptions["components"] = {
 
         [`&.${inputBaseClasses.focused}`]: {
           borderColor: theme.palette.primary.main,
-          outlineColor: theme.palette.primary.main,
-          outlineOffset: 0,
-          outlineStyle: "solid",
-          outlineWidth: "1px",
+          boxShadow: `0 0 0 1px ${theme.palette.primary.main}`,
+          outline: "2px solid transparent",
+          outlineOffset: "1px",
         },
 
         [`&.${inputBaseClasses.error}`]: {
@@ -1137,7 +1116,7 @@ export const components: ThemeOptions["components"] = {
 
         [`&.${inputBaseClasses.error}.${inputBaseClasses.focused}`]: {
           borderColor: theme.palette.error.main,
-          outlineColor: theme.palette.error.main,
+          boxShadow: `0 0 0 1px ${theme.palette.error.main}`,
         },
 
         [`&.${inputBaseClasses.disabled}`]: {