fix(reply): Allow keyboard focus for disabled reply buttons (#525)

box · Jun 22, 2020 · 11bb8d7 · 11bb8d7
1 parent 848ee0a
commit 11bb8d7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/src/components/ReplyForm/ReplyButton.tsx b/src/components/ReplyForm/ReplyButton.tsx
@@ -1,22 +1,34 @@
 import React, { HTMLAttributes } from 'react';
 import classNames from 'classnames';
+import noop from 'lodash/noop';
 
 export type Props = {
     children?: React.ReactNode;
     isDisabled?: boolean;
     isPrimary?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
     type: 'button' | 'submit' | 'reset' | undefined;
 } & HTMLAttributes<HTMLButtonElement>;
 
-export default function ReplyButton({ children, isDisabled, isPrimary, ...rest }: Props): JSX.Element {
+export default function ReplyButton({ children, isDisabled, isPrimary, onClick = noop, ...rest }: Props): JSX.Element {
+    const handleClick = (event: React.MouseEvent): void => {
+        if (isDisabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+
+        onClick(event);
+    };
+
     return (
         <button
             aria-disabled={isDisabled ? true : undefined}
             className={classNames('btn', {
                 'btn-primary': isPrimary,
                 'is-disabled': isDisabled,
             })}
-            disabled={isDisabled ? true : undefined}
+            onClick={handleClick}
             type="button"
             {...rest}
         >

diff --git a/src/components/ReplyForm/__tests__/ReplyButton-test.tsx b/src/components/ReplyForm/__tests__/ReplyButton-test.tsx
@@ -8,8 +8,34 @@ describe('components/ReplyForm/ReplyButton', () => {
         isPrimary: false,
         type: 'button' as const,
     };
+    const event = {
+        preventDefault: jest.fn(),
+        stopPropagation: jest.fn(),
+    };
     const getWrapper = (props = {}): ShallowWrapper => shallow(<ReplyButton {...defaults} {...props} />);
 
+    test('should invoke its click callback when clicked', () => {
+        const onClick = jest.fn();
+        const wrapper = getWrapper({ onClick });
+
+        wrapper.simulate('click', event);
+
+        expect(event.preventDefault).not.toHaveBeenCalled();
+        expect(event.stopPropagation).not.toHaveBeenCalled();
+        expect(onClick).toHaveBeenCalled();
+    });
+
+    test('should not invoke its click callback if disabled', () => {
+        const onClick = jest.fn();
+        const wrapper = getWrapper({ isDisabled: true, onClick });
+
+        wrapper.simulate('click', event);
+
+        expect(event.preventDefault).toHaveBeenCalled();
+        expect(event.stopPropagation).toHaveBeenCalled();
+        expect(onClick).not.toHaveBeenCalled();
+    });
+
     test.each([true, false])('should render the correct class when isDisabled is %s', isDisabled => {
         const wrapper = getWrapper({ isDisabled });
         expect(wrapper.hasClass('is-disabled')).toBe(isDisabled);