From a4fce09516c2f82676c2d714aa21db83debfc459 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Thu, 24 Aug 2023 11:26:52 -0300
Subject: [PATCH 1/8] chore: change IconButton large size to 38px

---
 packages/fuselage/src/components/Button/Button.styles.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fuselage/src/components/Button/Button.styles.scss b/packages/fuselage/src/components/Button/Button.styles.scss
index 63808f74b8..70a3f3d7de 100644
--- a/packages/fuselage/src/components/Button/Button.styles.scss
+++ b/packages/fuselage/src/components/Button/Button.styles.scss
@@ -169,7 +169,7 @@
   }
 
   &--large-square {
-    @include with-squared-size($size: 40);
+    @include with-squared-size($size: 38);
   }
 
   &--primary {

From e498c143ddaeff5d21f367b30435cff77fb0be20 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Thu, 24 Aug 2023 12:10:08 -0300
Subject: [PATCH 2/8] chore: a11y

---
 packages/fuselage/src/components/Button/IconButton.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/fuselage/src/components/Button/IconButton.tsx b/packages/fuselage/src/components/Button/IconButton.tsx
index 05293e97ca..547e5bf09d 100644
--- a/packages/fuselage/src/components/Button/IconButton.tsx
+++ b/packages/fuselage/src/components/Button/IconButton.tsx
@@ -121,6 +121,7 @@ export const IconButton = forwardRef(
         {...getSizeClass()}
         rcx-button--icon-pressed={pressed}
         ref={ref}
+        aria-label={props['aria-label'] || icon}
         {...props}
       >
         {children}

From 2a39f840a79fba661e002eb1fb5aab201cd55411 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Thu, 24 Aug 2023 14:27:58 -0300
Subject: [PATCH 3/8] chore: adjust button size

---
 packages/fuselage/src/components/Button/Button.styles.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/fuselage/src/components/Button/Button.styles.scss b/packages/fuselage/src/components/Button/Button.styles.scss
index 70a3f3d7de..8f1a2c02fd 100644
--- a/packages/fuselage/src/components/Button/Button.styles.scss
+++ b/packages/fuselage/src/components/Button/Button.styles.scss
@@ -9,6 +9,7 @@
 .rcx-button {
   @mixin with-rectangular-size($height, $padding-x, $line-height) {
     min-width: calc(lengths.size($height) * 2);
+    height: lengths.size($height);
     padding: calc((lengths.padding($height) - $line-height) / 2 - 2px)
       calc(lengths.padding($padding-x) - 2px);
     padding-block: calc((lengths.padding($height) - $line-height) / 2 - 2px);
@@ -169,7 +170,7 @@
   }
 
   &--large-square {
-    @include with-squared-size($size: 38);
+    @include with-squared-size($size: 40);
   }
 
   &--primary {

From ef917259f85e04d4325563f7a123a2760703e8ac Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Thu, 24 Aug 2023 14:45:53 -0300
Subject: [PATCH 4/8] chore: improve stories

---
 .../src/components/Button/Button.stories.tsx  | 50 ++++++-------------
 1 file changed, 14 insertions(+), 36 deletions(-)

diff --git a/packages/fuselage/src/components/Button/Button.stories.tsx b/packages/fuselage/src/components/Button/Button.stories.tsx
index 2a523ba594..8e79ad18a3 100644
--- a/packages/fuselage/src/components/Button/Button.stories.tsx
+++ b/packages/fuselage/src/components/Button/Button.stories.tsx
@@ -11,7 +11,7 @@ import {
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
-import { Button, ButtonGroup, Icon, IconButton, Margins } from '../..';
+import { Button, ButtonGroup, IconButton, Margins } from '../..';
 import { PropsVariationSection } from '../../../.storybook/helpers';
 
 export default {
@@ -40,12 +40,6 @@ export const Default: ComponentStory<typeof Button> = () => (
   <Button onClick={action('click')}>Button</Button>
 );
 
-export const Square: ComponentStory<typeof Button> = () => (
-  <Button square>
-    <Icon name='plus' size='x20' />
-  </Button>
-);
-
 export const Variants: ComponentStory<typeof Button> = () => (
   <Margins all='x8'>
     <ButtonGroup>
@@ -74,27 +68,11 @@ export const Variants: ComponentStory<typeof Button> = () => (
 );
 
 export const Sizes: ComponentStory<typeof ButtonGroup> = () => (
-  <>
-    <ButtonGroup marginBlockEnd={12}>
-      <Button small>Small</Button>
-      <Button medium>Medium</Button>
-      <Button>Default</Button>
-    </ButtonGroup>
-    <ButtonGroup>
-      <Button mini square>
-        <Icon name='circled-arrow-down' size='x16' />
-      </Button>
-      <Button tiny square>
-        <Icon name='circled-arrow-down' size='x20' />
-      </Button>
-      <Button small square>
-        <Icon name='circled-arrow-down' size='x24' />
-      </Button>
-      <Button square>
-        <Icon name='circled-arrow-down' size='x32' />
-      </Button>
-    </ButtonGroup>
-  </>
+  <ButtonGroup marginBlockEnd={12}>
+    <Button small>Small</Button>
+    <Button medium>Medium</Button>
+    <Button>Default</Button>
+  </ButtonGroup>
 );
 
 export const AsLink: ComponentStory<typeof Button> = () => (
@@ -116,10 +94,6 @@ export const States = () => (
         disabled: { disabled: true },
       }}
       yAxis={{
-        'square + icon': {
-          square: true,
-          children: <Icon name='circled-arrow-down' size='x20' />,
-        },
         'icon + text': {
           children: 'Button',
           icon: 'baloon-text',
@@ -178,10 +152,6 @@ export const States = () => (
         disabled: { disabled: true },
       }}
       yAxis={{
-        'square + icon': {
-          square: true,
-          children: <Icon name='circled-arrow-down' size='x20' />,
-        },
         'icon + text': {
           children: 'Button',
           icon: 'baloon-text',
@@ -232,3 +202,11 @@ export const States = () => (
 export const AsIconButton: ComponentStory<typeof IconButton> = (args) => (
   <IconButton {...args} icon='arrow-back' onClick={action('click')} />
 );
+
+AsIconButton.parameters = {
+  docs: {
+    description: {
+      story: 'See full documentation on Inputs/IconButton.',
+    },
+  },
+};

From 7e165c3a718ec2b4ccf72e6b655cb15b163ce688 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Thu, 24 Aug 2023 16:23:36 -0300
Subject: [PATCH 5/8] chore: improve Button types

---
 packages/fuselage/src/components/Button/Button.stories.tsx | 3 ++-
 packages/fuselage/src/components/Button/Button.tsx         | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/fuselage/src/components/Button/Button.stories.tsx b/packages/fuselage/src/components/Button/Button.stories.tsx
index 8e79ad18a3..3c911f6b18 100644
--- a/packages/fuselage/src/components/Button/Button.stories.tsx
+++ b/packages/fuselage/src/components/Button/Button.stories.tsx
@@ -206,7 +206,8 @@ export const AsIconButton: ComponentStory<typeof IconButton> = (args) => (
 AsIconButton.parameters = {
   docs: {
     description: {
-      story: 'See full documentation on Inputs/IconButton.',
+      story:
+        'See full IconButton documentation [here](../?path=/docs/inputs-iconbutton)',
     },
   },
 };
diff --git a/packages/fuselage/src/components/Button/Button.tsx b/packages/fuselage/src/components/Button/Button.tsx
index e30b8a2b95..04afee8259 100644
--- a/packages/fuselage/src/components/Button/Button.tsx
+++ b/packages/fuselage/src/components/Button/Button.tsx
@@ -1,4 +1,4 @@
-import type { ComponentProps, Ref } from 'react';
+import type { AllHTMLAttributes, ComponentProps, Ref } from 'react';
 import React, { forwardRef, useMemo } from 'react';
 
 import Box from '../Box';
@@ -19,7 +19,7 @@ export type ButtonProps = ComponentProps<typeof Box> & {
   square?: boolean;
   external?: boolean;
   icon?: ComponentProps<typeof Icon>['name'];
-};
+} & Omit<AllHTMLAttributes<HTMLButtonElement>, 'is' | 'className' | 'size'>;
 
 export const Button = forwardRef(function Button(
   {
@@ -41,7 +41,7 @@ export const Button = forwardRef(function Button(
     children,
     ...props
   }: ButtonProps,
-  ref: Ref<HTMLElement>
+  ref: Ref<HTMLButtonElement>
 ) {
   const extraProps =
     (is === 'a' && {

From 5d6475bf8d155b4cc8c26cd0d97bad81f4d5c5b4 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Thu, 24 Aug 2023 16:23:57 -0300
Subject: [PATCH 6/8] chore: a11y button tests

---
 .../src/components/Button/Button.spec.tsx     | 39 +++++++++++++++++++
 .../ButtonGroup/ButtonGroup.spec.tsx          |  9 +++++
 2 files changed, 48 insertions(+)

diff --git a/packages/fuselage/src/components/Button/Button.spec.tsx b/packages/fuselage/src/components/Button/Button.spec.tsx
index 42b07978d0..9f561c95f3 100644
--- a/packages/fuselage/src/components/Button/Button.spec.tsx
+++ b/packages/fuselage/src/components/Button/Button.spec.tsx
@@ -1,10 +1,15 @@
 import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './Button.stories';
+import * as iconButtonStories from './IconButton.stories';
 
 const { Default, AsIconButton } = composeStories(stories);
+const { _IconButton, _IconButtonInfo, _IconButtonSuccess } =
+  composeStories(iconButtonStories);
+expect.extend(toHaveNoViolations);
 
 describe('[Button Component]', () => {
   it('renders Button without crashing', () => {
@@ -14,4 +19,38 @@ describe('[Button Component]', () => {
   it('renders ActionButton without crashing', () => {
     render(<AsIconButton />);
   });
+
+  it('should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});
+
+describe('[IconButton Component]', () => {
+  it('renders IconButton without crashing', () => {
+    render(<AsIconButton />);
+  });
+
+  it('IconButton default should have no a11y violations', async () => {
+    const { container } = render(<_IconButton />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('IconButtonInfo should have no a11y violations', async () => {
+    const { container } = render(<_IconButtonInfo />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  it('IconButtonSuccess should have no a11y violations', async () => {
+    const { container } = render(<_IconButtonSuccess />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });
diff --git a/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx b/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx
index 22c90a451c..f0bff25506 100644
--- a/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx
+++ b/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx
@@ -1,13 +1,22 @@
 import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './ButtonGroup.stories';
 
 const { Default } = composeStories(stories);
+expect.extend(toHaveNoViolations);
 
 describe('[ButtonGroup Component]', () => {
   it('renders without crashing', () => {
     render(<Default />);
   });
+
+  it('should have no a11y violations', async () => {
+    const { container } = render(<Default />);
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });

From e8908c5b341d60b65cf3d9ab3258b7231b1b0e6c Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 28 Aug 2023 10:35:47 -0300
Subject: [PATCH 7/8] review

---
 packages/fuselage/src/components/Button/Button.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/fuselage/src/components/Button/Button.tsx b/packages/fuselage/src/components/Button/Button.tsx
index 04afee8259..e9d03db2a2 100644
--- a/packages/fuselage/src/components/Button/Button.tsx
+++ b/packages/fuselage/src/components/Button/Button.tsx
@@ -19,7 +19,10 @@ export type ButtonProps = ComponentProps<typeof Box> & {
   square?: boolean;
   external?: boolean;
   icon?: ComponentProps<typeof Icon>['name'];
-} & Omit<AllHTMLAttributes<HTMLButtonElement>, 'is' | 'className' | 'size'>;
+} & Omit<
+    AllHTMLAttributes<HTMLButtonElement | HTMLAnchorElement>,
+    'is' | 'className' | 'size'
+  >;
 
 export const Button = forwardRef(function Button(
   {
@@ -41,7 +44,7 @@ export const Button = forwardRef(function Button(
     children,
     ...props
   }: ButtonProps,
-  ref: Ref<HTMLButtonElement>
+  ref: Ref<HTMLButtonElement | HTMLAnchorElement>
 ) {
   const extraProps =
     (is === 'a' && {

From a176b881a57aee829a123bbad0222b288ad26099 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 28 Aug 2023 10:45:48 -0300
Subject: [PATCH 8/8] review: jest setup extend

---
 packages/fuselage/.jest/setup.ts                              | 4 ++++
 packages/fuselage/src/components/Accordion/Accordion.spec.tsx | 3 +--
 packages/fuselage/src/components/Button/Button.spec.tsx       | 3 +--
 .../fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx  | 3 +--
 packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx   | 4 +---
 packages/fuselage/src/components/Field/Field.spec.tsx         | 4 +---
 packages/fuselage/src/components/Label/Label.spec.tsx         | 4 +---
 packages/fuselage/src/components/Table/Table.spec.tsx         | 3 +--
 packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx   | 4 +---
 9 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/fuselage/.jest/setup.ts b/packages/fuselage/.jest/setup.ts
index 6dc9787551..9fa64ce408 100644
--- a/packages/fuselage/.jest/setup.ts
+++ b/packages/fuselage/.jest/setup.ts
@@ -1,3 +1,5 @@
+import { toHaveNoViolations } from 'jest-axe';
+
 const cssInJsClassRegex = /^rcx-css-[a-z0-9]+$/;
 
 expect.extend({
@@ -28,3 +30,5 @@ expect.extend({
     };
   },
 });
+
+expect.extend(toHaveNoViolations);
diff --git a/packages/fuselage/src/components/Accordion/Accordion.spec.tsx b/packages/fuselage/src/components/Accordion/Accordion.spec.tsx
index 84ca97dcda..d4150fee4b 100644
--- a/packages/fuselage/src/components/Accordion/Accordion.spec.tsx
+++ b/packages/fuselage/src/components/Accordion/Accordion.spec.tsx
@@ -1,12 +1,11 @@
 import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
+import { axe } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './Accordion.stories';
 
 const { Default } = composeStories(stories);
-expect.extend(toHaveNoViolations);
 
 describe('[Accordion Component]', () => {
   it('renders without crashing', () => {
diff --git a/packages/fuselage/src/components/Button/Button.spec.tsx b/packages/fuselage/src/components/Button/Button.spec.tsx
index 9f561c95f3..3e838464c6 100644
--- a/packages/fuselage/src/components/Button/Button.spec.tsx
+++ b/packages/fuselage/src/components/Button/Button.spec.tsx
@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
+import { axe } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './Button.stories';
@@ -9,7 +9,6 @@ import * as iconButtonStories from './IconButton.stories';
 const { Default, AsIconButton } = composeStories(stories);
 const { _IconButton, _IconButtonInfo, _IconButtonSuccess } =
   composeStories(iconButtonStories);
-expect.extend(toHaveNoViolations);
 
 describe('[Button Component]', () => {
   it('renders Button without crashing', () => {
diff --git a/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx b/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx
index f0bff25506..477afec4df 100644
--- a/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx
+++ b/packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx
@@ -1,12 +1,11 @@
 import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
+import { axe } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './ButtonGroup.stories';
 
 const { Default } = composeStories(stories);
-expect.extend(toHaveNoViolations);
 
 describe('[ButtonGroup Component]', () => {
   it('renders without crashing', () => {
diff --git a/packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx b/packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx
index 603dff5d8a..f747c29e54 100644
--- a/packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx
+++ b/packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx
@@ -1,6 +1,6 @@
 import { composeStories } from '@storybook/testing-react';
 import { fireEvent, getByRole, render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
+import { axe } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './CheckBox.stories';
@@ -8,8 +8,6 @@ import * as stories from './CheckBox.stories';
 const { Default, Indeterminate, Disabled, DefaultChecked } =
   composeStories(stories);
 
-expect.extend(toHaveNoViolations);
-
 const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story.storyName || 'Story',
   Story,
diff --git a/packages/fuselage/src/components/Field/Field.spec.tsx b/packages/fuselage/src/components/Field/Field.spec.tsx
index 74c839b63b..57d8bf0668 100644
--- a/packages/fuselage/src/components/Field/Field.spec.tsx
+++ b/packages/fuselage/src/components/Field/Field.spec.tsx
@@ -1,12 +1,10 @@
 import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
+import { axe } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './Field.stories';
 
-expect.extend(toHaveNoViolations);
-
 const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story.storyName || 'Story',
   Story,
diff --git a/packages/fuselage/src/components/Label/Label.spec.tsx b/packages/fuselage/src/components/Label/Label.spec.tsx
index 68598b48f4..9d47bc7817 100644
--- a/packages/fuselage/src/components/Label/Label.spec.tsx
+++ b/packages/fuselage/src/components/Label/Label.spec.tsx
@@ -1,12 +1,10 @@
 import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
+import { axe } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './Label.stories';
 
-expect.extend(toHaveNoViolations);
-
 const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story.storyName || 'Story',
   Story,
diff --git a/packages/fuselage/src/components/Table/Table.spec.tsx b/packages/fuselage/src/components/Table/Table.spec.tsx
index 265c6ddc8c..873dc800f0 100644
--- a/packages/fuselage/src/components/Table/Table.spec.tsx
+++ b/packages/fuselage/src/components/Table/Table.spec.tsx
@@ -1,13 +1,12 @@
 import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
+import { axe } from 'jest-axe';
 import React from 'react';
 
 import { Table, TableRow, TableHead, TableBody, TableCell, TableFoot } from '.';
 import * as stories from './Table.stories';
 
 const { Default, Selected } = composeStories(stories);
-expect.extend(toHaveNoViolations);
 
 describe('[Table Component]', () => {
   it('renders Table without crashing', () => {
diff --git a/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx b/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx
index acdbd086a9..8fd9218621 100644
--- a/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx
+++ b/packages/fuselage/src/components/ToastBar/ToastBar.spec.tsx
@@ -1,11 +1,9 @@
 import { render } from '@testing-library/react';
-import { axe, toHaveNoViolations } from 'jest-axe';
+import { axe } from 'jest-axe';
 import React from 'react';
 
 import { ToastBar } from '.';
 
-expect.extend(toHaveNoViolations);
-
 describe('[ToastBar Component]', () => {
   it('renders without crashing', () => {
     render(<ToastBar />);