diff --git a/packages/gamut/src/DataList/Controls/ExpandControl.tsx b/packages/gamut/src/DataList/Controls/ExpandControl.tsx
index 657fc45c57..f908870dbe 100644
--- a/packages/gamut/src/DataList/Controls/ExpandControl.tsx
+++ b/packages/gamut/src/DataList/Controls/ExpandControl.tsx
@@ -32,6 +32,8 @@ export const ExpandControl: React.FC<ExpandColProps> = ({
       }}
       aria-label={`Expand ${id} Row`}
       aria-expanded={expanded}
+      // REVISIT THIS 
+      aria-controls={id ?? undefined}
     >
       <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 38784942c4..0db757f2b8 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/Disclosure/index.tsx b/packages/gamut/src/Disclosure/index.tsx
index eae846c22b..aa2b9a78a3 100644
--- a/packages/gamut/src/Disclosure/index.tsx
+++ b/packages/gamut/src/Disclosure/index.tsx
@@ -29,36 +29,37 @@ export const Disclosure: React.FC<DisclosureProps> = ({
   variant,
 }) => {
   const [isExpanded, setIsExpanded] = useState(initiallyExpanded);
+
   return (
     <DisclosureWrapper
+      as={isListItem ? 'li' : undefined}
       column
-      variant={variant}
       hasBorder={hasBorder}
       onClick={() => onClick?.()}
-      as={isListItem ? 'li' : undefined}
+      variant={variant}
     >
       <DisclosureButton
-        spacing={spacing}
+        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}
+              spacing={spacing}
             />
           </ExpandInCollapseOut>
         )}
diff --git a/packages/gamut/src/Drawer/index.tsx b/packages/gamut/src/Drawer/index.tsx
index 36796f6078..5839b4d599 100644
--- a/packages/gamut/src/Drawer/index.tsx
+++ b/packages/gamut/src/Drawer/index.tsx
@@ -20,12 +20,19 @@ 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.
+   */
+  id: string;
 }
 
 export const Drawer: React.FC<DrawerProps> = ({
+  alignContentContainer = 'right',
   children,
   expanded,
-  alignContentContainer = 'right',
+  id,
   ...props
 }) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -41,9 +48,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 7974c2a537..10e6b63e73 100644
--- a/packages/gamut/src/Flyout/index.tsx
+++ b/packages/gamut/src/Flyout/index.tsx
@@ -35,16 +35,23 @@ 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.
+   */
+  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 +63,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/gamut/src/List/ListRow.tsx b/packages/gamut/src/List/ListRow.tsx
index 45a86463b8..88d676d8e8 100644
--- a/packages/gamut/src/List/ListRow.tsx
+++ b/packages/gamut/src/List/ListRow.tsx
@@ -14,6 +14,9 @@ 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 */
   numOfColumns?: number;
   /**  This is an internal prop that is largely only used for the DataTable component */
@@ -45,12 +48,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 | undefined }
+> = ({ as, children, id }) => {
   const ResponsiveExpand = as === 'td' ? TDExpand : DivExpand;
 
   return (
     <ResponsiveExpand
+      id={id}
       initial="collapsed"
       exit="collapsed"
       animate="expanded"
@@ -68,6 +72,7 @@ const ExpandInCollapseOut: React.FC<
 export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
   (
     {
+      id,
       children,
       expanded,
       expandedRowAriaLabel,
@@ -101,6 +106,8 @@ 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)}
           isOl={isOl}
@@ -141,7 +148,10 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
           {content}
           <AnimatePresence>
             {expanded && (
-              <ExpandInCollapseOut as={isTable ? 'td' : 'div'}>
+              <ExpandInCollapseOut
+                as={isTable ? 'td' : 'div'}
+                id={id ?? undefined}
+              >
                 <Box role="region" aria-label={expandedRowAriaLabel}>
                   {renderExpanded?.()}
                 </Box>
diff --git a/packages/gamut/src/Tip/InfoTip/index.tsx b/packages/gamut/src/Tip/InfoTip/index.tsx
index 61eb5095a9..e0c52bb0f3 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,14 +103,18 @@ export const InfoTip: React.FC<InfoTipProps> = ({
     <ScreenreaderNavigableText
       aria-hidden={isAriaHidden}
       aria-live="assertive"
+      id={textId}
       screenreader
     >
       {!isTipHidden ? info : `\xa0`}
     </ScreenreaderNavigableText>
   );
 
+  // REVISIT THIS 
   const tip = (
     <InfoTipButton
+      aria-controls={textId}
+      aria-expanded={!isTipHidden}
       active={!isTipHidden}
       emphasis={emphasis}
       onClick={() => clickHandler()}
diff --git a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
index cb78a1e64b..2d7356761f 100644
--- a/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
+++ b/packages/styleguide/src/lib/Atoms/Drawer/Drawer.mdx
@@ -34,6 +34,32 @@ 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
+const ExampleDrawer: React.FC = () => {
+  const [expanded, setExpanded] = useState(false);
+  const drawerId = useId();
+
+  return (
+    <FlexBox>
+      <Drawer expanded={expanded} id={drawerId}>
+        Example Drawer
+      </Drawer>
+      <StrokeButton
+      // REVISIT THIS 
+        aria-controls={expanded ? drawerId : undefined}
+        aria-expanded={expanded}
+        onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
+      >
+        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 acfb94e4bc..8a85823e56 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,17 @@ 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>
+      {/* // 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)}
       >
         Toggle Drawer
diff --git a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
index 81c1bb925b..a2eee7ed99 100644
--- a/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
+++ b/packages/styleguide/src/lib/Molecules/Flyout/Flyout.mdx
@@ -28,7 +28,33 @@ 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`.
+
+{/* // 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
+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}
+        // REVISIT THIS 
+        aria-controls={expanded ? drawerId : undefined}
+        onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
+      >
+        Set the proper aria-labels!
+      </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 0d7d229340..53a5de796a 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,12 @@ export const FlyoutExample: Story = {
             hurricane...
           </Box>
         </Flyout>
-        <StrokeButton onClick={() => setExpanded(true)}>
+        <StrokeButton
+          // REVISIT THIS
+          aria-controls={expanded ? args.id : undefined}
+          aria-expanded={expanded}
+          onClick={() => setExpanded(true)}
+        >
           Tell me more?!
         </StrokeButton>
         <FlexBox>
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 1740c8606d..f84977ffeb 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)}
@@ -291,15 +299,15 @@ 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.
+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 8133db2e64..324141b65e 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,
@@ -14,7 +15,6 @@ import {
 import {
   ArrowChevronDownIcon,
   HouseEntranceIcon,
-  MiniChevronDownIcon,
   MiniDeleteIcon,
   MiniKebabMenuIcon,
   StarIcon,
@@ -648,6 +648,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 +656,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,6 +701,7 @@ export const ExpandableRowClick: React.FC<ExpandableRowProps> = ({
       expanded={isExpanded}
       key={key}
       onClick={() => setExpanded(!isExpanded)}
+      id={`${name}-${role}-${ship}`}
       renderExpanded={() => <ExpandedRow name={name} role={role} ship={ship} />}
     >
       <ExpandedColumns name={name} role={role} ship={ship} />