@khanacademy/wonder-blocks-clickable 2.3.3 → 2.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 2.4.1
+
+### Patch Changes
+
+-   4c682709: handleClick no longer redundantly triggers on mouseup
+
+## 2.4.0
+
+### Minor Changes
+
+-   ceb111df: ClickableBehavior no longer has tabIndex 0 by default. It must be passed in.
+
 ## 2.3.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -41,13 +41,11 @@ const disabledHandlers = {
   onMouseLeave: () => void 0,
   onMouseDown: () => void 0,
   onMouseUp: () => void 0,
-  onDragStart: () => void 0,
   onTouchStart: () => void 0,
   onTouchEnd: () => void 0,
   onTouchCancel: () => void 0,
   onKeyDown: () => void 0,
-  onKeyUp: () => void 0,
-  tabIndex: 0
+  onKeyUp: () => void 0
 };
 const keyCodes = {
   enter: 13,
@@ -92,12 +90,7 @@ class ClickableBehavior extends React.Component {
     };
 
     this.handleMouseEnter = e => {
-      if (e.buttons === 1) {
-        this.dragging = true;
-        this.setState({
-          pressed: true
-        });
-      } else if (!this.waitingForClick) {
+      if (!this.waitingForClick) {
         this.setState({
           hovered: true
         });
@@ -106,7 +99,6 @@ class ClickableBehavior extends React.Component {
 
     this.handleMouseLeave = () => {
       if (!this.waitingForClick) {
-        this.dragging = false;
         this.setState({
           hovered: false,
           pressed: false,
@@ -122,22 +114,12 @@ class ClickableBehavior extends React.Component {
     };
 
     this.handleMouseUp = e => {
-      if (this.dragging) {
-        this.dragging = false;
-        this.handleClick(e);
-      }
-
       this.setState({
         pressed: false,
         focused: false
       });
     };
 
-    this.handleDragStart = e => {
-      this.dragging = true;
-      e.preventDefault();
-    };
-
     this.handleTouchStart = () => {
       this.setState({
         pressed: true
@@ -227,7 +209,6 @@ class ClickableBehavior extends React.Component {
     this.state = startState;
     this.waitingForClick = false;
     this.enterClick = false;
-    this.dragging = false;
   }
 
   navigateOrReset(shouldNavigate) {
@@ -351,14 +332,14 @@ class ClickableBehavior extends React.Component {
   render() {
     const childrenProps = this.props.disabled ? _extends({}, disabledHandlers, {
       onFocus: this.handleFocus,
-      onBlur: this.handleBlur
+      onBlur: this.handleBlur,
+      tabIndex: this.props.tabIndex
     }) : {
       onClick: this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
       onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
-      onDragStart: this.handleDragStart,
       onTouchStart: this.handleTouchStart,
       onTouchEnd: this.handleTouchEnd,
       onTouchCancel: this.handleTouchCancel,
@@ -366,7 +347,7 @@ class ClickableBehavior extends React.Component {
       onKeyUp: this.handleKeyUp,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
-      tabIndex: 0
+      tabIndex: this.props.tabIndex
     };
     childrenProps.rel = this.props.rel || (this.props.target === "_blank" ? "noopener noreferrer" : undefined);
     const {

package/dist/index.js

@@ -158,15 +158,11 @@ const disabledHandlers = {
   onMouseLeave: () => void 0,
   onMouseDown: () => void 0,
   onMouseUp: () => void 0,
-  onDragStart: () => void 0,
   onTouchStart: () => void 0,
   onTouchEnd: () => void 0,
   onTouchCancel: () => void 0,
   onKeyDown: () => void 0,
-  onKeyUp: () => void 0,
-  // Clickable components should still be tabbable so they can
-  // be used as anchors.
-  tabIndex: 0
+  onKeyUp: () => void 0
 };
 const keyCodes = {
   enter: 13,
@@ -200,7 +196,7 @@ const startState = {
  * 3. Keyup (spacebar/enter) -> focus state
  *
  * Warning: The event handlers returned (onClick, onMouseEnter, onMouseLeave,
- * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel,
+ * onMouseDown, onMouseUp, onTouchStart, onTouchEnd, onTouchCancel,
  * onKeyDown, onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the
  * component that has the ClickableBehavior. You cannot override these handlers
  * without potentially breaking the functionality of ClickableBehavior.
@@ -225,7 +221,11 @@ const startState = {
  *   const ClickableBehavior = getClickableBehavior();
  *
  *   return (
- *       <ClickableBehavior disabled={props.disabled} onClick={props.onClick}>
+ *       <ClickableBehavior
+ *           disabled={props.disabled}
+ *           onClick={props.onClick}
+ *           tabIndex={0}
+ *        >
  *           {({hovered}, childrenProps) => (
  *               <RoundRect
  *                   textcolor="white"
@@ -292,13 +292,7 @@ class ClickableBehavior extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
     };
 
     this.handleMouseEnter = e => {
-      // When the left button is pressed already, we want it to be pressed
-      if (e.buttons === 1) {
-        this.dragging = true;
-        this.setState({
-          pressed: true
-        });
-      } else if (!this.waitingForClick) {
+      if (!this.waitingForClick) {
         this.setState({
           hovered: true
         });
@@ -307,7 +301,6 @@ class ClickableBehavior extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
 
     this.handleMouseLeave = () => {
       if (!this.waitingForClick) {
-        this.dragging = false;
         this.setState({
           hovered: false,
           pressed: false,
@@ -323,22 +316,12 @@ class ClickableBehavior extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
     };
 
     this.handleMouseUp = e => {
-      if (this.dragging) {
-        this.dragging = false;
-        this.handleClick(e);
-      }
-
       this.setState({
         pressed: false,
         focused: false
       });
     };
 
-    this.handleDragStart = e => {
-      this.dragging = true;
-      e.preventDefault();
-    };
-
     this.handleTouchStart = () => {
       this.setState({
         pressed: true
@@ -434,7 +417,6 @@ class ClickableBehavior extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
     this.state = startState;
     this.waitingForClick = false;
     this.enterClick = false;
-    this.dragging = false;
   }
 
   navigateOrReset(shouldNavigate) {
@@ -580,14 +562,14 @@ class ClickableBehavior extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
     const childrenProps = this.props.disabled ? { ...disabledHandlers,
       // Keep these handlers for keyboard accessibility.
       onFocus: this.handleFocus,
-      onBlur: this.handleBlur
+      onBlur: this.handleBlur,
+      tabIndex: this.props.tabIndex
     } : {
       onClick: this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
       onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
-      onDragStart: this.handleDragStart,
       onTouchStart: this.handleTouchStart,
       onTouchEnd: this.handleTouchEnd,
       onTouchCancel: this.handleTouchCancel,
@@ -595,9 +577,7 @@ class ClickableBehavior extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
       onKeyUp: this.handleKeyUp,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
-      // We set tabIndex to 0 so that users can tab to clickable
-      // things that aren't buttons or anchors.
-      tabIndex: 0
+      tabIndex: this.props.tabIndex
     }; // When the link is set to open in a new window, we want to set some
     // `rel` attributes. This is to ensure that the links we're sending folks
     // to can't hijack the existing page.  These defaults can be overriden
@@ -1136,19 +1116,16 @@ function _extends() {
   module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   }, module.exports.__esModule = true, module.exports["default"] = module.exports;
   return _extends.apply(this, arguments);
 }
-
 module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
 /***/ }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.3.3",
+  "version": "2.4.1",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",

package/src/components/__docs__/clickable-behavior.argtypes.js

@@ -14,6 +14,15 @@ export default {
             },
         },
     },
+    tabIndex: {
+        control: {type: "number"},
+        description: `Used to indicate the tab order of an element.
+            Use 0 to make an element focusable, and use -1 to make an
+            element non-focusable via keyboard navigation.`,
+        table: {
+            type: {summary: "number"},
+        },
+    },
     /**
      * States
      */

package/src/components/__docs__/clickable-behavior.stories.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
-import {View} from "@khanacademy/wonder-blocks-core";
+import {View, addStyle} from "@khanacademy/wonder-blocks-core";
 import Color from "@khanacademy/wonder-blocks-color";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 
@@ -72,12 +72,98 @@ Default.parameters = {
     },
 };
 
+export const WrappingButton: StoryComponentType = (args) => {
+    const ClickableBehavior = getClickableBehavior();
+    const StyledButton = addStyle("button");
+
+    return (
+        <ClickableBehavior {...args}>
+            {(state, childrenProps) => {
+                const {pressed, hovered, focused} = state;
+                return (
+                    <StyledButton
+                        style={[
+                            styles.clickable,
+                            styles.newButton,
+                            hovered && styles.hovered,
+                            focused && styles.focused,
+                            pressed && styles.pressed,
+                        ]}
+                        {...childrenProps}
+                    >
+                        This is an element wrapped with ClickableBehavior
+                    </StyledButton>
+                );
+            }}
+        </ClickableBehavior>
+    );
+};
+
+WrappingButton.parameters = {
+    chromatic: {
+        // we don't need screenshots because this story only displays the
+        // resting/default state.
+        disableSnapshot: true,
+    },
+    docs: {
+        storyDescription: `This is an example of a \`<ClickableBehavior>\`
+            wrapping a button. Since buttons have a built in tabIndex,
+            a tabIndex does not need to be added to \`<ClickableBehavior>\`
+            here.`,
+    },
+};
+
+export const WithTabIndex: StoryComponentType = () => {
+    const ClickableBehavior = getClickableBehavior();
+
+    return (
+        <ClickableBehavior role="button" tabIndex={0}>
+            {(state, childrenProps) => {
+                const {pressed, hovered, focused} = state;
+                return (
+                    <View
+                        style={[
+                            styles.clickable,
+                            hovered && styles.hovered,
+                            focused && styles.focused,
+                            pressed && styles.pressed,
+                        ]}
+                        {...childrenProps}
+                    >
+                        This is an element wrapped with ClickableBehavior
+                    </View>
+                );
+            }}
+        </ClickableBehavior>
+    );
+};
+
+WithTabIndex.parameters = {
+    chromatic: {
+        // we don't need screenshots because this story only displays the
+        // resting/default state.
+        disableSnapshot: true,
+    },
+    docs: {
+        storyDescription: `A \`<ClickableBehavior>\` element does not have
+            a tabIndex by default, as many elements it could wrap may have
+            their own built in tabIndex attribute, such as buttons. If this
+            is not the case, a tabIndex should be passed in using the
+            \`tabIndex\` prop.`,
+    },
+};
+
 const styles = StyleSheet.create({
     clickable: {
         cursor: "pointer",
         padding: Spacing.medium_16,
         textAlign: "center",
     },
+    newButton: {
+        border: "none",
+        backgroundColor: Color.white,
+        width: "100%",
+    },
     hovered: {
         textDecoration: "underline",
         backgroundColor: Color.blue,

package/src/components/__docs__/clickable.stories.js

@@ -66,6 +66,13 @@ export const Default: StoryComponentType = (args) => (
     </Clickable>
 );
 
+Default.args = {
+    onClick: () => {
+        // eslint-disable-next-line no-alert
+        alert("Click!");
+    },
+};
+
 export const Basic: StoryComponentType = () => (
     <View style={styles.centerText}>
         <Clickable

package/src/components/__tests__/clickable-behavior.test.js

@@ -64,7 +64,7 @@ describe("ClickableBehavior", () => {
         expect(onClick).toHaveBeenCalled();
     });
 
-    it("changes only hovered state on mouse enter/leave", () => {
+    it("changes hovered state on mouse enter/leave", () => {
         const onClick = jest.fn();
         render(
             <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
@@ -82,7 +82,7 @@ describe("ClickableBehavior", () => {
         expect(button).not.toHaveTextContent("hovered");
     });
 
-    it("changes only pressed state on mouse enter/leave while dragging", () => {
+    it("changes hovered state on mouse enter while dragging", () => {
         const onClick = jest.fn();
         render(
             <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
@@ -93,18 +93,34 @@ describe("ClickableBehavior", () => {
             </ClickableBehavior>,
         );
         const button = screen.getByRole("button");
+        expect(button).not.toHaveTextContent("hovered");
+        expect(button).not.toHaveTextContent("pressed");
+
+        fireEvent.mouseEnter(button, {buttons: 1});
+        expect(button).not.toHaveTextContent("pressed");
+        expect(button).toHaveTextContent("hovered");
+    });
+
+    it("changes pressed and hover states on mouse leave while dragging", () => {
+        const onClick = jest.fn();
+        render(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    const label = labelForState(state);
+                    return <button {...childrenProps}>{label}</button>;
+                }}
+            </ClickableBehavior>,
+        );
+        const button = screen.getByRole("button");
+        expect(button).not.toHaveTextContent("hovered");
         expect(button).not.toHaveTextContent("pressed");
 
         fireEvent.mouseDown(button);
-        fireEvent.dragStart(button);
-        fireEvent.mouseMove(button);
         expect(button).toHaveTextContent("pressed");
 
         fireEvent.mouseLeave(button);
+        expect(button).not.toHaveTextContent("hovered");
         expect(button).not.toHaveTextContent("pressed");
-
-        fireEvent.mouseEnter(button, {buttons: 1});
-        expect(button).toHaveTextContent("pressed");
     });
 
     it("changes pressed state on mouse down/up", () => {
@@ -282,7 +298,7 @@ describe("ClickableBehavior", () => {
         expect(button).not.toHaveTextContent("focused");
     });
 
-    test("tabIndex should be 0", () => {
+    test("should not have a tabIndex if one is not passed in", () => {
         // Arrange
         // Act
         render(
@@ -299,14 +315,18 @@ describe("ClickableBehavior", () => {
 
         // Assert
         const button = screen.getByTestId("test-button-1");
-        expect(button).toHaveAttribute("tabIndex", "0");
+        expect(button).not.toHaveAttribute("tabIndex");
     });
 
-    test("tabIndex should be 0 even for disabled components", () => {
+    test("should have the tabIndex that is passed in", () => {
         // Arrange
         // Act
         render(
-            <ClickableBehavior disabled={true} onClick={(e) => {}}>
+            <ClickableBehavior
+                disabled={false}
+                onClick={(e) => {}}
+                tabIndex={1}
+            >
                 {(state, childrenProps) => {
                     return (
                         <button data-test-id="test-button-2" {...childrenProps}>
@@ -319,7 +339,53 @@ describe("ClickableBehavior", () => {
 
         // Assert
         const button = screen.getByTestId("test-button-2");
-        expect(button).toHaveAttribute("tabIndex", "0");
+        expect(button).toHaveAttribute("tabIndex", "1");
+    });
+
+    test("should have the tabIndex that is passed in even if disabled", () => {
+        // Arrange
+        // Act
+        render(
+            <ClickableBehavior disabled={true} onClick={(e) => {}} tabIndex={1}>
+                {(state, childrenProps) => {
+                    return (
+                        <button data-test-id="test-button-3" {...childrenProps}>
+                            Label
+                        </button>
+                    );
+                }}
+            </ClickableBehavior>,
+        );
+
+        // Assert
+        const button = screen.getByTestId("test-button-3");
+        expect(button).toHaveAttribute("tabIndex", "1");
+    });
+
+    test("should make non-interactive children keyboard focusable if tabIndex 0 is passed", () => {
+        // Arrange
+        render(
+            <ClickableBehavior
+                disabled={false}
+                onClick={(e) => {}}
+                tabIndex={1}
+            >
+                {(state, childrenProps) => {
+                    return (
+                        <div data-test-id="test-div-1" {...childrenProps}>
+                            Label
+                        </div>
+                    );
+                }}
+            </ClickableBehavior>,
+        );
+
+        // Act
+        const button = screen.getByTestId("test-div-1");
+        userEvent.tab();
+
+        // Assert
+        expect(button).toHaveFocus();
     });
 
     it("does not change state if disabled", () => {
@@ -713,7 +779,17 @@ describe("ClickableBehavior", () => {
         expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
     });
 
-    it("calls onClick on mouseup when the mouse was dragging", () => {
+    // The following two tests involve click behavior when dragging.
+    // Here are some notable related actions that cannot be tested using
+    // existing jest/RTL events since these click types are handled
+    // by browsers but aren't registered as clicks by RTL/jest:
+    // 1. Mousedown in the button, drag within the button, and mouseup
+    //    in the button (mouse doesn't leave the button at any point).
+    //    This should result in a successful click.
+    // 2. Mouse down in the button, drag out of the button (don't let go),
+    //    drag back into the button, and mouseup inside the button.
+    //    This should result in a successful click.
+    it("does not call onClick on mouseup when the mouse presses inside and drags away", () => {
         const onClick = jest.fn();
         render(
             <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
@@ -725,19 +801,25 @@ describe("ClickableBehavior", () => {
 
         const button = screen.getByRole("button");
         fireEvent.mouseDown(button);
-        fireEvent.dragStart(button);
         fireEvent.mouseLeave(button);
         fireEvent.mouseUp(button);
         expect(onClick).toHaveBeenCalledTimes(0);
+    });
 
-        fireEvent.mouseDown(button);
-        fireEvent.dragStart(button);
-        fireEvent.mouseUp(button);
-        expect(onClick).toHaveBeenCalledTimes(1);
+    it("does not call onClick on mouseup when the mouse presses outside and drags in", () => {
+        const onClick = jest.fn();
+        render(
+            <ClickableBehavior disabled={false} onClick={(e) => onClick(e)}>
+                {(state, childrenProps) => {
+                    return <button {...childrenProps}>Label</button>;
+                }}
+            </ClickableBehavior>,
+        );
 
+        const button = screen.getByRole("button");
         fireEvent.mouseEnter(button, {buttons: 1});
         fireEvent.mouseUp(button);
-        expect(onClick).toHaveBeenCalledTimes(2);
+        expect(onClick).toHaveBeenCalledTimes(0);
     });
 
     it("doesn't trigger enter key when browser doesn't stop the click", () => {

package/src/components/clickable-behavior.js

@@ -88,6 +88,13 @@ type CommonProps = {|
 
     skipClientNav?: boolean,
 
+    /**
+     * Used to indicate the tab order of an element.
+     * Use 0 to make an element focusable, and use -1 to make an
+     * element non-focusable via keyboard navigation.
+     */
+    tabIndex?: number,
+
     /**
      * A function to be executed `onclick`.
      */
@@ -198,7 +205,6 @@ export type ChildrenProps = {|
     onMouseLeave: () => mixed,
     onMouseDown: () => mixed,
     onMouseUp: (e: SyntheticMouseEvent<>) => mixed,
-    onDragStart: (e: SyntheticMouseEvent<>) => mixed,
     onTouchStart: () => mixed,
     onTouchEnd: () => mixed,
     onTouchCancel: () => mixed,
@@ -206,7 +212,7 @@ export type ChildrenProps = {|
     onKeyUp: (e: SyntheticKeyboardEvent<>) => mixed,
     onFocus: (e: SyntheticFocusEvent<>) => mixed,
     onBlur: (e: SyntheticFocusEvent<>) => mixed,
-    tabIndex: number,
+    tabIndex?: number,
     rel?: string,
 |};
 
@@ -216,15 +222,11 @@ const disabledHandlers = {
     onMouseLeave: () => void 0,
     onMouseDown: () => void 0,
     onMouseUp: () => void 0,
-    onDragStart: () => void 0,
     onTouchStart: () => void 0,
     onTouchEnd: () => void 0,
     onTouchCancel: () => void 0,
     onKeyDown: () => void 0,
     onKeyUp: () => void 0,
-    // Clickable components should still be tabbable so they can
-    // be used as anchors.
-    tabIndex: 0,
 };
 
 const keyCodes = {
@@ -261,7 +263,7 @@ const startState: ClickableState = {
  * 3. Keyup (spacebar/enter) -> focus state
  *
  * Warning: The event handlers returned (onClick, onMouseEnter, onMouseLeave,
- * onMouseDown, onMouseUp, onDragStart, onTouchStart, onTouchEnd, onTouchCancel,
+ * onMouseDown, onMouseUp, onTouchStart, onTouchEnd, onTouchCancel,
  * onKeyDown, onKeyUp, onFocus, onBlur, tabIndex) should be passed on to the
  * component that has the ClickableBehavior. You cannot override these handlers
  * without potentially breaking the functionality of ClickableBehavior.
@@ -286,7 +288,11 @@ const startState: ClickableState = {
  *   const ClickableBehavior = getClickableBehavior();
  *
  *   return (
- *       <ClickableBehavior disabled={props.disabled} onClick={props.onClick}>
+ *       <ClickableBehavior
+ *           disabled={props.disabled}
+ *           onClick={props.onClick}
+ *           tabIndex={0}
+ *        >
  *           {({hovered}, childrenProps) => (
  *               <RoundRect
  *                   textcolor="white"
@@ -322,7 +328,6 @@ export default class ClickableBehavior extends React.Component<
 > {
     waitingForClick: boolean;
     enterClick: boolean;
-    dragging: boolean;
 
     static defaultProps: DefaultProps = {
         disabled: false,
@@ -348,7 +353,6 @@ export default class ClickableBehavior extends React.Component<
         this.state = startState;
         this.waitingForClick = false;
         this.enterClick = false;
-        this.dragging = false;
     }
 
     navigateOrReset(shouldNavigate: boolean) {
@@ -505,18 +509,13 @@ export default class ClickableBehavior extends React.Component<
     };
 
     handleMouseEnter: (e: SyntheticMouseEvent<>) => void = (e) => {
-        // When the left button is pressed already, we want it to be pressed
-        if (e.buttons === 1) {
-            this.dragging = true;
-            this.setState({pressed: true});
-        } else if (!this.waitingForClick) {
+        if (!this.waitingForClick) {
             this.setState({hovered: true});
         }
     };
 
     handleMouseLeave: () => void = () => {
         if (!this.waitingForClick) {
-            this.dragging = false;
             this.setState({hovered: false, pressed: false, focused: false});
         }
     };
@@ -526,18 +525,9 @@ export default class ClickableBehavior extends React.Component<
     };
 
     handleMouseUp: (e: SyntheticMouseEvent<>) => void = (e) => {
-        if (this.dragging) {
-            this.dragging = false;
-            this.handleClick(e);
-        }
         this.setState({pressed: false, focused: false});
     };
 
-    handleDragStart: (e: SyntheticMouseEvent<>) => void = (e) => {
-        this.dragging = true;
-        e.preventDefault();
-    };
-
     handleTouchStart: () => void = () => {
         this.setState({pressed: true});
     };
@@ -614,6 +604,7 @@ export default class ClickableBehavior extends React.Component<
                   // Keep these handlers for keyboard accessibility.
                   onFocus: this.handleFocus,
                   onBlur: this.handleBlur,
+                  tabIndex: this.props.tabIndex,
               }
             : {
                   onClick: this.handleClick,
@@ -621,7 +612,6 @@ export default class ClickableBehavior extends React.Component<
                   onMouseLeave: this.handleMouseLeave,
                   onMouseDown: this.handleMouseDown,
                   onMouseUp: this.handleMouseUp,
-                  onDragStart: this.handleDragStart,
                   onTouchStart: this.handleTouchStart,
                   onTouchEnd: this.handleTouchEnd,
                   onTouchCancel: this.handleTouchCancel,
@@ -629,9 +619,7 @@ export default class ClickableBehavior extends React.Component<
                   onKeyUp: this.handleKeyUp,
                   onFocus: this.handleFocus,
                   onBlur: this.handleBlur,
-                  // We set tabIndex to 0 so that users can tab to clickable
-                  // things that aren't buttons or anchors.
-                  tabIndex: 0,
+                  tabIndex: this.props.tabIndex,
               };
 
         // When the link is set to open in a new window, we want to set some