fix(highlights): Allows highlight anchors to receive focus (#598)

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: Conrad Chan

src/highlight/HighlightTarget.tsx

@@ -3,7 +3,6 @@ import * as ReactRedux from 'react-redux';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
 import { getIsCurrentFileVersion } from '../store';
-import { MOUSE_PRIMARY } from '../constants';
 import { Rect } from '../@types/model';
 import './HighlightTarget.scss';
 
@@ -21,12 +20,6 @@ const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.
     const { annotationId, className, onHover = noop, onSelect = noop, shapes } = props;
     const isCurrentFileVersion = ReactRedux.useSelector(getIsCurrentFileVersion);
 
-    const handleClick = (event: React.MouseEvent<HighlightTargetRef>): void => {
-        event.preventDefault();
-        event.stopPropagation();
-        event.nativeEvent.stopImmediatePropagation();
-    };
-
     const handleFocus = (): void => {
         onSelect(annotationId);
     };
@@ -39,17 +32,6 @@ const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.
         onHover(null);
     };
 
-    const handleMouseDown = (event: React.MouseEvent<HighlightTargetRef>): void => {
-        if (event.buttons !== MOUSE_PRIMARY) {
-            return;
-        }
-
-        onSelect(annotationId);
-
-        event.preventDefault(); // Prevents focus from leaving the anchor immediately in some browsers
-        event.nativeEvent.stopImmediatePropagation(); // Prevents document event handlers from executing
-    };
-
     return (
         // eslint-disable-next-line jsx-a11y/anchor-is-valid
         <a
@@ -60,9 +42,7 @@ const HighlightTarget = (props: Props, ref: React.Ref<HighlightTargetRef>): JSX.
             data-resin-target="highlightText"
             data-testid={`ba-AnnotationTarget-${annotationId}`}
             href="#"
-            onClick={handleClick}
             onFocus={handleFocus}
-            onMouseDown={handleMouseDown}
             onMouseEnter={handleMouseEnter}
             onMouseLeave={handleMouseLeave}
             role="button"

src/highlight/__tests__/HighlightTarget-test.tsx

@@ -57,46 +57,6 @@ describe('HighlightTarget', () => {
             expect(defaults.onSelect).toHaveBeenCalledWith(defaults.annotationId);
         });
 
-        describe('handleMouseDown()', () => {
-            const mockEvent = {
-                buttons: 1,
-                preventDefault: jest.fn(),
-                nativeEvent: {
-                    stopImmediatePropagation: jest.fn(),
-                },
-            };
-
-            test('should do nothing if button is not MOUSE_PRIMARY', () => {
-                const wrapper = getWrapper();
-                const anchor = wrapper.find('a');
-                const event = {
-                    ...mockEvent,
-                    buttons: 2,
-                };
-
-                anchor.simulate('mousedown', event);
-
-                expect(defaults.onSelect).not.toHaveBeenCalled();
-                expect(mockEvent.preventDefault).not.toHaveBeenCalled();
-                expect(mockEvent.nativeEvent.stopImmediatePropagation).not.toHaveBeenCalled();
-            });
-
-            test('should call onSelect', () => {
-                const wrapper = getWrapper();
-                const anchor = wrapper.find('a');
-                const event = {
-                    ...mockEvent,
-                    buttons: 1,
-                };
-
-                anchor.simulate('mousedown', event);
-
-                expect(defaults.onSelect).toHaveBeenCalledWith(defaults.annotationId);
-                expect(mockEvent.preventDefault).toHaveBeenCalled();
-                expect(mockEvent.nativeEvent.stopImmediatePropagation).toHaveBeenCalled();
-            });
-        });
-
         describe('handleMouseEnter()', () => {
             test('should call onHover with annotationId', () => {
                 const wrapper = getWrapper();