Codecademy · codecademydev · Apr 24, 2025 · Mar 21, 2025 · Mar 21, 2025 · Mar 24, 2025
@@ -34,7 +34,7 @@ export const ExpandControl: React.FC<ExpandColProps> = ({
       aria-expanded={expanded}
     >
       <Rotation rotated={expanded}>
-        <MiniChevronDownIcon color="text-disabled" />
+        <MiniChevronDownIcon color="secondary" />
       </Rotation>
     </TextButton>
   </FlexBox>

@@ -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>
         )}

@@ -15,17 +15,16 @@ export interface DrawerProps extends Omit<BoxProps, 'width'> {
    * Whether the drawer should be open.
    */
   expanded?: boolean;
-
   /**
    * Which edge of the drawer content container is aligned to during the animation.
    */
   alignContentContainer?: 'left' | 'right';
 }
 
 export const Drawer: React.FC<DrawerProps> = ({
+  alignContentContainer = 'right',
   children,
   expanded,
-  alignContentContainer = 'right',
   ...props
 }) => {
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -41,7 +40,6 @@ export const Drawer: React.FC<DrawerProps> = ({
       {expanded ? (
         <DrawerBase
           animate={{ width: fullWidth }}
-          aria-expanded={expanded}
           bg="background-current"
           exit={{ width: 0 }}
           initial={{ width: 0 }}

@@ -38,13 +38,13 @@ export interface FlyoutProps extends WithChildrenProp {
 }
 
 export const Flyout: React.FC<FlyoutProps> = ({
+  bg = 'background',
   children,
   closeLabel = 'Close',
   expanded,
   openFrom = 'left',
   onClose,
   title,
-  bg = 'background',
 }) => {
   return (
     <Overlay
@@ -56,13 +56,13 @@ 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'}
           position="fixed"
           top={0}
-          alignContentContainer={openFrom === 'left' ? 'right' : 'left'}
           {...{ [openFrom]: 0 }}
         >
           <FlexBox

@@ -109,6 +109,7 @@ export const InfoTip: React.FC<InfoTipProps> = ({
 
   const tip = (
     <InfoTipButton
+      aria-expanded={!isTipHidden}
       active={!isTipHidden}
       emphasis={emphasis}
       onClick={() => clickHandler()}

@@ -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 toggles the `Drawer` should include the `aria-expanded` attribute. The `aria-expanded` attribute should reflect the value of the `expanded` prop passed to the `Drawer`. In the example below, the `StrokeButton` controls the expansion of the `Drawer`, so the button has the `aria-expanded` attribute.
+
+```tsx
+const ExampleDrawer: React.FC = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <FlexBox>
+      <Drawer expanded={expanded} id={drawerId}>
+        Example Drawer
+      </Drawer>
+      <StrokeButton
+        aria-expanded={expanded}
+        onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
+      >
+        Set the proper aria-labels!
+      </StrokeButton>
+    </FlexBox>
+  );
+};
+```
+
 ## Playground
 
 <Canvas sourceState="shown" of={DrawerStories.Default} />

@@ -15,6 +15,7 @@ export const Default: React.FC = () => {
     <FlexBox bg="paleYellow" height="20rem">
       <Drawer expanded={expanded}>Drawer content in here!</Drawer>
       <StrokeButton
+        aria-expanded={expanded}
         onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
       >
         Toggle Drawer

@@ -28,7 +28,29 @@ 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 the `aria-expanded` attribute. The `aria-expanded` attribute should reflect the value of the `expanded` prop passed to the `Flyout`. In the example below, the `StrokeButton` controls the expansion of the `Flyout`, so the button has the `aria-expanded` attribute.
+
+```tsx
+const ExampleFlyout: React.FC = () => {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <FlexBox>
+      <Flyout expanded={expanded} id={flyoutId}>
+        Example Flyout
+      </Flyout>
+      <StrokeButton
+        aria-expanded={expanded}
+        onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
+      >
+        Set the proper aria-labels!
+      </StrokeButton>
+    </FlexBox>
+  );
+};
+```
 
 ## Playground
 

@@ -35,7 +35,10 @@ export const FlyoutExample: Story = {
             hurricane...
           </Box>
         </Flyout>
-        <StrokeButton onClick={() => setExpanded(true)}>
+        <StrokeButton
+          aria-expanded={expanded}
+          onClick={() => setExpanded(true)}
+        >
           Tell me more?!
         </StrokeButton>
         <FlexBox>

@@ -216,6 +216,8 @@ 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.
+
 ```tsx
 export const ExpandableRow: React.FC<{
   header: string;
@@ -233,11 +235,11 @@ 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)}
+          disabled={false}
+        />
       </ListCol>
     </ListRow>
   );
@@ -291,15 +293,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} />
 

@@ -1,5 +1,6 @@
 import {
   Box,
+  ExpandControl,
   FillButton,
   FlexBox,
   IconButton,
@@ -14,7 +15,6 @@ import {
 import {
   ArrowChevronDownIcon,
   HouseEntranceIcon,
-  MiniChevronDownIcon,
   MiniDeleteIcon,
   MiniKebabMenuIcon,
   StarIcon,
@@ -655,11 +655,11 @@ 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)}
+          disabled={false}
+        />
       </ListCol>
     </ListRow>
   );
@@ -705,7 +705,7 @@ export const ExpandableRowClick: React.FC<ExpandableRowProps> = ({
       <ListCol size="xl" type="control">
         <FlexBox mt={{ _: 8, xs: 0 }} pl={{ _: 0, xs: 16 }} width={1} center>
           <Rotation rotated={isExpanded}>
-            <ArrowChevronDownIcon color="text-disabled" />
+            <ArrowChevronDownIcon color="secondary" />
           </Rotation>
         </FlexBox>
       </ListCol>