From ea3238bd1e43ae51e0412503db0ecc3d80446bde Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Fri, 21 Mar 2025 13:11:06 -0400
Subject: [PATCH 01/28] added aria-expanded and aria-controls to Disclosure

---
 .../src/Disclosure/DisclosureBody/index.tsx   |  2 ++
 packages/gamut/src/Disclosure/index.tsx       | 28 +++++++++++--------
 packages/gamut/src/Disclosure/types.ts        |  5 ++++
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/gamut/src/Disclosure/DisclosureBody/index.tsx b/packages/gamut/src/Disclosure/DisclosureBody/index.tsx
index 587bb9e651a..c129736e4b2 100644
--- a/packages/gamut/src/Disclosure/DisclosureBody/index.tsx
+++ b/packages/gamut/src/Disclosure/DisclosureBody/index.tsx
@@ -13,6 +13,7 @@ export const DisclosureBody: React.FC<DisclosureBodyProps> = ({
   ctaText,
   hasPanelBg = false,
   href,
+  id,
   spacing = 'normal',
 }) => {
   const buttonRequirements = ctaText && ctaCallback;
@@ -26,6 +27,7 @@ export const DisclosureBody: React.FC<DisclosureBodyProps> = ({
       mb={verticalSpacing}
       mt={4}
       mx={horizontalSpacing}
+      id={id}
     >
       <Text width="100%" lineHeight={getLineHeight}>
         {body}
diff --git a/packages/gamut/src/Disclosure/index.tsx b/packages/gamut/src/Disclosure/index.tsx
index eae846c22b2..08c589f572f 100644
--- a/packages/gamut/src/Disclosure/index.tsx
+++ b/packages/gamut/src/Disclosure/index.tsx
@@ -1,5 +1,5 @@
 import { AnimatePresence } from 'framer-motion';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import * as React from 'react';
 
 import { ExpandInCollapseOut } from '../Animation';
@@ -29,36 +29,40 @@ export const Disclosure: React.FC<DisclosureProps> = ({
   variant,
 }) => {
   const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
+  const bodyId = useId();
   return (
     <DisclosureWrapper
+      as={isListItem ? 'li' : undefined}
       column
-      variant={variant}
       hasBorder={hasBorder}
       onClick={() => onClick?.()}
-      as={isListItem ? 'li' : undefined}
+      variant={variant}
     >
       <DisclosureButton
-        spacing={spacing}
+        aria-controls={bodyId}
+        aria-expanded={isExpanded}
+        disabled={disabled}
         heading={heading}
         headingLevel={headingLevel}
-        overline={overline}
-        subheading={subheading}
         isExpanded={isExpanded}
+        overline={overline}
         setIsExpanded={setIsExpanded}
-        disabled={disabled}
+        spacing={spacing}
+        subheading={subheading}
       />
       <AnimatePresence>
         {isExpanded && (
           <ExpandInCollapseOut>
             <DisclosureBody
               body={body}
-              hasPanelBg={hasPanelBg}
-              ctaText={ctaText}
-              spacing={spacing}
-              ctaCallback={ctaCallback}
               buttonPlacement={buttonPlacement}
-              href={href}
               buttonType={button}
+              ctaCallback={ctaCallback}
+              ctaText={ctaText}
+              hasPanelBg={hasPanelBg}
+              href={href}
+              id={bodyId}
+              spacing={spacing}
             />
           </ExpandInCollapseOut>
         )}
diff --git a/packages/gamut/src/Disclosure/types.ts b/packages/gamut/src/Disclosure/types.ts
index 62654c140e7..7d8db9fa626 100644
--- a/packages/gamut/src/Disclosure/types.ts
+++ b/packages/gamut/src/Disclosure/types.ts
@@ -52,6 +52,11 @@ export interface DisclosureBodyProps extends DisclosureBodyWrapperStyles {
    */
   ctaText?: string;
   href?: string;
+  /**
+   * This `id` is used to link the DisclosureButton to the DisclosureBody.
+   * It is needed for the `aria-controls` attribute to work properly for accessibility.
+   */
+  id: string;
   /**
    * Determines the size of the heading text and the space between text in the body.
    */

From c1991ca9d38c4c751dc9c9c3972a89902dca2927 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Fri, 21 Mar 2025 13:46:08 -0400
Subject: [PATCH 02/28] update infotip aria attributes

---
 packages/gamut/src/Tip/InfoTip/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index 61eb5095a97..fc51cd68b1d 100644
--- a/packages/gamut/src/Tip/InfoTip/index.tsx
+++ b/packages/gamut/src/Tip/InfoTip/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useId, useRef, useState } from 'react';
 
 import { FloatingTip } from '../shared/FloatingTip';
 import { InlineTip } from '../shared/InlineTip';
@@ -88,6 +88,8 @@ export const InfoTip: React.FC<InfoTipProps> = ({
 
   const Tip = loaded && isFloating ? FloatingTip : InlineTip;
 
+  const textId = useId();
+
   const tipProps = {
     alignment,
     escapeKeyPressHandler,
@@ -101,6 +103,7 @@ export const InfoTip: React.FC<InfoTipProps> = ({
     <ScreenreaderNavigableText
       aria-hidden={isAriaHidden}
       aria-live="assertive"
+      id={textId}
       screenreader
     >
       {!isTipHidden ? info : `\xa0`}
@@ -109,6 +112,8 @@ export const InfoTip: React.FC<InfoTipProps> = ({
 
   const tip = (
     <InfoTipButton
+      aria-controls={textId}
+      aria-expanded={!isTipHidden}
       active={!isTipHidden}
       emphasis={emphasis}
       onClick={() => clickHandler()}

From b488938119400b4f8cf859fd80f4093d6b752037 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Mon, 24 Mar 2025 16:49:18 -0400
Subject: [PATCH 03/28] added controls to listrow and expandcontrol

---
 .../gamut/src/DataList/Controls/ExpandControl.tsx   |  1 +
 .../gamut/src/DataList/Tables/Rows/TableRow.tsx     |  1 +
 packages/gamut/src/List/ListRow.tsx                 | 13 +++++++++----
 .../Organisms/Lists & Tables/List/List.stories.tsx  |  7 +++++--
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/gamut/src/DataList/Controls/ExpandControl.tsx b/packages/gamut/src/DataList/Controls/ExpandControl.tsx
index 657fc45c57e..51c7e25aa26 100644
--- a/packages/gamut/src/DataList/Controls/ExpandControl.tsx
+++ b/packages/gamut/src/DataList/Controls/ExpandControl.tsx
@@ -32,6 +32,7 @@ export const ExpandControl: React.FC<ExpandColProps> = ({
       }}
       aria-label={`Expand ${id} Row`}
       aria-expanded={expanded}
+      aria-controls={id}
     >
       <Rotation rotated={expanded}>
         <MiniChevronDownIcon color="text-disabled" />
diff --git a/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx b/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx
index 38784942c45..0db757f2b80 100644
--- a/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx
+++ b/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx
@@ -70,6 +70,7 @@ export const TableRow: DataRow = ({
   return (
     <ListRow
       as="tr"
+      id={String(id)}
       numOfColumns={numberOfColumns}
       selectable={selectable}
       {...listRowProps}
diff --git a/packages/gamut/src/List/ListRow.tsx b/packages/gamut/src/List/ListRow.tsx
index 45a86463b84..715fc410c2f 100644
--- a/packages/gamut/src/List/ListRow.tsx
+++ b/packages/gamut/src/List/ListRow.tsx
@@ -14,6 +14,8 @@ import { getGridTemplateColumns } from './utils';
 export interface RowProps
   extends Partial<PublicListProps<ComponentProps<typeof RowEl>>> {
   header?: boolean;
+  /** Used to link expandable content with the component that does the expanding, i.e. it's used to set the value for aria-controls  */
+  id?: string;
   /** This is an internal prop that is largely only used for the DataTable component */
   numOfColumns?: number;
   /**  This is an internal prop that is largely only used for the DataTable component */
@@ -45,12 +47,13 @@ const DivExpand = styled(motion.div)(expandStyles);
 const TDExpand = styled(motion.td)(expandStyles);
 
 const ExpandInCollapseOut: React.FC<
-  WithChildrenProp & { as: 'td' | 'div' }
-> = ({ as, children }) => {
+  WithChildrenProp & { as: 'td' | 'div', id: string }
+> = ({ as, children, id }) => {
   const ResponsiveExpand = as === 'td' ? TDExpand : DivExpand;
 
   return (
     <ResponsiveExpand
+      id={id}
       initial="collapsed"
       exit="collapsed"
       animate="expanded"
@@ -68,6 +71,7 @@ const ExpandInCollapseOut: React.FC<
 export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
   (
     {
+      id,
       children,
       expanded,
       expandedRowAriaLabel,
@@ -101,6 +105,7 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
         <RowEl
           as="div"
           {...rowConfig}
+          aria-controls={onClick ? id : ''}
           aria-expanded={renderExpanded && onClick ? expanded : undefined}
           clickable={Boolean(onClick)}
           isOl={isOl}
@@ -141,8 +146,8 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
           {content}
           <AnimatePresence>
             {expanded && (
-              <ExpandInCollapseOut as={isTable ? 'td' : 'div'}>
-                <Box role="region" aria-label={expandedRowAriaLabel}>
+              <ExpandInCollapseOut as={isTable ? 'td' : 'div'} id={id ?? ''}>
+                <Box role="region" aria-label={expandedRowAriaLabel} >
                   {renderExpanded?.()}
                 </Box>
               </ExpandInCollapseOut>
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx
index 8133db2e641..7388813faa6 100644
--- a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
+++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
@@ -650,7 +650,8 @@ const ExpandableButtonClickRow: React.FC<{
     <ListRow
       key={key}
       expanded={isExpanded}
-      renderExpanded={() => <ExpandedRow name={name} role={role} ship={ship} />}
+      renderExpanded={() => <ExpandedRow name={name} role={role} ship={ship}
+    />}
     >
       <ExpandedColumns name={name} role={role} ship={ship} />
       <ListCol size="lg" type="control">
@@ -699,7 +700,9 @@ export const ExpandableRowClick: React.FC<ExpandableRowProps> = ({
       expanded={isExpanded}
       key={key}
       onClick={() => setExpanded(!isExpanded)}
-      renderExpanded={() => <ExpandedRow name={name} role={role} ship={ship} />}
+      id={`${name}-row`}
+      renderExpanded={() => <ExpandedRow name={name} role={role} ship={ship}
+      />}
     >
       <ExpandedColumns name={name} role={role} ship={ship} />
       <ListCol size="xl" type="control">

From e7ba3babe67c0e4bcb3b0f30ae7d4907cd51ef9d Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Mon, 24 Mar 2025 16:50:24 -0400
Subject: [PATCH 04/28] formatted

---
 packages/gamut/src/List/ListRow.tsx                         | 4 ++--
 .../src/lib/Organisms/Lists & Tables/List/List.stories.tsx  | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/gamut/src/List/ListRow.tsx b/packages/gamut/src/List/ListRow.tsx
index 715fc410c2f..77538325816 100644
--- a/packages/gamut/src/List/ListRow.tsx
+++ b/packages/gamut/src/List/ListRow.tsx
@@ -47,7 +47,7 @@ const DivExpand = styled(motion.div)(expandStyles);
 const TDExpand = styled(motion.td)(expandStyles);
 
 const ExpandInCollapseOut: React.FC<
-  WithChildrenProp & { as: 'td' | 'div', id: string }
+  WithChildrenProp & { as: 'td' | 'div'; id: string }
 > = ({ as, children, id }) => {
   const ResponsiveExpand = as === 'td' ? TDExpand : DivExpand;
 
@@ -147,7 +147,7 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
           <AnimatePresence>
             {expanded && (
               <ExpandInCollapseOut as={isTable ? 'td' : 'div'} id={id ?? ''}>
-                <Box role="region" aria-label={expandedRowAriaLabel} >
+                <Box role="region" aria-label={expandedRowAriaLabel}>
                   {renderExpanded?.()}
                 </Box>
               </ExpandInCollapseOut>
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx
index 7388813faa6..2cf39647e17 100644
--- a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
+++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
@@ -650,8 +650,7 @@ const ExpandableButtonClickRow: React.FC<{
     <ListRow
       key={key}
       expanded={isExpanded}
-      renderExpanded={() => <ExpandedRow name={name} role={role} ship={ship}
-    />}
+      renderExpanded={() => <ExpandedRow name={name} role={role} ship={ship} />}
     >
       <ExpandedColumns name={name} role={role} ship={ship} />
       <ListCol size="lg" type="control">
@@ -701,8 +700,7 @@ export const ExpandableRowClick: React.FC<ExpandableRowProps> = ({
       key={key}
       onClick={() => setExpanded(!isExpanded)}
       id={`${name}-row`}
-      renderExpanded={() => <ExpandedRow name={name} role={role} ship={ship}
-      />}
+      renderExpanded={() => <ExpandedRow name={name} role={role} ship={ship} />}
     >
       <ExpandedColumns name={name} role={role} ship={ship} />
       <ListCol size="xl" type="control">

From 375c843802cafd206e3634fd4fa4c2588cbf0735 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Thu, 27 Mar 2025 15:29:04 -0400
Subject: [PATCH 05/28] fix list story

---
 .../Lists & Tables/List/List.stories.tsx          | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx
index 2cf39647e17..fab650a51bb 100644
--- a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
+++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
@@ -1,5 +1,6 @@
 import {
   Box,
+  ExpandControl,
   FillButton,
   FlexBox,
   IconButton,
@@ -648,6 +649,7 @@ const ExpandableButtonClickRow: React.FC<{
 
   return (
     <ListRow
+      id={`${name}-${role}-${ship}`}
       key={key}
       expanded={isExpanded}
       renderExpanded={() => <ExpandedRow name={name} role={role} ship={ship} />}
@@ -655,11 +657,12 @@ const ExpandableButtonClickRow: React.FC<{
       <ExpandedColumns name={name} role={role} ship={ship} />
       <ListCol size="lg" type="control">
         <TextButton>Hail</TextButton>
-        <TextButton onClick={() => setExpanded(!isExpanded)}>
-          <Rotation rotated={isExpanded}>
-            <MiniChevronDownIcon />
-          </Rotation>
-        </TextButton>
+        <ExpandControl
+          expanded={isExpanded}
+          onExpand={() => setExpanded(!isExpanded)}
+          id={`${name}-${role}-${ship}`}
+          disabled={false}
+        />
       </ListCol>
     </ListRow>
   );
@@ -699,7 +702,7 @@ export const ExpandableRowClick: React.FC<ExpandableRowProps> = ({
       expanded={isExpanded}
       key={key}
       onClick={() => setExpanded(!isExpanded)}
-      id={`${name}-row`}
+      id={`${name}-${role}-${ship}`}
       renderExpanded={() => <ExpandedRow name={name} role={role} ship={ship} />}
     >
       <ExpandedColumns name={name} role={role} ship={ship} />

From c5c7894113fad679a781c7531dccbcbbf1915d6c Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Thu, 27 Mar 2025 16:08:38 -0400
Subject: [PATCH 06/28] remove minichevron icon from list stores

---
 .../src/lib/Organisms/Lists & Tables/List/List.stories.tsx       | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx
index fab650a51bb..324141b65e7 100644
--- a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
+++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
@@ -15,7 +15,6 @@ import {
 import {
   ArrowChevronDownIcon,
   HouseEntranceIcon,
-  MiniChevronDownIcon,
   MiniDeleteIcon,
   MiniKebabMenuIcon,
   StarIcon,

From af644bdca48e4beb8a5fca745fb2c45523bbc417 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Thu, 27 Mar 2025 16:09:11 -0400
Subject: [PATCH 07/28] updated drawer and flyout

---
 packages/gamut/src/Drawer/index.tsx           | 10 +++++++--
 packages/gamut/src/Flyout/index.tsx           | 11 ++++++++--
 .../src/lib/Atoms/Drawer/Drawer.mdx           | 22 +++++++++++++++++++
 .../src/lib/Atoms/Drawer/Drawer.stories.tsx   |  7 ++++--
 .../src/lib/Molecules/Flyout/Flyout.mdx       | 20 +++++++++++++++++
 .../lib/Molecules/Flyout/Flyout.stories.tsx   | 10 +++++++--
 6 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/packages/gamut/src/Drawer/index.tsx b/packages/gamut/src/Drawer/index.tsx
index 36796f6078e..d5ee27e5199 100644
--- a/packages/gamut/src/Drawer/index.tsx
+++ b/packages/gamut/src/Drawer/index.tsx
@@ -20,12 +20,18 @@ export interface DrawerProps extends Omit<BoxProps, 'width'> {
    * Which edge of the drawer content container is aligned to during the animation.
    */
   alignContentContainer?: 'left' | 'right';
+   /**
+   * This `id` is used to link the element that expands the Drawer to the Drawer itself.
+   * It is needed for the `aria-controls` attribute to work properly for accessibility.
+   */
+   id: string;
 }
 
 export const Drawer: React.FC<DrawerProps> = ({
+  alignContentContainer = 'right',
   children,
   expanded,
-  alignContentContainer = 'right',
+  id,
   ...props
 }) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -41,9 +47,9 @@ export const Drawer: React.FC<DrawerProps> = ({
       {expanded ? (
         <DrawerBase
           animate={{ width: fullWidth }}
-          aria-expanded={expanded}
           bg="background-current"
           exit={{ width: 0 }}
+          id={id}
           initial={{ width: 0 }}
           overflow="clip"
           position="relative"
diff --git a/packages/gamut/src/Flyout/index.tsx b/packages/gamut/src/Flyout/index.tsx
index 7974c2a5372..dca1fa19020 100644
--- a/packages/gamut/src/Flyout/index.tsx
+++ b/packages/gamut/src/Flyout/index.tsx
@@ -35,16 +35,22 @@ export interface FlyoutProps extends WithChildrenProp {
    */
   title: React.ReactNode;
   bg?: Colors;
+  /**
+   * This `id` is used to link the element that expands the Drawer to the Drawer itself.
+   * It is needed for the `aria-controls` attribute to work properly for accessibility.
+   */
+  id: string;
 }
 
 export const Flyout: React.FC<FlyoutProps> = ({
+  bg = 'background',
   children,
   closeLabel = 'Close',
+  id,
   expanded,
   openFrom = 'left',
   onClose,
   title,
-  bg = 'background',
 }) => {
   return (
     <Overlay
@@ -56,13 +62,14 @@ export const Flyout: React.FC<FlyoutProps> = ({
     >
       <Background bg={bg}>
         <Drawer
+          alignContentContainer={openFrom === 'left' ? 'right' : 'left'}
           bottom={0}
           display="flex"
           expanded={expanded}
           flexDirection={openFrom === 'left' ? 'row' : 'row-reverse'}
+          id={id}
           position="fixed"
           top={0}
-          alignContentContainer={openFrom === 'left' ? 'right' : 'left'}
           {...{ [openFrom]: 0 }}
         >
           <FlexBox
diff --git a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
index cb78a1e64be..7fefe45712f 100644
--- a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
+++ b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
@@ -34,6 +34,28 @@ An example of a molecule that uses Drawer is the <LinkTo id="Molecules/Flyout">F
 
 Our Drawers are [controlled components](https://reactjs.org/docs/forms.html#controlled-components), so their checked value must be controlled by an external state passed in as `expanded`.
 
+The component that expands the `Drawer` should have an `aria-expanded` and `aria-controls` attribute. The `aria-controls` attribute should point to the `id` of the `Drawer`. The `aria-expanded` attribute should be set to the value of the `expanded` prop passed to the `Drawer`.
+
+```tsx
+const ExampleDrawer: React.FC = () => {
+  const [expanded, setExpanded] = useState(false);
+  const drawerId = useId();
+
+  return (
+    <FlexBox >
+      <Drawer expanded={expanded} id={drawerId}>Example Drawer</Drawer>
+      <StrokeButton
+        onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
+        aria-expanded={expanded}
+        aria-controls={drawerId}
+      >
+        Set the proper aria-labels!
+      </StrokeButton>
+    </FlexBox>
+  );
+}
+```
+
 ## Playground
 
 <Canvas sourceState="shown" of={DrawerStories.Default} />
diff --git a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx
index acfb94e4bcd..421a1c5c712 100644
--- a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx
+++ b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx
@@ -1,6 +1,6 @@
 import { Drawer, FlexBox, StrokeButton } from '@codecademy/gamut';
 import type { Meta } from '@storybook/react';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 
 const meta: Meta<typeof Drawer> = {
   component: Drawer,
@@ -11,10 +11,13 @@ export default meta;
 
 export const Default: React.FC = () => {
   const [expanded, setExpanded] = useState(false);
+  const drawerId = useId();
   return (
     <FlexBox bg="paleYellow" height="20rem">
-      <Drawer expanded={expanded}>Drawer content in here!</Drawer>
+      <Drawer expanded={expanded} id={drawerId}>Drawer content in here!</Drawer>
       <StrokeButton
+        aria-expanded={expanded}
+        aria-controls={drawerId}
         onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
       >
         Toggle Drawer
diff --git a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
index 81c1bb925bb..04fc3079931 100644
--- a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
+++ b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
@@ -30,6 +30,26 @@ Internally, Flyout is a combination of <LinkTo id="Molecules/Modals/Overlay">Ove
 
 Our Flyouts are [controlled components](https://reactjs.org/docs/forms.html#controlled-components), so their checked value must be controlled by an external state passed in as `expanded` and `onChange`:
 
+```tsx
+const ExampleFlyout: React.FC = () => {
+  const [expanded, setExpanded] = useState(false);
+  const flyoutId = useId();
+
+  return (
+    <FlexBox >
+      <Flyout expanded={expanded} id={flyoutId}>Example Flyout</Flyout>
+      <StrokeButton
+        aria-expanded={expanded}
+        aria-controls={FlyoutId}
+        onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
+      >
+        Set the proper aria-labels!
+      </StrokeButton>
+    </FlexBox>
+  );
+}
+```
+
 ## Playground
 
 <Canvas sourceState="shown" of={FlyoutStories.FlyoutExample} />
diff --git a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx
index 0d7d229340e..d09d3abd295 100644
--- a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx
+++ b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx
@@ -5,7 +5,9 @@ import { useState } from 'react';
 
 const meta: Meta<typeof Flyout> = {
   component: Flyout,
-  args: {},
+  args: {
+    id: 'flyout-example'
+  },
 };
 
 export default meta;
@@ -35,7 +37,11 @@ export const FlyoutExample: Story = {
             hurricane...
           </Box>
         </Flyout>
-        <StrokeButton onClick={() => setExpanded(true)}>
+        <StrokeButton
+          onClick={() => setExpanded(true)}
+          aria-expanded={expanded}
+          aria-controls={args.id}
+        >
           Tell me more?!
         </StrokeButton>
         <FlexBox>

From e3a654224d5b45bb1ee49cff9b8ba393540d4376 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Mon, 31 Mar 2025 11:49:29 -0400
Subject: [PATCH 08/28] formatted

---
 packages/gamut/src/Drawer/index.tsx                       | 4 ++--
 packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx       | 8 +++++---
 .../styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx    | 4 +++-
 packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx   | 8 +++++---
 .../src/lib/Molecules/Flyout/Flyout.stories.tsx           | 2 +-
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/gamut/src/Drawer/index.tsx b/packages/gamut/src/Drawer/index.tsx
index d5ee27e5199..0a1de54ba74 100644
--- a/packages/gamut/src/Drawer/index.tsx
+++ b/packages/gamut/src/Drawer/index.tsx
@@ -20,11 +20,11 @@ export interface DrawerProps extends Omit<BoxProps, 'width'> {
    * Which edge of the drawer content container is aligned to during the animation.
    */
   alignContentContainer?: 'left' | 'right';
-   /**
+  /**
    * This `id` is used to link the element that expands the Drawer to the Drawer itself.
    * It is needed for the `aria-controls` attribute to work properly for accessibility.
    */
-   id: string;
+  id: string;
 }
 
 export const Drawer: React.FC<DrawerProps> = ({
diff --git a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
index 7fefe45712f..d15e5fb50a9 100644
--- a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
+++ b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
@@ -42,8 +42,10 @@ const ExampleDrawer: React.FC = () => {
   const drawerId = useId();
 
   return (
-    <FlexBox >
-      <Drawer expanded={expanded} id={drawerId}>Example Drawer</Drawer>
+    <FlexBox>
+      <Drawer expanded={expanded} id={drawerId}>
+        Example Drawer
+      </Drawer>
       <StrokeButton
         onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
         aria-expanded={expanded}
@@ -53,7 +55,7 @@ const ExampleDrawer: React.FC = () => {
       </StrokeButton>
     </FlexBox>
   );
-}
+};
 ```
 
 ## Playground
diff --git a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx
index 421a1c5c712..9c041360e22 100644
--- a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx
+++ b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx
@@ -14,7 +14,9 @@ export const Default: React.FC = () => {
   const drawerId = useId();
   return (
     <FlexBox bg="paleYellow" height="20rem">
-      <Drawer expanded={expanded} id={drawerId}>Drawer content in here!</Drawer>
+      <Drawer expanded={expanded} id={drawerId}>
+        Drawer content in here!
+      </Drawer>
       <StrokeButton
         aria-expanded={expanded}
         aria-controls={drawerId}
diff --git a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
index 04fc3079931..f28ad8de9a1 100644
--- a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
+++ b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
@@ -36,8 +36,10 @@ const ExampleFlyout: React.FC = () => {
   const flyoutId = useId();
 
   return (
-    <FlexBox >
-      <Flyout expanded={expanded} id={flyoutId}>Example Flyout</Flyout>
+    <FlexBox>
+      <Flyout expanded={expanded} id={flyoutId}>
+        Example Flyout
+      </Flyout>
       <StrokeButton
         aria-expanded={expanded}
         aria-controls={FlyoutId}
@@ -47,7 +49,7 @@ const ExampleFlyout: React.FC = () => {
       </StrokeButton>
     </FlexBox>
   );
-}
+};
 ```
 
 ## Playground
diff --git a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx
index d09d3abd295..0b61bbbe519 100644
--- a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx
+++ b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react';
 const meta: Meta<typeof Flyout> = {
   component: Flyout,
   args: {
-    id: 'flyout-example'
+    id: 'flyout-example',
   },
 };
 

From 09dafab93c7cb4bae685c852cb2617e45ef0f04d Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Tue, 1 Apr 2025 10:40:59 -0400
Subject: [PATCH 09/28] updated drawer and flyout stories

---
 packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx     | 2 +-
 packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
index d15e5fb50a9..81bc6274c3b 100644
--- a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
+++ b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
@@ -34,7 +34,7 @@ An example of a molecule that uses Drawer is the <LinkTo id="Molecules/Flyout">F
 
 Our Drawers are [controlled components](https://reactjs.org/docs/forms.html#controlled-components), so their checked value must be controlled by an external state passed in as `expanded`.
 
-The component that expands the `Drawer` should have an `aria-expanded` and `aria-controls` attribute. The `aria-controls` attribute should point to the `id` of the `Drawer`. The `aria-expanded` attribute should be set to the value of the `expanded` prop passed to the `Drawer`.
+The component that toggles the `Drawer` should include both `aria-expanded` and `aria-controls` attributes. The `aria-controls` attribute must reference the `id` of the `Drawer`. The `aria-expanded` attribute should reflect the value of the `expanded` prop passed to the `Drawer`.
 
 ```tsx
 const ExampleDrawer: React.FC = () => {
diff --git a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
index f28ad8de9a1..26544d7e229 100644
--- a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
+++ b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
@@ -28,7 +28,9 @@ On button click, a container animates in from the left or right side of the wind
 
 Internally, Flyout is a combination of <LinkTo id="Molecules/Modals/Overlay">Overlay</LinkTo> and <LinkTo id="Atoms/Drawer">Drawer</LinkTo>.
 
-Our Flyouts are [controlled components](https://reactjs.org/docs/forms.html#controlled-components), so their checked value must be controlled by an external state passed in as `expanded` and `onChange`:
+Our Flyouts are [controlled components](https://reactjs.org/docs/forms.html#controlled-components), so their checked value must be controlled by an external state passed in as `expanded` and `onChange`.
+
+The component that toggles the `Flyout` should include both `aria-expanded` and `aria-controls` attributes. The `aria-controls` attribute must reference the `id` of the `Flyout`. The `aria-expanded` attribute should reflect the value of the `expanded` prop passed to the `Flyout`.
 
 ```tsx
 const ExampleFlyout: React.FC = () => {

From 7b8a1b0c30548be4da5a4e1efcfac691b7b4b95b Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Tue, 1 Apr 2025 13:00:40 -0400
Subject: [PATCH 10/28] updated guidance on listrow

---
 .../src/DataList/Controls/ExpandControl.tsx   |  2 +-
 packages/gamut/src/List/ListRow.tsx           |  6 ++---
 .../Organisms/Lists & Tables/List/List.mdx    | 22 +++++++++++++------
 .../Lists & Tables/List/List.stories.tsx      |  9 ++------
 4 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/packages/gamut/src/DataList/Controls/ExpandControl.tsx b/packages/gamut/src/DataList/Controls/ExpandControl.tsx
index 51c7e25aa26..f2620bf5b98 100644
--- a/packages/gamut/src/DataList/Controls/ExpandControl.tsx
+++ b/packages/gamut/src/DataList/Controls/ExpandControl.tsx
@@ -32,7 +32,7 @@ export const ExpandControl: React.FC<ExpandColProps> = ({
       }}
       aria-label={`Expand ${id} Row`}
       aria-expanded={expanded}
-      aria-controls={id}
+      aria-controls={id ?? undefined}
     >
       <Rotation rotated={expanded}>
         <MiniChevronDownIcon color="text-disabled" />
diff --git a/packages/gamut/src/List/ListRow.tsx b/packages/gamut/src/List/ListRow.tsx
index 77538325816..3826dfabc06 100644
--- a/packages/gamut/src/List/ListRow.tsx
+++ b/packages/gamut/src/List/ListRow.tsx
@@ -47,7 +47,7 @@ const DivExpand = styled(motion.div)(expandStyles);
 const TDExpand = styled(motion.td)(expandStyles);
 
 const ExpandInCollapseOut: React.FC<
-  WithChildrenProp & { as: 'td' | 'div'; id: string }
+  WithChildrenProp & { as: 'td' | 'div'; id: string | undefined }
 > = ({ as, children, id }) => {
   const ResponsiveExpand = as === 'td' ? TDExpand : DivExpand;
 
@@ -105,7 +105,7 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
         <RowEl
           as="div"
           {...rowConfig}
-          aria-controls={onClick ? id : ''}
+          aria-controls={onClick ? id : undefined}
           aria-expanded={renderExpanded && onClick ? expanded : undefined}
           clickable={Boolean(onClick)}
           isOl={isOl}
@@ -146,7 +146,7 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
           {content}
           <AnimatePresence>
             {expanded && (
-              <ExpandInCollapseOut as={isTable ? 'td' : 'div'} id={id ?? ''}>
+              <ExpandInCollapseOut as={isTable ? 'td' : 'div'} id={id ?? undefined}>
                 <Box role="region" aria-label={expandedRowAriaLabel}>
                   {renderExpanded?.()}
                 </Box>
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx
index 1740c8606d1..ce353d575f9 100644
--- a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx	
+++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx	
@@ -216,6 +216,9 @@ You can define collapsible content by passing an `expanded` prop and the `React.
 
 #### Expand on button click
 
+The `ListRow` component has access to the `ExpandControl` component which can be used to toggle the expanded state of the row. The `ExpandControl` component will automatically handle the rotation of the icon based on the expanded state.
+Ensure that the `ListRow` has a unique `id` prop to ensure that the `ExpandControl` can set the correct aria attributes.
+
 ```tsx
 export const ExpandableRow: React.FC<{
   header: string;
@@ -226,6 +229,7 @@ export const ExpandableRow: React.FC<{
 
   return (
     <ListRow
+      id={idOfRow}
       key={key}
       expanded={isExpanded}
       renderExpanded={() => <Text>Surprise</Text>}
@@ -233,11 +237,12 @@ export const ExpandableRow: React.FC<{
       <ListCol type="header">{header}</ListCol>
       <ListCol type="content">{content}</ListCol>
       <ListCol type="control">
-        <IconButton onClick={() => setExpanded(!isExpanded)}>
-          <Rotation rotated={isExpanded}>
-            <MiniChevronDownIcon />
-          </Rotation>
-        </IconButton>
+        <ExpandControl
+          expanded={isExpanded}
+          onExpand={() => setExpanded(!isExpanded)}
+          id={idOfRow}
+          disabled={false}
+        />
       </ListCol>
     </ListRow>
   );
@@ -246,6 +251,8 @@ export const ExpandableRow: React.FC<{
 
 #### Expand on row click
 
+Make sure you pass in an `id` prop to the `ListRow` component so that the correct aria attributes are set on the row.
+
 ```tsx
 export const ExpandableRow: React.FC<{
   header: string;
@@ -256,6 +263,7 @@ export const ExpandableRow: React.FC<{
 
   return (
     <ListRow
+      id={idOfRow}
       key={key}
       expanded={isExpanded}
       onClick={() => setExpanded(!isExpanded)}
@@ -293,13 +301,13 @@ You can combine variants and spacing to your needs.
 
 ### Expandable buttom
 
-Buttons can be configured to expand the row content.
+Buttons can be configured to expand the row content. Check over the "Expand on button click" section for more guidance.
 
 <Canvas of={ListStories.ExpandableButtonGuide} />
 
 ### Expanded row
 
-An entire row can be made interactive to expand the row content.
+An entire row can be made interactive to expand the row content. Check over the "Expand on row click" section for more guidance.
 
 <Canvas of={ListStories.ExpandedRowGuide} />
 
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx
index 324141b65e7..0e2393affa1 100644
--- a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
+++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
@@ -234,7 +234,7 @@ const HorizontalScrollingExample: React.FC<ListProps> = (args) => {
   return (
     <List {...args}>
       {rows.map(({ name, role, ship }, i, _, key = `example-row-${i}`) => (
-        <ListRow key={key}>
+        <ListRow id="test" key={key}>
           <ListCol size="lg" type="header">
             <Text fontWeight={700} truncate="ellipsis" truncateLines={1}>
               {name}
@@ -288,12 +288,7 @@ const HorizontalScrollingExample: React.FC<ListProps> = (args) => {
               tip="Options"
               tipProps={{ alignment: 'bottom-center', placement: 'floating' }}
             />
-            <IconButton
-              icon={MiniDeleteIcon}
-              size="small"
-              tip="Delete"
-              tipProps={{ alignment: 'bottom-center', placement: 'floating' }}
-            />
+
           </ListCol>
         </ListRow>
       ))}

From d4851a7c29f56670e8d3c6dab61efb0fa67af0e1 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Tue, 1 Apr 2025 14:47:18 -0400
Subject: [PATCH 11/28] formatted

---
 packages/gamut/src/List/ListRow.tsx                          | 5 ++++-
 .../src/lib/Organisms/Lists & Tables/List/List.stories.tsx   | 1 -
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/gamut/src/List/ListRow.tsx b/packages/gamut/src/List/ListRow.tsx
index 3826dfabc06..976da0df534 100644
--- a/packages/gamut/src/List/ListRow.tsx
+++ b/packages/gamut/src/List/ListRow.tsx
@@ -146,7 +146,10 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
           {content}
           <AnimatePresence>
             {expanded && (
-              <ExpandInCollapseOut as={isTable ? 'td' : 'div'} id={id ?? undefined}>
+              <ExpandInCollapseOut
+                as={isTable ? 'td' : 'div'}
+                id={id ?? undefined}
+              >
                 <Box role="region" aria-label={expandedRowAriaLabel}>
                   {renderExpanded?.()}
                 </Box>
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx
index 0e2393affa1..1566618d913 100644
--- a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
+++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
@@ -288,7 +288,6 @@ const HorizontalScrollingExample: React.FC<ListProps> = (args) => {
               tip="Options"
               tipProps={{ alignment: 'bottom-center', placement: 'floating' }}
             />
-
           </ListCol>
         </ListRow>
       ))}

From b9d903e13d179eed246d3180d4d882153ebb8f4c Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Tue, 1 Apr 2025 15:22:00 -0400
Subject: [PATCH 12/28] omit id from DisclosureProps

---
 packages/gamut/src/Disclosure/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gamut/src/Disclosure/types.ts b/packages/gamut/src/Disclosure/types.ts
index 7d8db9fa626..d081ef8f96f 100644
--- a/packages/gamut/src/Disclosure/types.ts
+++ b/packages/gamut/src/Disclosure/types.ts
@@ -64,7 +64,7 @@ export interface DisclosureBodyProps extends DisclosureBodyWrapperStyles {
 }
 
 export interface DisclosureProps
-  extends DisclosureButtonProps,
+  extends Omit<DisclosureButtonProps, 'id'>,
     DisclosureBodyProps,
     DisclosureWrapperStyles {
   /**

From 970247fddbc2f3410117b30a9848f466ad463769 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Wed, 2 Apr 2025 16:28:19 -0400
Subject: [PATCH 13/28] updated disclosure types

---
 packages/gamut/src/Disclosure/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/gamut/src/Disclosure/types.ts b/packages/gamut/src/Disclosure/types.ts
index d081ef8f96f..156c3eeb9c5 100644
--- a/packages/gamut/src/Disclosure/types.ts
+++ b/packages/gamut/src/Disclosure/types.ts
@@ -64,8 +64,8 @@ export interface DisclosureBodyProps extends DisclosureBodyWrapperStyles {
 }
 
 export interface DisclosureProps
-  extends Omit<DisclosureButtonProps, 'id'>,
-    DisclosureBodyProps,
+  extends DisclosureButtonProps,
+  Omit<DisclosureBodyProps, 'id'> ,
     DisclosureWrapperStyles {
   /**
    * Determines whether or not the Disclosure is expanded upon load.

From 416098d7f85bb4fba2f0905a59e5031fe0da7d38 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Wed, 2 Apr 2025 16:52:16 -0400
Subject: [PATCH 14/28] formatted

---
 packages/gamut/src/Disclosure/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gamut/src/Disclosure/types.ts b/packages/gamut/src/Disclosure/types.ts
index 156c3eeb9c5..de235829fc7 100644
--- a/packages/gamut/src/Disclosure/types.ts
+++ b/packages/gamut/src/Disclosure/types.ts
@@ -65,7 +65,7 @@ export interface DisclosureBodyProps extends DisclosureBodyWrapperStyles {
 
 export interface DisclosureProps
   extends DisclosureButtonProps,
-  Omit<DisclosureBodyProps, 'id'> ,
+    Omit<DisclosureBodyProps, 'id'>,
     DisclosureWrapperStyles {
   /**
    * Determines whether or not the Disclosure is expanded upon load.

From f6dc0bc9aa72afb44c5c2a2c094ab5cef31a6ee4 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Thu, 3 Apr 2025 12:15:00 -0400
Subject: [PATCH 15/28] updated disclosure to correct props and types

---
 packages/gamut/src/Disclosure/DisclosureButton/index.tsx | 2 ++
 packages/gamut/src/Disclosure/index.tsx                  | 3 +--
 packages/gamut/src/Disclosure/types.ts                   | 6 +++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/gamut/src/Disclosure/DisclosureButton/index.tsx b/packages/gamut/src/Disclosure/DisclosureButton/index.tsx
index 0b6db3e8659..b62502d2812 100644
--- a/packages/gamut/src/Disclosure/DisclosureButton/index.tsx
+++ b/packages/gamut/src/Disclosure/DisclosureButton/index.tsx
@@ -12,6 +12,7 @@ import { getRotationSize, getSpacing, getTitleSize } from '../helpers';
 import { DisclosureButtonProps } from '../types';
 
 export const DisclosureButton: React.FC<DisclosureButtonProps> = ({
+  ariaControlsId,
   disabled = false,
   heading,
   headingLevel = 'h3',
@@ -36,6 +37,7 @@ export const DisclosureButton: React.FC<DisclosureButtonProps> = ({
     <FlexBox>
       <DisclosureButtonWrapper
         aria-expanded={isExpanded}
+        aria-controls={ariaControlsId}
         onClick={handleClick}
         width="100%"
         variant="interface"
diff --git a/packages/gamut/src/Disclosure/index.tsx b/packages/gamut/src/Disclosure/index.tsx
index 08c589f572f..8b7803acbcf 100644
--- a/packages/gamut/src/Disclosure/index.tsx
+++ b/packages/gamut/src/Disclosure/index.tsx
@@ -39,8 +39,7 @@ export const Disclosure: React.FC<DisclosureProps> = ({
       variant={variant}
     >
       <DisclosureButton
-        aria-controls={bodyId}
-        aria-expanded={isExpanded}
+        ariaControlsId={bodyId}
         disabled={disabled}
         heading={heading}
         headingLevel={headingLevel}
diff --git a/packages/gamut/src/Disclosure/types.ts b/packages/gamut/src/Disclosure/types.ts
index de235829fc7..bb1a3ffb51b 100644
--- a/packages/gamut/src/Disclosure/types.ts
+++ b/packages/gamut/src/Disclosure/types.ts
@@ -4,6 +4,10 @@ import {
 } from './elements';
 
 export interface DisclosureButtonProps {
+  /**
+   * This `id` is used to link the DisclosureButton to the DisclosureBody.
+   */
+  ariaControlsId: string;
   /**
    * Renders the Disclosure unclickable.
    */
@@ -64,7 +68,7 @@ export interface DisclosureBodyProps extends DisclosureBodyWrapperStyles {
 }
 
 export interface DisclosureProps
-  extends DisclosureButtonProps,
+  extends Omit<DisclosureButtonProps, 'ariaControlsId'>,
     Omit<DisclosureBodyProps, 'id'>,
     DisclosureWrapperStyles {
   /**

From 2fe31e184e3ce5f65df4d5f3ace0e6f6a45c403e Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Thu, 3 Apr 2025 12:25:32 -0400
Subject: [PATCH 16/28] fix typo

---
 .../styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx
index ce353d575f9..f84977ffeb0 100644
--- a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx	
+++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.mdx	
@@ -299,7 +299,7 @@ You can combine variants and spacing to your needs.
 
 <Canvas of={ListStories.CondensedTableGuide} />
 
-### Expandable buttom
+### Expandable button
 
 Buttons can be configured to expand the row content. Check over the "Expand on button click" section for more guidance.
 

From bba3aaf3244720f68a9794744e62fc0bcd687243 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Thu, 3 Apr 2025 15:14:31 -0400
Subject: [PATCH 17/28] clean up of useId

---
 packages/gamut/src/Disclosure/index.tsx                   | 2 +-
 packages/gamut/src/Tip/InfoTip/index.tsx                  | 2 +-
 packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx       | 2 +-
 packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx   | 2 +-
 .../lib/Organisms/Lists & Tables/List/List.stories.tsx    | 8 +++++++-
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/gamut/src/Disclosure/index.tsx b/packages/gamut/src/Disclosure/index.tsx
index 8b7803acbcf..1010a8b3262 100644
--- a/packages/gamut/src/Disclosure/index.tsx
+++ b/packages/gamut/src/Disclosure/index.tsx
@@ -29,7 +29,7 @@ export const Disclosure: React.FC<DisclosureProps> = ({
   variant,
 }) => {
   const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
-  const bodyId = useId();
+  const bodyId = `disclosure-body-${useId()}`;
   return (
     <DisclosureWrapper
       as={isListItem ? 'li' : undefined}
diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index fc51cd68b1d..6b0b846b931 100644
--- a/packages/gamut/src/Tip/InfoTip/index.tsx
+++ b/packages/gamut/src/Tip/InfoTip/index.tsx
@@ -88,7 +88,7 @@ export const InfoTip: React.FC<InfoTipProps> = ({
 
   const Tip = loaded && isFloating ? FloatingTip : InlineTip;
 
-  const textId = useId();
+  const textId = `tooltip-text-${useId()}`;
 
   const tipProps = {
     alignment,
diff --git a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
index 81bc6274c3b..f44f9ef4ff7 100644
--- a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
+++ b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
@@ -39,7 +39,7 @@ The component that toggles the `Drawer` should include both `aria-expanded` and
 ```tsx
 const ExampleDrawer: React.FC = () => {
   const [expanded, setExpanded] = useState(false);
-  const drawerId = useId();
+  const drawerId = 'example-drawer-id'
 
   return (
     <FlexBox>
diff --git a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
index 26544d7e229..299ccb32c8f 100644
--- a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
+++ b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
@@ -35,7 +35,7 @@ The component that toggles the `Flyout` should include both `aria-expanded` and
 ```tsx
 const ExampleFlyout: React.FC = () => {
   const [expanded, setExpanded] = useState(false);
-  const flyoutId = useId();
+  const flyoutId = 'example-flyout-id';
 
   return (
     <FlexBox>
diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx
index 1566618d913..324141b65e7 100644
--- a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
+++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx	
@@ -234,7 +234,7 @@ const HorizontalScrollingExample: React.FC<ListProps> = (args) => {
   return (
     <List {...args}>
       {rows.map(({ name, role, ship }, i, _, key = `example-row-${i}`) => (
-        <ListRow id="test" key={key}>
+        <ListRow key={key}>
           <ListCol size="lg" type="header">
             <Text fontWeight={700} truncate="ellipsis" truncateLines={1}>
               {name}
@@ -288,6 +288,12 @@ const HorizontalScrollingExample: React.FC<ListProps> = (args) => {
               tip="Options"
               tipProps={{ alignment: 'bottom-center', placement: 'floating' }}
             />
+            <IconButton
+              icon={MiniDeleteIcon}
+              size="small"
+              tip="Delete"
+              tipProps={{ alignment: 'bottom-center', placement: 'floating' }}
+            />
           </ListCol>
         </ListRow>
       ))}

From c1799a7669c692e4be31b45fd40d557b1dd4123a Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Thu, 3 Apr 2025 15:19:56 -0400
Subject: [PATCH 18/28] formatted

---
 packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
index f44f9ef4ff7..0c4a7d85089 100644
--- a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
+++ b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
@@ -39,7 +39,7 @@ The component that toggles the `Drawer` should include both `aria-expanded` and
 ```tsx
 const ExampleDrawer: React.FC = () => {
   const [expanded, setExpanded] = useState(false);
-  const drawerId = 'example-drawer-id'
+  const drawerId = 'example-drawer-id';
 
   return (
     <FlexBox>

From dd23d8f3867da7e5c57fd8da6a7e0c5ed2fe8360 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Thu, 3 Apr 2025 16:25:11 -0400
Subject: [PATCH 19/28] updated disclosure body id

---
 packages/gamut/src/Disclosure/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/gamut/src/Disclosure/index.tsx b/packages/gamut/src/Disclosure/index.tsx
index 1010a8b3262..ae996fb5d78 100644
--- a/packages/gamut/src/Disclosure/index.tsx
+++ b/packages/gamut/src/Disclosure/index.tsx
@@ -1,5 +1,5 @@
 import { AnimatePresence } from 'framer-motion';
-import { useId, useState } from 'react';
+import { useState } from 'react';
 import * as React from 'react';
 
 import { ExpandInCollapseOut } from '../Animation';
@@ -29,7 +29,7 @@ export const Disclosure: React.FC<DisclosureProps> = ({
   variant,
 }) => {
   const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
-  const bodyId = `disclosure-body-${useId()}`;
+  const bodyId = `disclosure-body-${heading}}`;
   return (
     <DisclosureWrapper
       as={isListItem ? 'li' : undefined}

From 978394f3f45efc16c36ff1ddfb748a72b9ecac3a Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Thu, 3 Apr 2025 18:31:30 -0400
Subject: [PATCH 20/28] fixed typo in id

---
 packages/gamut/src/Disclosure/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gamut/src/Disclosure/index.tsx b/packages/gamut/src/Disclosure/index.tsx
index ae996fb5d78..c1b3f1a2d76 100644
--- a/packages/gamut/src/Disclosure/index.tsx
+++ b/packages/gamut/src/Disclosure/index.tsx
@@ -29,7 +29,7 @@ export const Disclosure: React.FC<DisclosureProps> = ({
   variant,
 }) => {
   const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
-  const bodyId = `disclosure-body-${heading}}`;
+  const bodyId = `disclosure-body-${heading}`;
   return (
     <DisclosureWrapper
       as={isListItem ? 'li' : undefined}

From f37c7d505a24d7172d7d314eba86bba2cdc3cef1 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Thu, 3 Apr 2025 19:52:29 -0400
Subject: [PATCH 21/28] pushing for build


From b64c25fc0945ce3bb01e31db160e91826211da1e Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Fri, 4 Apr 2025 08:30:44 -0400
Subject: [PATCH 22/28] updated disclosure to conditionally set aria-controls

---
 packages/gamut/src/Disclosure/DisclosureButton/index.tsx | 2 +-
 packages/gamut/src/Disclosure/index.tsx                  | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/gamut/src/Disclosure/DisclosureButton/index.tsx b/packages/gamut/src/Disclosure/DisclosureButton/index.tsx
index b62502d2812..84329dabb21 100644
--- a/packages/gamut/src/Disclosure/DisclosureButton/index.tsx
+++ b/packages/gamut/src/Disclosure/DisclosureButton/index.tsx
@@ -37,7 +37,7 @@ export const DisclosureButton: React.FC<DisclosureButtonProps> = ({
     <FlexBox>
       <DisclosureButtonWrapper
         aria-expanded={isExpanded}
-        aria-controls={ariaControlsId}
+        aria-controls={isExpanded ? ariaControlsId : undefined}
         onClick={handleClick}
         width="100%"
         variant="interface"
diff --git a/packages/gamut/src/Disclosure/index.tsx b/packages/gamut/src/Disclosure/index.tsx
index c1b3f1a2d76..8b1f795b4e7 100644
--- a/packages/gamut/src/Disclosure/index.tsx
+++ b/packages/gamut/src/Disclosure/index.tsx
@@ -1,5 +1,5 @@
 import { AnimatePresence } from 'framer-motion';
-import { useState } from 'react';
+import { useId, useState } from 'react';
 import * as React from 'react';
 
 import { ExpandInCollapseOut } from '../Animation';
@@ -29,7 +29,8 @@ export const Disclosure: React.FC<DisclosureProps> = ({
   variant,
 }) => {
   const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
-  const bodyId = `disclosure-body-${heading}`;
+  // const bodyId = `disclosure-body-${heading}`;
+  const bodyId = useId();
   return (
     <DisclosureWrapper
       as={isListItem ? 'li' : undefined}

From 699c116ea9be3ce9473135358b0d3a32eab7cdab Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Fri, 4 Apr 2025 09:11:38 -0400
Subject: [PATCH 23/28] re-implement useId()

---
 packages/gamut/src/Tip/InfoTip/index.tsx                | 2 +-
 packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx     | 2 +-
 packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index 6b0b846b931..fc51cd68b1d 100644
--- a/packages/gamut/src/Tip/InfoTip/index.tsx
+++ b/packages/gamut/src/Tip/InfoTip/index.tsx
@@ -88,7 +88,7 @@ export const InfoTip: React.FC<InfoTipProps> = ({
 
   const Tip = loaded && isFloating ? FloatingTip : InlineTip;
 
-  const textId = `tooltip-text-${useId()}`;
+  const textId = useId();
 
   const tipProps = {
     alignment,
diff --git a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
index 0c4a7d85089..81bc6274c3b 100644
--- a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
+++ b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
@@ -39,7 +39,7 @@ The component that toggles the `Drawer` should include both `aria-expanded` and
 ```tsx
 const ExampleDrawer: React.FC = () => {
   const [expanded, setExpanded] = useState(false);
-  const drawerId = 'example-drawer-id';
+  const drawerId = useId();
 
   return (
     <FlexBox>
diff --git a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
index 299ccb32c8f..26544d7e229 100644
--- a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
+++ b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
@@ -35,7 +35,7 @@ The component that toggles the `Flyout` should include both `aria-expanded` and
 ```tsx
 const ExampleFlyout: React.FC = () => {
   const [expanded, setExpanded] = useState(false);
-  const flyoutId = 'example-flyout-id';
+  const flyoutId = useId();
 
   return (
     <FlexBox>

From 9bafa406b11cc1de0f928e03ed0f4f595ac0bd65 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Fri, 4 Apr 2025 09:41:14 -0400
Subject: [PATCH 24/28] update drawer/flyout examples

---
 packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx           | 4 ++--
 packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx   | 2 +-
 packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx       | 2 +-
 .../styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx    | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
index 81bc6274c3b..b6b9ab5c1a2 100644
--- a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
+++ b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
@@ -47,9 +47,9 @@ const ExampleDrawer: React.FC = () => {
         Example Drawer
       </Drawer>
       <StrokeButton
-        onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
+        aria-controls={expanded ? drawerId : undefined}
         aria-expanded={expanded}
-        aria-controls={drawerId}
+        onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
       >
         Set the proper aria-labels!
       </StrokeButton>
diff --git a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx
index 9c041360e22..310eaee1c5d 100644
--- a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx
+++ b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx
@@ -18,8 +18,8 @@ export const Default: React.FC = () => {
         Drawer content in here!
       </Drawer>
       <StrokeButton
+        aria-controls={expanded ? drawerId : undefined}
         aria-expanded={expanded}
-        aria-controls={drawerId}
         onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
       >
         Toggle Drawer
diff --git a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
index 26544d7e229..70eef64fd66 100644
--- a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
+++ b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
@@ -44,7 +44,7 @@ const ExampleFlyout: React.FC = () => {
       </Flyout>
       <StrokeButton
         aria-expanded={expanded}
-        aria-controls={FlyoutId}
+        aria-controls={expanded ? drawerId : undefined}
         onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
       >
         Set the proper aria-labels!
diff --git a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx
index 0b61bbbe519..e40fcfd7557 100644
--- a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx
+++ b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx
@@ -38,9 +38,9 @@ export const FlyoutExample: Story = {
           </Box>
         </Flyout>
         <StrokeButton
-          onClick={() => setExpanded(true)}
+          aria-controls={expanded ? args.id : undefined}
           aria-expanded={expanded}
-          aria-controls={args.id}
+          onClick={() => setExpanded(true)}
         >
           Tell me more?!
         </StrokeButton>

From 0499920e7833511e6b175f1c4df2f8c4b2839bcf Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Fri, 4 Apr 2025 15:04:12 -0400
Subject: [PATCH 25/28] removed old comment and updated another

---
 packages/gamut/src/Disclosure/index.tsx | 1 -
 packages/gamut/src/Disclosure/types.ts  | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/gamut/src/Disclosure/index.tsx b/packages/gamut/src/Disclosure/index.tsx
index 8b1f795b4e7..8b7803acbcf 100644
--- a/packages/gamut/src/Disclosure/index.tsx
+++ b/packages/gamut/src/Disclosure/index.tsx
@@ -29,7 +29,6 @@ export const Disclosure: React.FC<DisclosureProps> = ({
   variant,
 }) => {
   const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
-  // const bodyId = `disclosure-body-${heading}`;
   const bodyId = useId();
   return (
     <DisclosureWrapper
diff --git a/packages/gamut/src/Disclosure/types.ts b/packages/gamut/src/Disclosure/types.ts
index bb1a3ffb51b..cd1497c4ff7 100644
--- a/packages/gamut/src/Disclosure/types.ts
+++ b/packages/gamut/src/Disclosure/types.ts
@@ -5,7 +5,7 @@ import {
 
 export interface DisclosureButtonProps {
   /**
-   * This `id` is used to link the DisclosureButton to the DisclosureBody.
+   * This is the value of the `id` that is used to link the DisclosureButton to the DisclosureBody.
    */
   ariaControlsId: string;
   /**

From 870787e48c03ef39f6525ed451b1e269c061d89c Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Mon, 7 Apr 2025 15:57:35 -0400
Subject: [PATCH 26/28] removed aria-controls from disclosure

---
 .../gamut/src/Disclosure/DisclosureButton/index.tsx |  2 --
 packages/gamut/src/Disclosure/index.tsx             |  4 +---
 packages/gamut/src/Disclosure/types.ts              | 13 ++-----------
 3 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/packages/gamut/src/Disclosure/DisclosureButton/index.tsx b/packages/gamut/src/Disclosure/DisclosureButton/index.tsx
index 84329dabb21..0b6db3e8659 100644
--- a/packages/gamut/src/Disclosure/DisclosureButton/index.tsx
+++ b/packages/gamut/src/Disclosure/DisclosureButton/index.tsx
@@ -12,7 +12,6 @@ import { getRotationSize, getSpacing, getTitleSize } from '../helpers';
 import { DisclosureButtonProps } from '../types';
 
 export const DisclosureButton: React.FC<DisclosureButtonProps> = ({
-  ariaControlsId,
   disabled = false,
   heading,
   headingLevel = 'h3',
@@ -37,7 +36,6 @@ export const DisclosureButton: React.FC<DisclosureButtonProps> = ({
     <FlexBox>
       <DisclosureButtonWrapper
         aria-expanded={isExpanded}
-        aria-controls={isExpanded ? ariaControlsId : undefined}
         onClick={handleClick}
         width="100%"
         variant="interface"
diff --git a/packages/gamut/src/Disclosure/index.tsx b/packages/gamut/src/Disclosure/index.tsx
index 8b7803acbcf..5ed8fdc9e7e 100644
--- a/packages/gamut/src/Disclosure/index.tsx
+++ b/packages/gamut/src/Disclosure/index.tsx
@@ -29,7 +29,7 @@ export const Disclosure: React.FC<DisclosureProps> = ({
   variant,
 }) => {
   const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
-  const bodyId = useId();
+
   return (
     <DisclosureWrapper
       as={isListItem ? 'li' : undefined}
@@ -39,7 +39,6 @@ export const Disclosure: React.FC<DisclosureProps> = ({
       variant={variant}
     >
       <DisclosureButton
-        ariaControlsId={bodyId}
         disabled={disabled}
         heading={heading}
         headingLevel={headingLevel}
@@ -60,7 +59,6 @@ export const Disclosure: React.FC<DisclosureProps> = ({
               ctaText={ctaText}
               hasPanelBg={hasPanelBg}
               href={href}
-              id={bodyId}
               spacing={spacing}
             />
           </ExpandInCollapseOut>
diff --git a/packages/gamut/src/Disclosure/types.ts b/packages/gamut/src/Disclosure/types.ts
index cd1497c4ff7..62654c140e7 100644
--- a/packages/gamut/src/Disclosure/types.ts
+++ b/packages/gamut/src/Disclosure/types.ts
@@ -4,10 +4,6 @@ import {
 } from './elements';
 
 export interface DisclosureButtonProps {
-  /**
-   * This is the value of the `id` that is used to link the DisclosureButton to the DisclosureBody.
-   */
-  ariaControlsId: string;
   /**
    * Renders the Disclosure unclickable.
    */
@@ -56,11 +52,6 @@ export interface DisclosureBodyProps extends DisclosureBodyWrapperStyles {
    */
   ctaText?: string;
   href?: string;
-  /**
-   * This `id` is used to link the DisclosureButton to the DisclosureBody.
-   * It is needed for the `aria-controls` attribute to work properly for accessibility.
-   */
-  id: string;
   /**
    * Determines the size of the heading text and the space between text in the body.
    */
@@ -68,8 +59,8 @@ export interface DisclosureBodyProps extends DisclosureBodyWrapperStyles {
 }
 
 export interface DisclosureProps
-  extends Omit<DisclosureButtonProps, 'ariaControlsId'>,
-    Omit<DisclosureBodyProps, 'id'>,
+  extends DisclosureButtonProps,
+    DisclosureBodyProps,
     DisclosureWrapperStyles {
   /**
    * Determines whether or not the Disclosure is expanded upon load.

From 269659e813204be7a49483d66761923c660f43b9 Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Mon, 7 Apr 2025 16:31:50 -0400
Subject: [PATCH 27/28] leftover code cleanup

---
 packages/gamut/src/Disclosure/DisclosureBody/index.tsx | 2 --
 packages/gamut/src/Disclosure/index.tsx                | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/gamut/src/Disclosure/DisclosureBody/index.tsx b/packages/gamut/src/Disclosure/DisclosureBody/index.tsx
index c129736e4b2..587bb9e651a 100644
--- a/packages/gamut/src/Disclosure/DisclosureBody/index.tsx
+++ b/packages/gamut/src/Disclosure/DisclosureBody/index.tsx
@@ -13,7 +13,6 @@ export const DisclosureBody: React.FC<DisclosureBodyProps> = ({
   ctaText,
   hasPanelBg = false,
   href,
-  id,
   spacing = 'normal',
 }) => {
   const buttonRequirements = ctaText && ctaCallback;
@@ -27,7 +26,6 @@ export const DisclosureBody: React.FC<DisclosureBodyProps> = ({
       mb={verticalSpacing}
       mt={4}
       mx={horizontalSpacing}
-      id={id}
     >
       <Text width="100%" lineHeight={getLineHeight}>
         {body}
diff --git a/packages/gamut/src/Disclosure/index.tsx b/packages/gamut/src/Disclosure/index.tsx
index 5ed8fdc9e7e..aa2b9a78a38 100644
--- a/packages/gamut/src/Disclosure/index.tsx
+++ b/packages/gamut/src/Disclosure/index.tsx
@@ -1,5 +1,5 @@
 import { AnimatePresence } from 'framer-motion';
-import { useId, useState } from 'react';
+import { useState } from 'react';
 import * as React from 'react';
 
 import { ExpandInCollapseOut } from '../Animation';

From b719c11884268f7711ee035e9192ed4683a8189b Mon Sep 17 00:00:00 2001
From: Kenny Lin <kenny.lin.91@gmail.com>
Date: Tue, 22 Apr 2025 09:52:31 -0400
Subject: [PATCH 28/28] left placeholders to revisit aria-controls

---
 packages/gamut/src/DataList/Controls/ExpandControl.tsx          | 1 +
 packages/gamut/src/Drawer/index.tsx                             | 1 +
 packages/gamut/src/Flyout/index.tsx                             | 1 +
 packages/gamut/src/List/ListRow.tsx                             | 2 ++
 packages/gamut/src/Tip/InfoTip/index.tsx                        | 1 +
 packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx             | 2 ++
 packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx     | 2 ++
 packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx         | 2 ++
 packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx | 1 +
 9 files changed, 13 insertions(+)

diff --git a/packages/gamut/src/DataList/Controls/ExpandControl.tsx b/packages/gamut/src/DataList/Controls/ExpandControl.tsx
index f2620bf5b98..f908870dbec 100644
--- a/packages/gamut/src/DataList/Controls/ExpandControl.tsx
+++ b/packages/gamut/src/DataList/Controls/ExpandControl.tsx
@@ -32,6 +32,7 @@ export const ExpandControl: React.FC<ExpandColProps> = ({
       }}
       aria-label={`Expand ${id} Row`}
       aria-expanded={expanded}
+      // REVISIT THIS 
       aria-controls={id ?? undefined}
     >
       <Rotation rotated={expanded}>
diff --git a/packages/gamut/src/Drawer/index.tsx b/packages/gamut/src/Drawer/index.tsx
index 0a1de54ba74..5839b4d5993 100644
--- a/packages/gamut/src/Drawer/index.tsx
+++ b/packages/gamut/src/Drawer/index.tsx
@@ -20,6 +20,7 @@ export interface DrawerProps extends Omit<BoxProps, 'width'> {
    * Which edge of the drawer content container is aligned to during the animation.
    */
   alignContentContainer?: 'left' | 'right';
+  // REVISIT THIS 
   /**
    * This `id` is used to link the element that expands the Drawer to the Drawer itself.
    * It is needed for the `aria-controls` attribute to work properly for accessibility.
diff --git a/packages/gamut/src/Flyout/index.tsx b/packages/gamut/src/Flyout/index.tsx
index dca1fa19020..10e6b63e730 100644
--- a/packages/gamut/src/Flyout/index.tsx
+++ b/packages/gamut/src/Flyout/index.tsx
@@ -35,6 +35,7 @@ export interface FlyoutProps extends WithChildrenProp {
    */
   title: React.ReactNode;
   bg?: Colors;
+  // REVISIT THIS 
   /**
    * This `id` is used to link the element that expands the Drawer to the Drawer itself.
    * It is needed for the `aria-controls` attribute to work properly for accessibility.
diff --git a/packages/gamut/src/List/ListRow.tsx b/packages/gamut/src/List/ListRow.tsx
index 976da0df534..88d676d8e83 100644
--- a/packages/gamut/src/List/ListRow.tsx
+++ b/packages/gamut/src/List/ListRow.tsx
@@ -14,6 +14,7 @@ import { getGridTemplateColumns } from './utils';
 export interface RowProps
   extends Partial<PublicListProps<ComponentProps<typeof RowEl>>> {
   header?: boolean;
+  // REVISIT THIS
   /** Used to link expandable content with the component that does the expanding, i.e. it's used to set the value for aria-controls  */
   id?: string;
   /** This is an internal prop that is largely only used for the DataTable component */
@@ -105,6 +106,7 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
         <RowEl
           as="div"
           {...rowConfig}
+          // REVISIT THIS 
           aria-controls={onClick ? id : undefined}
           aria-expanded={renderExpanded && onClick ? expanded : undefined}
           clickable={Boolean(onClick)}
diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index fc51cd68b1d..e0c52bb0f33 100644
--- a/packages/gamut/src/Tip/InfoTip/index.tsx
+++ b/packages/gamut/src/Tip/InfoTip/index.tsx
@@ -110,6 +110,7 @@ export const InfoTip: React.FC<InfoTipProps> = ({
     </ScreenreaderNavigableText>
   );
 
+  // REVISIT THIS 
   const tip = (
     <InfoTipButton
       aria-controls={textId}
diff --git a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
index b6b9ab5c1a2..2d7356761f2 100644
--- a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
+++ b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
@@ -34,6 +34,7 @@ An example of a molecule that uses Drawer is the <LinkTo id="Molecules/Flyout">F
 
 Our Drawers are [controlled components](https://reactjs.org/docs/forms.html#controlled-components), so their checked value must be controlled by an external state passed in as `expanded`.
 
+{/* REVISIT THIS  */}
 The component that toggles the `Drawer` should include both `aria-expanded` and `aria-controls` attributes. The `aria-controls` attribute must reference the `id` of the `Drawer`. The `aria-expanded` attribute should reflect the value of the `expanded` prop passed to the `Drawer`.
 
 ```tsx
@@ -47,6 +48,7 @@ const ExampleDrawer: React.FC = () => {
         Example Drawer
       </Drawer>
       <StrokeButton
+      // REVISIT THIS 
         aria-controls={expanded ? drawerId : undefined}
         aria-expanded={expanded}
         onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
diff --git a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx
index 310eaee1c5d..8a85823e561 100644
--- a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx
+++ b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.stories.tsx
@@ -14,10 +14,12 @@ export const Default: React.FC = () => {
   const drawerId = useId();
   return (
     <FlexBox bg="paleYellow" height="20rem">
+      {/* // REVISIT THIS  */}
       <Drawer expanded={expanded} id={drawerId}>
         Drawer content in here!
       </Drawer>
       <StrokeButton
+      // REVISIT THIS
         aria-controls={expanded ? drawerId : undefined}
         aria-expanded={expanded}
         onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
diff --git a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
index 70eef64fd66..a2eee7ed994 100644
--- a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
+++ b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
@@ -30,6 +30,7 @@ Internally, Flyout is a combination of <LinkTo id="Molecules/Modals/Overlay">Ove
 
 Our Flyouts are [controlled components](https://reactjs.org/docs/forms.html#controlled-components), so their checked value must be controlled by an external state passed in as `expanded` and `onChange`.
 
+{/* // REVISIT THIS  */}
 The component that toggles the `Flyout` should include both `aria-expanded` and `aria-controls` attributes. The `aria-controls` attribute must reference the `id` of the `Flyout`. The `aria-expanded` attribute should reflect the value of the `expanded` prop passed to the `Flyout`.
 
 ```tsx
@@ -44,6 +45,7 @@ const ExampleFlyout: React.FC = () => {
       </Flyout>
       <StrokeButton
         aria-expanded={expanded}
+        // REVISIT THIS 
         aria-controls={expanded ? drawerId : undefined}
         onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
       >
diff --git a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx
index e40fcfd7557..53a5de796a3 100644
--- a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx
+++ b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.stories.tsx
@@ -38,6 +38,7 @@ export const FlyoutExample: Story = {
           </Box>
         </Flyout>
         <StrokeButton
+          // REVISIT THIS
           aria-controls={expanded ? args.id : undefined}
           aria-expanded={expanded}
           onClick={() => setExpanded(true)}