Skip to content

Commit

Permalink
feat(Collapse): set a11y attributes and props
Browse files Browse the repository at this point in the history
  • Loading branch information
sarkaaa committed Dec 19, 2024
1 parent 1bf0bb9 commit ba53b9e
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 17 deletions.
17 changes: 16 additions & 1 deletion packages/orbit-components/src/Collapse/Collapse.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,16 @@ export const Default: Story = {
};

return (
<Collapse {...args} onClick={onClick}>
<Collapse
{...args}
label={
<Stack flex align="center" spacing="200">
<div>sarka</div>
<Badge type="info">status</Badge>
</Stack>
}
onClick={onClick}
>
<SliderHistogramData />
</Collapse>
);
Expand Down Expand Up @@ -213,6 +222,12 @@ export const Uncontrolled: Story = {
args: {
expanded: undefined,
},

parameters: {
controls: {
exclude: "expanded",
},
},
};

export const Rtl: Story = {
Expand Down
21 changes: 13 additions & 8 deletions packages/orbit-components/src/Collapse/__tests__/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,7 @@ import userEvent from "@testing-library/user-event";
import { render, screen } from "../../test-utils";
import Collapse from "..";

const toggleButtons = [
[0, "label"],
[1, "icon button"],
];
const toggleTriggers = ["group", "button"];

describe("Collapse", () => {
const user = userEvent.setup();
Expand All @@ -31,26 +28,34 @@ describe("Collapse", () => {
expect(screen.getByText("customLabel")).toBeInTheDocument();
});

it.each(toggleButtons)("should trigger click handler when clicking on %s", async buttonIndex => {
it.each(toggleTriggers)("should trigger click handler when clicking on %s", async trigger => {
const onClick = jest.fn();
render(
<Collapse label="Collapse" onClick={onClick}>
<div>children</div>
</Collapse>,
);
const toggleButton = screen.getAllByRole("button", { name: "Collapse" })[buttonIndex];

const toggleButton = screen.getByRole(trigger, {
name: "Collapse",
});

await user.click(toggleButton);
expect(onClick).toHaveBeenCalled();
});

describe("uncontrolled", () => {
it.each(toggleButtons)("should expand/collapse when clicking on %s", async buttonIndex => {
it.each(toggleTriggers)("should expand/collapse when clicking on %s", async trigger => {
render(
<Collapse label="Collapse">
<article>children</article>
</Collapse>,
);
const toggleButton = screen.getAllByRole("button", { name: "Collapse" })[buttonIndex];

const toggleButton = screen.getByRole(trigger, {
name: "Collapse",
});

// with ByRole we can test whether the content is visible because of aria-hidden
expect(screen.queryByRole("article")).not.toBeInTheDocument();
await user.click(toggleButton);
Expand Down
12 changes: 4 additions & 8 deletions packages/orbit-components/src/Collapse/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,8 @@ const Collapse = ({
data-test={dataTest}
id={id}
>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
<div
className="block w-full cursor-pointer"
onClick={handleClick}
role="button"
tabIndex={-1}
id={labelID}
>
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
<div className="block w-full cursor-pointer" id={labelID} onClick={handleClick} role="group">
<Stack justify="between" align="center">
{label && !customLabel && <Heading type="title4">{label}</Heading>}
{customLabel}
Expand All @@ -90,8 +84,10 @@ const Collapse = ({
size="small"
type="secondary"
ariaLabelledby={labelID}
tabIndex={0}
ariaExpanded={expanded}
ariaControls={slideID}
role="button"
/>
</Stack>
</Stack>
Expand Down

0 comments on commit ba53b9e

Please sign in to comment.