fix: ts errors

bigcommerce · Sep 20, 2019 · 3ba3058 · 3ba3058
1 parent aefa87c
commit 3ba3058
Show file tree

Hide file tree

Showing 8 changed files with 255 additions and 207 deletions.
diff --git a/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Checkbox/__snapshots__/spec.tsx.snap
@@ -117,6 +117,7 @@ exports[`render Checkbox checked 1`] = `
     </svg>
   </label>
   <label
+    aria-hidden="true"
     class="c5"
     for="checkBox_0"
     id="checkBox_label_1"
@@ -246,6 +247,7 @@ exports[`render Checkbox indeterminate 1`] = `
     </svg>
   </label>
   <label
+    aria-hidden="true"
     class="c5"
     for="checkBox_0"
     id="checkBox_label_1"
@@ -375,6 +377,7 @@ exports[`render Checkbox unchecked 1`] = `
     </svg>
   </label>
   <label
+    aria-hidden="true"
     class="c5"
     for="checkBox_0"
     id="checkBox_label_1"

diff --git a/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Chip/__snapshots__/spec.tsx.snap
@@ -165,6 +165,7 @@ exports[`renders with close button if onRemove is present 1`] = `
     Test
   </p>
   <button
+    aria-label="Remove Test"
     class="c3 c4"
     role="button"
     tabindex="0"

diff --git a/packages/big-design/src/components/Dropdown/Dropdown.tsx b/packages/big-design/src/components/Dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
 import { Placement } from 'popper.js';
-import React, { AllHTMLAttributes, RefObject } from 'react';
+import React, { RefObject } from 'react';
 import { Manager, Reference, RefHandler } from 'react-popper';
 import scrollIntoView from 'scroll-into-view-if-needed';
 
@@ -16,7 +16,7 @@ interface Props {
   maxHeight?: number;
   placement?: Placement;
   trigger: React.ReactElement;
-  onItemClick?(value: AllHTMLAttributes<HTMLElement>['value']): void;
+  onItemClick?(value: string | number | Array<string | number>): void;
 }
 
 export type DropdownProps = Props & React.HTMLAttributes<HTMLUListElement>;

diff --git a/packages/big-design/src/components/Dropdown/spec.tsx b/packages/big-design/src/components/Dropdown/spec.tsx
@@ -33,34 +33,33 @@ test('dropdown trigger has aria-haspopup', () => {
   const { getByRole } = render(DropdownMock);
   const trigger = getByRole('button');
 
-  expect(trigger.getAttribute('aria-haspopup')).toBe('true');
+  expect(trigger.getAttribute('aria-haspopup')).toBe('listbox');
 });
 
-test('dropdown trigger has aria-expanded and aria-owns when dropdown menu is open', () => {
+test('dropdown trigger has aria-expanded when dropdown menu is open', () => {
   const { getByRole } = render(DropdownMock);
   const trigger = getByRole('button');
 
   fireEvent.click(trigger);
 
   expect(trigger.getAttribute('aria-expanded')).toBe('true');
-  expect(trigger.getAttribute('aria-owns')).toBe(getByRole('menu').id);
 });
 
 test('renders the dropdown menu closed', () => {
   const { queryByRole } = render(DropdownMock);
 
-  expect(queryByRole('menu')).not.toBeVisible();
+  expect(queryByRole('listbox')).not.toBeVisible();
 });
 
 test('opens/closes dropdown menu when trigger is clicked', () => {
   const { getByRole, queryByRole } = render(DropdownMock);
   const trigger = getByRole('button');
 
   fireEvent.click(trigger);
-  expect(queryByRole('menu')).not.toHaveStyle('height: 1px');
+  expect(queryByRole('listbox')).not.toHaveStyle('height: 1px');
 
   fireEvent.click(trigger);
-  expect(queryByRole('menu')).toHaveStyle('height: 1px');
+  expect(queryByRole('listbox')).toHaveStyle('height: 1px');
 });
 
 test('dropdown menu has aria-labelledby', () => {
@@ -69,7 +68,7 @@ test('dropdown menu has aria-labelledby', () => {
 
   fireEvent.click(trigger);
 
-  expect(getByRole('menu').getAttribute('aria-labelledby')).toBe(trigger.id);
+  expect(getByRole('listbox').getAttribute('aria-labelledby')).toBe(trigger.id);
 });
 
 test('dropdown menu has aria-activedescendant', () => {
@@ -78,22 +77,22 @@ test('dropdown menu has aria-activedescendant', () => {
 
   fireEvent.click(trigger);
 
-  const options = getAllByRole('menuitem');
+  const options = getAllByRole('option');
 
-  expect(getByRole('menu').getAttribute('aria-activedescendant')).toBe(options[0].id);
+  expect(getByRole('listbox').getAttribute('aria-activedescendant')).toBe(options[0].id);
 });
 
 test('dropdown menu should have 4 dropdown items', () => {
   const { getAllByRole } = render(DropdownMock);
 
-  const options = getAllByRole('menuitem');
+  const options = getAllByRole('option');
   expect(options.length).toBe(4);
 });
 
 test('dropdown items should have values', () => {
   const { getAllByRole } = render(DropdownMock);
 
-  const options = getAllByRole('menuitem');
+  const options = getAllByRole('option');
   options.forEach((option, index) => expect(option.getAttribute('data-value')).toBe(`${index}`));
 });
 
@@ -103,7 +102,7 @@ test('first dropdown item should be selected when dropdown is opened', () => {
 
   fireEvent.click(trigger);
 
-  const option = getAllByRole('menuitem')[0];
+  const option = getAllByRole('option')[0];
 
   expect(option.dataset.highlighted).toBe('true');
 });
@@ -114,8 +113,8 @@ test('up/down arrows should change dropdown item selection', () => {
 
   fireEvent.click(trigger);
 
-  const menu = getByRole('menu');
-  const options = getAllByRole('menuitem');
+  const menu = getByRole('listbox');
+  const options = getAllByRole('option');
 
   fireEvent.keyDown(menu, { key: 'ArrowDown' });
   expect(options[1].dataset.highlighted).toBe('true');
@@ -132,21 +131,21 @@ test('esc should close menu', () => {
   const trigger = getByRole('button');
 
   fireEvent.click(trigger);
-  expect(queryByRole('menu')).not.toHaveStyle('height: 1px');
+  expect(queryByRole('listbox')).not.toHaveStyle('height: 1px');
 
-  fireEvent.keyDown(getByRole('menu'), { key: 'Escape' });
-  expect(queryByRole('menu')).toHaveStyle('height: 1px');
+  fireEvent.keyDown(getByRole('listbox'), { key: 'Escape' });
+  expect(queryByRole('listbox')).toHaveStyle('height: 1px');
 });
 
 test('tab should close menu', () => {
   const { getByRole, queryByRole } = render(DropdownMock);
   const trigger = getByRole('button');
 
   fireEvent.click(trigger);
-  expect(queryByRole('menu')).not.toHaveStyle('height: 1px');
+  expect(queryByRole('listbox')).not.toHaveStyle('height: 1px');
 
-  fireEvent.keyDown(getByRole('menu'), { key: 'Tab' });
-  expect(queryByRole('menu')).toHaveStyle('height: 1px');
+  fireEvent.keyDown(getByRole('listbox'), { key: 'Tab' });
+  expect(queryByRole('listbox')).toHaveStyle('height: 1px');
 });
 
 test('home should select first dropdown item', () => {
@@ -155,8 +154,8 @@ test('home should select first dropdown item', () => {
 
   fireEvent.click(trigger);
 
-  const menu = getByRole('menu');
-  const options = getAllByRole('menuitem');
+  const menu = getByRole('listbox');
+  const options = getAllByRole('option');
 
   fireEvent.keyDown(menu, { key: 'ArrowDown' });
   fireEvent.keyDown(menu, { key: 'ArrowDown' });
@@ -174,8 +173,8 @@ test('end should select last dropdown item', () => {
 
   fireEvent.click(trigger);
 
-  const menu = getByRole('menu');
-  const options = getAllByRole('menuitem');
+  const menu = getByRole('listbox');
+  const options = getAllByRole('option');
 
   expect(options[0].dataset.highlighted).toBe('true');
 
@@ -196,8 +195,8 @@ test('enter should trigger onItemClick', () => {
 
   fireEvent.click(trigger);
 
-  const menu = getByRole('menu');
-  const options = getAllByRole('menuitem');
+  const menu = getByRole('listbox');
+  const options = getAllByRole('option');
 
   fireEvent.keyDown(menu, { key: 'ArrowDown' });
   expect(options[1].dataset.highlighted).toBe('true');
@@ -218,8 +217,8 @@ test('space should trigger onItemClick', () => {
 
   fireEvent.click(trigger);
 
-  const menu = getByRole('menu');
-  const options = getAllByRole('menuitem');
+  const menu = getByRole('listbox');
+  const options = getAllByRole('option');
 
   fireEvent.keyDown(menu, { key: 'ArrowDown' });
   expect(options[1].dataset.highlighted).toBe('true');
@@ -240,7 +239,7 @@ test('clicking on dropdown items should trigger onItemClick', () => {
 
   fireEvent.click(trigger);
 
-  const options = getAllByRole('menuitem');
+  const options = getAllByRole('option');
 
   fireEvent.mouseOver(options[1]);
   fireEvent.click(options[1]);
@@ -253,7 +252,7 @@ test('dropdown items should be highlighted when moused over', () => {
 
   fireEvent.click(trigger);
 
-  const option = getAllByRole('menuitem')[0];
+  const option = getAllByRole('option')[0];
 
   fireEvent.mouseOver(option);
   expect(option.dataset.highlighted).toBe('true');