DEBT-14 rg - add aria attributes to button

src/components/Button/Button.tsx

@@ -1,5 +1,32 @@
-import { Button } from 'reactstrap';
+import React from 'react';
+import { Button as RsButton, ButtonProps as RsButtonProps } from 'reactstrap';
 
-export type { ButtonProps } from 'reactstrap';
+export interface ButtonProps extends RsButtonProps {
+  'aria-labelledby'?: string;
+}
+
+const Button = ({
+  disabled = false,
+  children,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  ...props
+}: ButtonProps) => {
+  if (!ariaLabel && children && typeof children === 'string') {
+    ariaLabel = children;
+  }
+
+  return (
+    <RsButton
+      {...props}
+      disabled={disabled}
+      aria-disabled={disabled}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy || undefined}
+    >
+      {children}
+    </RsButton>
+  );
+};
 
 export default Button;

src/components/Combobox/Combobox.tsx

@@ -411,7 +411,7 @@ function Combobox<T>({
               data-testid="combobox-caret"
               disabled={disabled}
               active={open}
-              onMouseDown={(ev) => {
+              onMouseDown={(ev: React.MouseEvent<HTMLButtonElement>) => {
                 ev.stopPropagation();
                 setOpen(!open);
               }}

src/components/HasManyFields/HasManyFieldsRow.tsx

@@ -53,7 +53,7 @@ const HasManyFieldsRow = ({
     <Button
       id={id}
       color="danger"
-      onClick={(e) => e.preventDefault()}
+      onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.preventDefault()}
       outline
       className="p-2 disabled align-self-stretch"
     >

src/components/Input/DateInput.spec.js

@@ -50,15 +50,15 @@ describe('<DateInput />', () => {
     const component = mount(<DateInput />);
 
     const toggle = component.find('InputGroup');
-    const calendarButton = toggle.find('Button');
+    const calendarButton = toggle.find(Button);
     assert.equal(calendarButton.props().tabIndex, -1);
   });
 
   it('should open and close when input addon clicked', () => {
     const component = mount(<DateInput />);
     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('<DateInput />', () => {
     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('<DateInput />', () => {
     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('<DateInput />', () => {
     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('<DateInput />', () => {
     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('<DateInput />', () => {
     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('<DateInput />', () => {
     });
 
     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('<DateInput />', () => {
     });
 
     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('<DateInput />', () => {
       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('<DateInput />', () => {
       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('<DateInput />', () => {
       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('<DateInput />', () => {
       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('<DateInput />', () => {
 
       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('<DateInput />', () => {
 
       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, '');

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('<MonthInput />', () => {
@@ -45,15 +46,15 @@ describe('<MonthInput />', () => {
     const component = mount(<MonthInput />);
 
     const toggle = component.find('InputGroup');
-    const calendarButton = toggle.find('Button');
+    const calendarButton = toggle.find(Button);
     assert.equal(calendarButton.props().tabIndex, -1);
   });
 
   it('should open and close when input addon clicked', () => {
     const component = mount(<MonthInput />);
     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('<MonthInput />', () => {
 
     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('<MonthInput />', () => {
     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('<MonthInput />', () => {
     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('<MonthInput />', () => {
     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('<MonthInput />', () => {
     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('<MonthInput />', () => {
     });
 
     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('<MonthInput />', () => {
         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', () => {

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('<List />', () => {
           {(item) => item}
         </List>
       );
-      const buttons = component.find('Button');
+      const buttons = component.find(Button);
 
       assert.equal(buttons.length, 5);
       assert.equal(buttons.at(0).props().style.visibility, 'hidden');

src/components/MultiSelectCombobox/UncontrolledMultiSelectCombobox.spec.tsx

@@ -133,7 +133,6 @@ describe('<UncontrolledMultiSelectCombobox>', () => {
 
     const removeAllButton = screen.getByLabelText('Remove all selections');
     user.click(removeAllButton);
-
     expect(changeSpy).toHaveBeenCalledTimes(3);
     expect(changeSpy).toHaveBeenLastCalledWith([]);
   });

src/components/Table/SortableTable.spec.js

@@ -337,24 +337,24 @@ describe('<SortableTable />', () => {
 
     it('should not render expandable column helper when onExpand not present', () => {
       const wrapper = mount(<SortableTable columns={columns} rows={[1, 2, 3]} />);
-      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(
         <SortableTable columns={columns} rows={[1, 2, 3]} onExpand={() => {}} />
       );
-      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', () => {
       const onExpand = sinon.stub();
       const wrapper = mount(
         <SortableTable columns={columns} rows={[1, 2, 3]} onExpand={onExpand} />
       );
-      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));
     });
   });