feat: Support id for Accordion (#2101)

* feat: Support id for Accordion

packages/odyssey-react-mui/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>
   );
 };