From 01cafb6d8fd53a9d58800c6c8c3aa2039515dc03 Mon Sep 17 00:00:00 2001
From: DAK <40970507+dakahn@users.noreply.github.com>
Date: Tue, 5 Jan 2021 17:30:25 -0600
Subject: [PATCH] test(Button): add accessibility unit tests and docs (#7413)

* test(Button): add accessibility unit tests and docs

* test(Button): add automated tests

* Update packages/react/src/components/Button/button-avt.md

Co-authored-by: emyarod <emyarod@users.noreply.github.com>

* test(Button): update snaps

* test(Button): make assertions explicit, fix wrong query

Co-authored-by: emyarod <emyarod@users.noreply.github.com>
Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/components/Button/Button-test.js      | 56 +++++++++++++++++++
 .../react/src/components/Button/button-avt.md | 28 ++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 packages/react/src/components/Button/button-avt.md

diff --git a/packages/react/src/components/Button/Button-test.js b/packages/react/src/components/Button/Button-test.js
index c5e385d3f016..b08383e64980 100644
--- a/packages/react/src/components/Button/Button-test.js
+++ b/packages/react/src/components/Button/Button-test.js
@@ -12,6 +12,9 @@ import Link from '../Link';
 import ButtonSkeleton from '../Button/Button.Skeleton';
 import { shallow, mount } from 'enzyme';
 import { settings } from 'carbon-components';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 const { prefix } = settings;
 
@@ -392,3 +395,56 @@ describe('Small ButtonSkeleton', () => {
     });
   });
 });
+
+describe('Small ButtonSkeleton', () => {
+  describe('Renders as expected', () => {
+    const wrapper = shallow(<ButtonSkeleton small />);
+
+    it('has the expected classes for small', () => {
+      expect(wrapper.hasClass(`${prefix}--btn--sm`)).toEqual(true);
+      expect(wrapper.hasClass(`${prefix}--skeleton`)).toEqual(true);
+    });
+  });
+});
+
+describe('Button accessibility', () => {
+  afterEach(cleanup);
+
+  it('should have no Axe violations', async () => {
+    render(<Button>Button Label</Button>);
+
+    await expect(screen.getByRole('button')).toHaveNoAxeViolations();
+  });
+
+  it('should have no Accessibility Checker violations', async () => {
+    render(
+      <main>
+        <Button>Button Label</Button>
+      </main>
+    );
+
+    await expect(screen.getByRole('button')).toHaveNoACViolations('Button');
+  });
+
+  it('is keyboard accessible', () => {
+    render(<Button>Button Label</Button>);
+    userEvent.tab();
+    expect(screen.getByText('Button Label')).toHaveFocus();
+  });
+
+  it('should have an accessible label', () => {
+    render(<Button>Button Label</Button>);
+    expect(() => screen.getByText('Button Label')).not.toThrow();
+  });
+
+  it('should have the role of button', () => {
+    render(<Button>Button Label</Button>);
+    expect(() => screen.getByRole('button')).not.toThrow();
+  });
+
+  it('is not keyboard accessible when disabled', () => {
+    render(<Button disabled>Button Label</Button>);
+    userEvent.tab();
+    expect(document.body).toHaveFocus();
+  });
+});
diff --git a/packages/react/src/components/Button/button-avt.md b/packages/react/src/components/Button/button-avt.md
new file mode 100644
index 000000000000..8cbe8c37b526
--- /dev/null
+++ b/packages/react/src/components/Button/button-avt.md
@@ -0,0 +1,28 @@
+Button Component Accessibility Verification Testing
+
+Developers or designers wanting to manually verify the accessibility of the
+component can carry out the following steps:
+
+## Contrast
+
+- [ ] the Button text has a contrast of 4.5:1 minimum against the background
+      color
+- [ ] the Button background has a contrast of 4.5:1 minimum against the page
+      background
+
+## Screen reader
+
+Each screen reader should be tested when paired with its preferred browser.
+
+### VoiceOver on Safari
+
+1. {tab} "Button, button, main. You are currently on a button. To click this
+   button press ctrl-option-space"
+
+### JAWS on Edge/Chrome
+
+1. {tab} "Main fram, Button, button. To activate press SPACEBAR"
+
+### NVDA on Firefox (optional, but recommended)
+
+1. {tab} "main frame, main landmark. Button button"