tests: a11y

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

@@ -1,13 +1,31 @@
 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 './EmailInput.stories';
 
-const { Default } = composeStories(stories);
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
 
 describe('[EmailInput Component]', () => {
-  it('renders without crashing', () => {
-    render(<Default />);
-  });
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
 });

packages/fuselage/src/components/EmailInput/EmailInput.stories.tsx

@@ -27,13 +27,13 @@ export default {
 } as ComponentMeta<typeof EmailInput>;
 
 const Template: ComponentStory<typeof EmailInput> = (args) => (
-  <EmailInput {...args} />
+  <EmailInput aria-label='email' {...args} />
 );
 
 export const Default: ComponentStory<typeof EmailInput> = Template.bind({});
 
 export const WithIconAddon: ComponentStory<typeof EmailInput> = () => (
-  <EmailInput addon={<Icon name='send' size='x20' />} />
+  <EmailInput aria-label='email' addon={<Icon name='send' size='x20' />} />
 );
 
 export const Invalid: ComponentStory<typeof EmailInput> = Template.bind({});
@@ -62,7 +62,7 @@ export const States: ComponentStory<typeof EmailInput> = () => (
   <>
     <PropsVariationSection
       component={EmailInput}
-      common={{ onChange: () => {} }}
+      common={{ 'onChange': () => {}, 'aria-label': 'email' }}
       xAxis={{
         'default': {},
         'with placeholder': { placeholder: 'Placeholder' },
@@ -86,7 +86,7 @@ export const States: ComponentStory<typeof EmailInput> = () => (
     />
     <PropsVariationSection
       component={EmailInput}
-      common={{ onChange: () => {}, small: true }}
+      common={{ 'onChange': () => {}, 'small': true, 'aria-label': 'email' }}
       xAxis={{
         'small': {},
         'with placeholder': { placeholder: 'Placeholder' },