chore(fuselage): Button size

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);

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', () => {

packages/fuselage/src/components/Button/Button.spec.tsx

@@ -1,10 +1,14 @@
 import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } 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);
 
 describe('[Button Component]', () => {
   it('renders Button without crashing', () => {
@@ -14,4 +18,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();
+  });
 });

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,12 @@ 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 IconButton documentation [here](../?path=/docs/inputs-iconbutton)',
+    },
+  },
+};

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);

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,10 @@ export type ButtonProps = ComponentProps<typeof Box> & {
   square?: boolean;
   external?: boolean;
   icon?: ComponentProps<typeof Icon>['name'];
-};
+} & 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<HTMLElement>
+  ref: Ref<HTMLButtonElement | HTMLAnchorElement>
 ) {
   const extraProps =
     (is === 'a' && {

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}

packages/fuselage/src/components/ButtonGroup/ButtonGroup.spec.tsx

@@ -1,5 +1,6 @@
 import { composeStories } from '@storybook/testing-react';
 import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
 import React from 'react';
 
 import * as stories from './ButtonGroup.stories';
@@ -10,4 +11,11 @@ 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();
+  });
 });

packages/fuselage/src/components/CheckBox/CheckBox.spec.tsx

@@ -1,15 +1,13 @@
 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';
 
 const { Default, Indeterminate, Disabled, DefaultChecked } =
   composeStories(stories);
 
-expect.extend(toHaveNoViolations);
-
 const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story.storyName || 'Story',
   Story,

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,

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,

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', () => {

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 />);