@okta/odyssey-react-mui 1.10.3 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.10.3",
+  "version": "1.11.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -51,7 +51,7 @@
     "@mui/system": "^5.14.9",
     "@mui/utils": "^5.11.2",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "1.10.3",
+    "@okta/odyssey-design-tokens": "1.11.0",
     "date-fns": "^2.30.0",
     "i18next": "^23.5.1",
     "material-react-table": "^2.0.2",
@@ -63,5 +63,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "a6212214c614cc9e2b6199d805e253d4fad586a4"
+  "gitHead": "36ec4393909bdea95455892c4a9eb65c38ea0857"
 }

package/src/Accordion.tsx

@@ -20,12 +20,17 @@ import {
 } from "@mui/material";
 import { ChevronDownIcon } from "./icons.generated";
 import { Support } from "./Typography";
+import { useUniqueId } from "./useUniqueId";
 
 export type AccordionProps = {
   /**
    * The content of the Accordion itself
    */
   children: ReactNode;
+  /**
+   * Defines IDs for the header and the content of the Accordion
+   */
+  id?: string;
   /**
    * The label text for the AccordionSummary
    */
@@ -66,12 +71,16 @@ const Accordion = ({
   children,
   label,
   hasShadow = true,
+  id: idOverride,
   isDefaultExpanded,
   isDisabled,
   isExpanded,
   onChange,
   translate,
 }: AccordionProps) => {
+  const id = useUniqueId(idOverride);
+  const headerId = `${id}-header`;
+  const contentId = `${id}-content`;
   return (
     <MuiAccordion
       defaultExpanded={isDefaultExpanded}
@@ -81,12 +90,18 @@ const Accordion = ({
       onChange={onChange}
       className={hasShadow ? `hasShadow` : undefined}
     >
-      <MuiAccordionSummary expandIcon={<ChevronDownIcon />}>
+      <MuiAccordionSummary
+        aria-controls={contentId}
+        expandIcon={<ChevronDownIcon />}
+        id={headerId}
+      >
         <Support component="div" translate={translate}>
           {label}
         </Support>
       </MuiAccordionSummary>
-      <MuiAccordionDetails>{children}</MuiAccordionDetails>
+      <MuiAccordionDetails aria-labelledby={headerId}>
+        {children}
+      </MuiAccordionDetails>
     </MuiAccordion>
   );
 };

package/src/CheckboxGroup.tsx

@@ -39,6 +39,7 @@ export type CheckboxGroupProps = {
   | "errorMessageList"
   | "hint"
   | "HintLinkComponent"
+  | "id"
   | "isDisabled"
 > &
   AllowedProps;
@@ -49,6 +50,7 @@ const CheckboxGroup = ({
   errorMessageList,
   hint,
   HintLinkComponent,
+  id: idOverride,
   isDisabled,
   isRequired = false,
   label,
@@ -56,12 +58,13 @@ const CheckboxGroup = ({
   translate,
 }: CheckboxGroupProps) => {
   const renderFieldComponent = useCallback(
-    ({ ariaDescribedBy, errorMessageElementId, labelElementId }) => (
+    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
       <MuiFormGroup
         aria-describedby={ariaDescribedBy}
         aria-errormessage={errorMessageElementId}
         aria-labelledby={labelElementId}
         data-se={testId}
+        id={id}
         translate={translate}
       >
         {children}
@@ -78,6 +81,7 @@ const CheckboxGroup = ({
       hasVisibleLabel={true}
       hint={hint}
       HintLinkComponent={HintLinkComponent}
+      id={idOverride}
       isDisabled={isDisabled}
       isOptional={!isRequired}
       label={label}

package/src/PasswordField.tsx

@@ -165,11 +165,13 @@ const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
             hasShowPassword && (
               <InputAdornment position="end">
                 <IconButton
+                  aria-controls={id}
                   aria-label={
                     inputType === "password"
                       ? t("passwordfield.icon.label.show")
                       : t("passwordfield.icon.label.hide")
                   }
+                  aria-pressed={inputType === "text"}
                   onClick={togglePasswordVisibility}
                 >
                   {inputType === "password" ? <ShowIcon /> : <HideIcon />}