From 0bbeb8a1bf63de057225119d9ff87f983f20a5a9 Mon Sep 17 00:00:00 2001
From: Jared White <jared@whitefusion.studio>
Date: Tue, 23 Apr 2024 15:03:06 -0700
Subject: [PATCH] feat: add support for `aria-expanded` to Seeds button (#78)

---
 src/actions/Button.tsx                     | 10 +++++-
 src/actions/__stories__/Button.stories.tsx | 39 +++++++++++++++++-----
 2 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/src/actions/Button.tsx b/src/actions/Button.tsx
index cd4f3d9..220372b 100644
--- a/src/actions/Button.tsx
+++ b/src/actions/Button.tsx
@@ -49,6 +49,10 @@ export interface ButtonProps {
   ariaHidden?: boolean
   /** Accessible label if button doesn't contain text content */
   ariaLabel?: string
+  /** The ID of an element you're expanding/collapsing as indicated by `ariaExpanded` */
+  ariaControls?: string
+  /** The expanded or collapsed state of the element whose ID is specified via `ariaControls` */
+  ariaExpanded?: boolean
   /** Show loading spinner and set ARIA live message while disabling clicks */
   loadingMessage?: string | null
   /** Element ID */
@@ -85,6 +89,8 @@ const setupButtonProps = (props: ButtonProps) => {
       target: props.newWindowTarget ? "_blank" : undefined,
       "aria-label": props.ariaLabel,
       "aria-hidden": props.ariaHidden,
+      "aria-controls": props.ariaControls,
+      "aria-expanded": props.ariaExpanded,
       "aria-disabled": props.loadingMessage ? "true" : undefined,
       tabIndex: props.ariaHidden ? -1 : null,
     },
@@ -140,7 +146,9 @@ const Button = (props: ButtonProps) => {
         {...updatedProps}
       >
         {buttonInner}
-        <span className="seeds-screen-reader-only" aria-live="assertive">{props.loadingMessage}</span>
+        <span className="seeds-screen-reader-only" aria-live="assertive">
+          {props.loadingMessage}
+        </span>
       </ButtonElement>
     )
   }
diff --git a/src/actions/__stories__/Button.stories.tsx b/src/actions/__stories__/Button.stories.tsx
index 2509c57..991fac6 100644
--- a/src/actions/__stories__/Button.stories.tsx
+++ b/src/actions/__stories__/Button.stories.tsx
@@ -171,9 +171,7 @@ export const buttonsWithIcons = () => (
 export const textButtons = () => (
   <>
     <div style={{ display: "flex", gap: "1rem", marginBlockEnd: "1rem" }}>
-      <Button variant="text">
-        Medium Size
-      </Button>
+      <Button variant="text">Medium Size</Button>
       <Button variant="text" size="sm">
         Small Size
       </Button>
@@ -186,14 +184,39 @@ export const textButtons = () => (
         Tail Icon
       </Button>
     </div>
-
   </>
 )
 
 export const loadingButton = () => {
   const [loading, setLoading] = React.useState<null | string>(null)
-  return <Button loadingMessage={loading} onClick={() => {
-    setLoading("Saving form")
-    setTimeout(() => setLoading(null), 3000)
-  }}>Click to Spin</Button>
+  return (
+    <Button
+      loadingMessage={loading}
+      onClick={() => {
+        setLoading("Saving form")
+        setTimeout(() => setLoading(null), 3000)
+      }}
+    >
+      Click to Spin
+    </Button>
+  )
+}
+
+export const expandingButton = () => {
+  const [expanded, setExpanded] = React.useState<boolean>(false)
+
+  return (
+    <>
+      <Button
+        onClick={() => setExpanded(!expanded)}
+        ariaControls="show-or-hide"
+        ariaExpanded={expanded}
+      >
+        {expanded ? "Hide Content" : "Show Content"}
+      </Button>
+      <p id="show-or-hide" hidden={!expanded}>
+        Content that should only appear in the "expanded" state.
+      </p>
+    </>
+  )
 }