feat: add test, aria labels, update storybook

src/components/Accordion/Accordion.minors.tsx

@@ -56,6 +56,9 @@ export function Item({
         tabIndex={0}
         format={format}
         active={isActive}
+        aria-expanded={isActive}
+        aria-controls={`accordion-${index}-content`}
+        id={`accordion-${index}-trigger`}
       >
         <Header>
           {hasError && <CircleWarningIcon />}
@@ -71,7 +74,16 @@ export function Item({
           <StyledChevronDown width="24" />
         )}
       </TriggerContainer>
-      {isActive && <Content active={isActive}>{children}</Content>}
+      {isActive && (
+        <Content
+          active={isActive}
+          aria-labelledby={`accordion-${index}-trigger`}
+          id={`accordion-${index}-content`}
+          role="region"
+        >
+          {children}
+        </Content>
+      )}
     </Wrapper>
   );
 }

src/components/Accordion/Accordion.story.tsx

@@ -6,6 +6,8 @@ import { Props } from './Accordion.types';
 import styled from 'styled-components';
 import { Gear } from '../../icons';
 import { rem } from 'polished';
+import { core } from '../../tokens';
+import { Layout } from '../../storybook';
 
 export default {
   title: 'components/Accordion',
@@ -14,21 +16,43 @@ export default {
 
 const Template: Story<Props> = (args) => {
   return (
-    <Container>
+    <Layout.StoryVertical center>
       <Accordion {...args}>
-        <Accordion.Item title="Accordion item 1">
+        <Accordion.Item
+          title="Accordion item title"
+          subcopy="Subcopy text"
+        >
           Accordion content
         </Accordion.Item>
-        <Accordion.Item title="Accordion item 2">
+        <Accordion.Item
+          title="Accordion item with icon"
+          icon={<GearIcon />}
+        >
+          Accordion content
+        </Accordion.Item>
+        <Accordion.Item
+          title="Disabled accordion item"
+          disabled={true}
+        >
+          Accordion content
+        </Accordion.Item>
+        <Accordion.Item
+          title="Accordion item with error"
+          hasError={true}
+        >
           Accordion content
         </Accordion.Item>
       </Accordion>
-    </Container>
+    </Layout.StoryVertical>
   );
 };
 
-const Container = styled.div`
-  width: 50%;
+const GearIcon = styled(Gear)`
+  width: ${rem(22)};
+  margin-right: ${rem(10)};
+  path {
+    fill: ${core.color.text.primary};
+  }
 `;
 
 export const Controls = Template.bind({});

src/components/Accordion/Accordion.style.ts

@@ -46,7 +46,7 @@ export const Wrapper = styled.div<{
     `}
 `;
 
-export const TriggerContainer = styled.div<{
+export const TriggerContainer = styled.button<{
   format: 'basic' | 'secondary';
   active: boolean;
 }>`
@@ -55,14 +55,15 @@ export const TriggerContainer = styled.div<{
   cursor: pointer;
   padding: ${rem(12)} ${rem(15)};
   border-radius: ${rem(10)};
+  width: 100%;
   &:hover {
     background-color: ${({ theme, format }) =>
       format === 'basic'
         ? theme.name === 'dark'
           ? grayscale(800)
           : grayscale(50)
         : 'none'};
-    border: ${({ active, theme, format }) =>
+    outline: ${({ active, theme, format }) =>
       !active && format === 'secondary'
         ? theme.name === 'dark'
           ? `${rem(1)} solid ${grayscale(800)}`
@@ -79,6 +80,7 @@ export const Header = styled.div`
 export const TitleContainer = styled.div`
   display: flex;
   flex-direction: column;
+  text-align: left;
 `;
 
 export const Title = styled(Paragraph)`

src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ThemeProvider } from 'styled-components';
+import { themes } from '../../themes';
+import { Accordion } from './Accordion';
+
+describe('Accordion', () => {
+  it('renders accordion', () => {
+    render(
+      <ThemeProvider theme={themes['light']}>
+        <Accordion>
+          <Accordion.Item />
+        </Accordion>
+      </ThemeProvider>
+    );
+
+    const accordion = screen.getByRole('button');
+    expect(accordion).toBeInTheDocument();
+  });
+
+  it('triggers and expands accordion item when clicking the header', () => {
+    render(
+      <ThemeProvider theme={themes['light']}>
+        <Accordion>
+          <Accordion.Item />
+        </Accordion>
+      </ThemeProvider>
+    );
+
+    const accordion = screen.getByRole('button');
+    userEvent.click(accordion).then(() => {
+      const content = screen.getByRole('heading');
+      expect(content).toBeInTheDocument();
+    });
+  });
+
+  it('can receive text as title and subcopy props and render them', () => {
+    render(
+      <ThemeProvider theme={themes['light']}>
+        <Accordion>
+          <Accordion.Item
+            title="Accordion item title"
+            subcopy="Accordion item subcopy"
+          />
+        </Accordion>
+      </ThemeProvider>
+    );
+
+    const title = screen.getByText('Accordion item title');
+    const subcopy = screen.getByText('Accordion item subcopy');
+    expect(title).toBeInTheDocument();
+    expect(subcopy).toBeInTheDocument();
+  });
+
+  it('can receive children component and render them', () => {
+    render(
+      <ThemeProvider theme={themes['light']}>
+        <Accordion>
+          <Accordion.Item>
+            <div>Child component</div>
+          </Accordion.Item>
+        </Accordion>
+      </ThemeProvider>
+    );
+
+    const accordion = screen.getByRole('button');
+    userEvent.click(accordion).then(() => {
+      const childComponentContent =
+        screen.getByText('Child component');
+      expect(childComponentContent).toBeInTheDocument();
+    });
+  });
+
+  it('does not render children when disabled prop is true', () => {
+    render(
+      <ThemeProvider theme={themes['light']}>
+        <Accordion>
+          <Accordion.Item disabled={true}>
+            <div>Child component</div>
+          </Accordion.Item>
+        </Accordion>
+      </ThemeProvider>
+    );
+
+    const accordion = screen.getByRole('button');
+    userEvent.click(accordion).then(() => {
+      const childComponentContent =
+        screen.getByText('Child component');
+      expect(childComponentContent).not.toBeInTheDocument();
+    });
+  });
+});