diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index c3cf76f38..3ff62840e 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,18 +1,33 @@
import React from 'react';
-import { Button as RsButton } from 'reactstrap';
+import { Button as RsButton, ButtonProps as RsButtonProps } from 'reactstrap';
-const Button = ({ disabled = false, block = false, outline = false, ...props }) => (
-
-);
+export interface ButtonProps extends RsButtonProps {
+ ariaLabelledBy?: string;
+}
-export type { ButtonProps } from 'reactstrap';
+const Button = ({
+ ariaLabelledBy = '',
+ disabled = false,
+ children,
+ 'aria-label': ariaLabel,
+ ...props
+}: ButtonProps) => {
+ if (!ariaLabel && children && typeof children === 'string') {
+ ariaLabel = children;
+ }
+
+ return (
+
+ {children}
+
+ );
+};
export default Button;
diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx
index a0521df80..9e51e0254 100644
--- a/src/components/Combobox/Combobox.tsx
+++ b/src/components/Combobox/Combobox.tsx
@@ -78,7 +78,7 @@ function Combobox({
const grouped = !!(optionsProp[0] as OptionGroup)?.options;
const options: Option[] = useMemo(() => {
- if (optionsProp === [] || !optionsProp) {
+ if (!Array.isArray(optionsProp) || !optionsProp.length) {
return [];
}
diff --git a/src/components/Input/DateInput.spec.js b/src/components/Input/DateInput.spec.js
index df6c5da94..ab4c1deef 100644
--- a/src/components/Input/DateInput.spec.js
+++ b/src/components/Input/DateInput.spec.js
@@ -50,7 +50,7 @@ describe('', () => {
const component = mount();
const toggle = component.find('InputGroup');
- const calendarButton = toggle.find('Button');
+ const calendarButton = toggle.find(Button);
assert.equal(calendarButton.props().tabIndex, -1);
});
@@ -58,7 +58,7 @@ describe('', () => {
const component = mount();
assert.equal(component.find('Dropdown').props().isOpen, false);
- const toggle = component.find('InputGroup').find('Button');
+ const toggle = component.find('InputGroup').find(Button);
toggle.simulate('click');
assert.equal(component.find('Dropdown').props().isOpen, true);
@@ -91,7 +91,7 @@ describe('', () => {
const dropdown = component.find('Dropdown');
assert.equal(dropdown.props().isOpen, false);
- const toggle = component.find('InputGroup').find('Button');
+ const toggle = component.find('InputGroup').find(Button);
toggle.simulate('click');
assert.equal(dropdown.props().isOpen, false);
@@ -182,7 +182,7 @@ describe('', () => {
it('should set date after clicking prev year', () => {
callback.resetHistory();
const expectedDate = addYears(component.instance().getCurrentDate(), -1);
- const prevYear = component.find('Button.js-prev-year');
+ const prevYear = component.find('button.js-prev-year');
prevYear.simulate('click');
@@ -193,7 +193,7 @@ describe('', () => {
it('should set date after clicking next year', () => {
callback.resetHistory();
const expectedDate = addYears(component.instance().getCurrentDate(), 1);
- const nextYear = component.find('Button.js-next-year');
+ const nextYear = component.find('button.js-next-year');
nextYear.simulate('click');
@@ -204,7 +204,7 @@ describe('', () => {
it('should set date after clicking prev month', () => {
callback.resetHistory();
const expectedDate = addMonths(component.instance().getCurrentDate(), -1);
- const prevMonth = component.find('Button.js-prev-month');
+ const prevMonth = component.find('button.js-prev-month');
prevMonth.simulate('click');
@@ -215,7 +215,7 @@ describe('', () => {
it('should set date after clicking next month', () => {
callback.resetHistory();
const expectedDate = addMonths(component.instance().getCurrentDate(), 1);
- const nextMonth = component.find('Button.js-next-month');
+ const nextMonth = component.find('button.js-next-month');
nextMonth.simulate('click');
@@ -224,14 +224,14 @@ describe('', () => {
});
it('should set date to start of today after clicking today', () => {
- const today = component.find('footer Button').at(0);
+ const today = component.find('footer button').at(0);
today.simulate('click');
assert.deepEqual(component.instance().getCurrentDate(), startOfToday());
});
it('should call onChange after clicking today', () => {
callback.resetHistory();
- const today = component.find('footer Button').at(0);
+ const today = component.find('footer button').at(0);
today.simulate('click');
assert(callback.called);
const spyCall = callback.getCall(0);
@@ -240,14 +240,14 @@ describe('', () => {
});
it('should clear date after clicking clear', () => {
- const clear = component.find('footer Button').at(1);
+ const clear = component.find('footer button').at(1);
clear.simulate('click');
assert.equal(component.instance().inputEl.value, '');
});
it('should call onChange after clicking clear', () => {
callback.resetHistory();
- const clear = component.find('footer Button').at(1);
+ const clear = component.find('footer button').at(1);
clear.simulate('click');
assert(callback.calledWith('', false));
});
@@ -374,7 +374,7 @@ describe('', () => {
it('should allow setting to prev year', () => {
onChange.resetHistory();
const expectedDate = addYears(component.instance().getCurrentDate(), -1);
- const prevYear = component.find('Button.js-prev-year');
+ const prevYear = component.find('button.js-prev-year');
prevYear.simulate('click');
@@ -385,7 +385,7 @@ describe('', () => {
it('should allow setting to next year', () => {
onChange.resetHistory();
const expectedDate = addYears(component.instance().getCurrentDate(), 1);
- const nextYear = component.find('Button.js-next-year');
+ const nextYear = component.find('button.js-next-year');
nextYear.simulate('click');
@@ -396,7 +396,7 @@ describe('', () => {
it('should allow setting to prev month', () => {
onChange.resetHistory();
const expectedDate = addMonths(component.instance().getCurrentDate(), -1);
- const prevMonth = component.find('Button.js-prev-month');
+ const prevMonth = component.find('button.js-prev-month');
prevMonth.simulate('click');
@@ -407,7 +407,7 @@ describe('', () => {
it('should allow setting to next month', () => {
onChange.resetHistory();
const expectedDate = addMonths(component.instance().getCurrentDate(), 1);
- const nextMonth = component.find('Button.js-next-month');
+ const nextMonth = component.find('button.js-next-month');
nextMonth.simulate('click');
@@ -467,7 +467,7 @@ describe('', () => {
it('should allow setting date to today', () => {
onChange.resetHistory();
- const today = component.find('Button.today-button').first();
+ const today = component.find('button.today-button').first();
today.simulate('click');
assert.deepStrictEqual(component.instance().getCurrentDate(), startOfToday());
@@ -481,7 +481,7 @@ describe('', () => {
it('should allow clearing date', () => {
onChange.resetHistory();
- const clear = component.find('Button.clear-button').first();
+ const clear = component.find('button.clear-button').first();
clear.simulate('click');
assert.strictEqual(component.instance().inputEl.value, '');
diff --git a/src/components/Input/MonthInput.spec.js b/src/components/Input/MonthInput.spec.js
index 2ec3aea2a..72f0d1cdd 100644
--- a/src/components/Input/MonthInput.spec.js
+++ b/src/components/Input/MonthInput.spec.js
@@ -7,6 +7,7 @@ import isToday from 'date-fns/is_today';
import { mount } from 'enzyme';
import React from 'react';
import sinon from 'sinon';
+import Button from '../Button/Button';
import MonthInput from './MonthInput';
describe('', () => {
@@ -45,7 +46,7 @@ describe('', () => {
const component = mount();
const toggle = component.find('InputGroup');
- const calendarButton = toggle.find('Button');
+ const calendarButton = toggle.find(Button);
assert.equal(calendarButton.props().tabIndex, -1);
});
@@ -53,7 +54,7 @@ describe('', () => {
const component = mount();
assert.equal(component.find('Dropdown').props().isOpen, false);
- const toggle = component.find('InputGroup').find('Button');
+ const toggle = component.find('InputGroup').find(Button);
toggle.simulate('click');
assert.equal(component.find('Dropdown').props().isOpen, true);
@@ -86,7 +87,7 @@ describe('', () => {
assert.equal(component.find('Dropdown').props().isOpen, false);
- const toggle = component.find('InputGroup').find('Button');
+ const toggle = component.find('InputGroup').find(Button);
toggle.simulate('click');
assert.equal(component.find('Dropdown').props().isOpen, false);
@@ -177,7 +178,7 @@ describe('', () => {
it('should set date after clicking prev year', () => {
callback.resetHistory();
const expectedDate = addYears(component.instance().getCurrentDate(), -1);
- const prevYear = component.find('Button.js-prev-year');
+ const prevYear = component.find('button.js-prev-year');
prevYear.simulate('click');
@@ -188,7 +189,7 @@ describe('', () => {
it('should set date after clicking next year', () => {
callback.resetHistory();
const expectedDate = addYears(component.instance().getCurrentDate(), 1);
- const nextYear = component.find('Button.js-next-year');
+ const nextYear = component.find('button.js-next-year');
nextYear.simulate('click');
@@ -199,7 +200,7 @@ describe('', () => {
it('should set date after clicking prev month', () => {
callback.resetHistory();
const expectedDate = addMonths(component.instance().getCurrentDate(), -1);
- const prevMonth = component.find('Button.js-prev-month');
+ const prevMonth = component.find('button.js-prev-month');
prevMonth.simulate('click');
@@ -210,7 +211,7 @@ describe('', () => {
it('should set date after clicking next month', () => {
callback.resetHistory();
const expectedDate = addMonths(component.instance().getCurrentDate(), 1);
- const nextMonth = component.find('Button.js-next-month');
+ const nextMonth = component.find('button.js-next-month');
nextMonth.simulate('click');
@@ -219,7 +220,7 @@ describe('', () => {
});
it('should set date after clicking today', () => {
- const today = component.find('footer Button');
+ const today = component.find('footer button');
today.simulate('click');
assert(isSameMonth(new Date(), component.instance().getCurrentDate()));
});
@@ -260,7 +261,7 @@ describe('', () => {
showOnFocus
/>
);
- const toggle = component.find('InputGroup').find('Button');
+ const toggle = component.find('InputGroup').find(Button);
toggle.simulate('click');
it('should pass dateVisible func to Calendar component', () => {
diff --git a/src/components/List/List.spec.js b/src/components/List/List.spec.js
index a3fc1445d..631f9aba5 100644
--- a/src/components/List/List.spec.js
+++ b/src/components/List/List.spec.js
@@ -3,6 +3,7 @@ import { render } from '@testing-library/react';
import { mount, shallow } from 'enzyme';
import React from 'react';
import sinon from 'sinon';
+import Button from '../Button/Button';
import List from './List';
import ListItem from './ListItem';
@@ -62,7 +63,7 @@ describe('
', () => {
{(item) => item}
);
- const buttons = component.find('Button');
+ const buttons = component.find(Button);
assert.equal(buttons.length, 5);
assert.equal(buttons.at(0).props().style.visibility, 'hidden');
diff --git a/src/components/MultiSelectCombobox/UncontrolledMultiSelectCombobox.spec.tsx b/src/components/MultiSelectCombobox/UncontrolledMultiSelectCombobox.spec.tsx
index ac6e6b03f..2eae6e072 100644
--- a/src/components/MultiSelectCombobox/UncontrolledMultiSelectCombobox.spec.tsx
+++ b/src/components/MultiSelectCombobox/UncontrolledMultiSelectCombobox.spec.tsx
@@ -133,7 +133,6 @@ describe('', () => {
const removeAllButton = screen.getByLabelText('Remove all selections');
user.click(removeAllButton);
-
expect(changeSpy).toHaveBeenCalledTimes(3);
expect(changeSpy).toHaveBeenLastCalledWith([]);
});
diff --git a/src/components/Table/SortableTable.spec.js b/src/components/Table/SortableTable.spec.js
index 33ca8e179..1eae81c9a 100644
--- a/src/components/Table/SortableTable.spec.js
+++ b/src/components/Table/SortableTable.spec.js
@@ -337,14 +337,14 @@ describe('', () => {
it('should not render expandable column helper when onExpand not present', () => {
const wrapper = mount();
- assert.equal(wrapper.find('td Button').length, 0, 'expand buttons present');
+ assert.equal(wrapper.find('td button').length, 0, 'expand buttons present');
});
it('should render expandable column helper when onExpand present', () => {
const wrapper = mount(
{}} />
);
- assert.equal(wrapper.find('td Button').length, 3, 'expand buttons missing');
+ assert.equal(wrapper.find('td button').length, 3, 'expand buttons missing');
});
it('should call onExpand when clicked', () => {
@@ -352,9 +352,9 @@ describe('', () => {
const wrapper = mount(
);
- wrapper.find('td Button').first().simulate('click');
+ wrapper.find('td button').first().simulate('click');
assert(onExpand.calledWith(1));
- wrapper.find('td Button').last().simulate('click');
+ wrapper.find('td button').last().simulate('click');
assert(onExpand.calledWith(3));
});
});