Skip to content

Commit

Permalink
feat: add support for aria-expanded to Seeds button (#78)
Browse files Browse the repository at this point in the history
  • Loading branch information
jaredcwhite authored Apr 23, 2024
1 parent 6c4b9d9 commit 0bbeb8a
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 9 deletions.
10 changes: 9 additions & 1 deletion src/actions/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down Expand Up @@ -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,
},
Expand Down Expand Up @@ -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>
)
}
Expand Down
39 changes: 31 additions & 8 deletions src/actions/__stories__/Button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
</>
)
}

0 comments on commit 0bbeb8a

Please sign in to comment.