@khanacademy/wonder-blocks-clickable 2.2.1 → 2.2.2

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+# @khanacademy/wonder-blocks-clickable
+
+## 2.2.2
+### Patch Changes
+
+- 901bfe82: Change disabled tabindex from -1 to 0

package/dist/es/index.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import _extends from '@babel/runtime/helpers/extends';
-import { Component, createElement } from 'react';
+import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import { withRouter, Link } from 'react-router-dom';
 import { __RouterContext } from 'react-router';
@@ -52,7 +52,9 @@ const disabledHandlers = {
   onKeyUp: () => void 0,
   onFocus: () => void 0,
   onBlur: () => void 0,
-  tabIndex: -1
+  // Clickable components should still be tabbable so they can
+  // be used as anchors.
+  tabIndex: 0
 };
 const keyCodes = {
   enter: 13,
@@ -143,7 +145,7 @@ const startState = {
  * See https://reacttraining.com/react-router/web/guides/basic-components.
  */
 
-class ClickableBehavior extends Component {
+class ClickableBehavior extends React.Component {
   static getDerivedStateFromProps(props, state) {
     // If new props are disabled, reset the hovered/focused/pressed states
     if (props.disabled) {
@@ -574,7 +576,7 @@ const StyledLink = addStyle(Link);
  * ```
  */
 
-class Clickable extends Component {
+class Clickable extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -584,21 +586,21 @@ class Clickable extends Component {
       // needs it to refine this.props.href to a string.
 
       if (activeHref && useClient && this.props.href) {
-        return /*#__PURE__*/createElement(StyledLink, _extends({}, commonProps, {
+        return /*#__PURE__*/React.createElement(StyledLink, _extends({}, commonProps, {
           to: this.props.href,
           role: this.props.role,
           target: this.props.target || undefined,
           "aria-disabled": this.props.disabled ? "true" : undefined
         }), this.props.children(clickableState));
       } else if (activeHref && !useClient) {
-        return /*#__PURE__*/createElement(StyledAnchor, _extends({}, commonProps, {
+        return /*#__PURE__*/React.createElement(StyledAnchor, _extends({}, commonProps, {
           href: this.props.href,
           role: this.props.role,
           target: this.props.target || undefined,
           "aria-disabled": this.props.disabled ? "true" : undefined
         }), this.props.children(clickableState));
       } else {
-        return /*#__PURE__*/createElement(StyledButton, _extends({}, commonProps, {
+        return /*#__PURE__*/React.createElement(StyledButton, _extends({}, commonProps, {
           type: "button",
           disabled: this.props.disabled
         }), this.props.children(clickableState));
@@ -630,7 +632,7 @@ class Clickable extends Component {
     const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
 
     if (beforeNav) {
-      return /*#__PURE__*/createElement(ClickableBehavior, {
+      return /*#__PURE__*/React.createElement(ClickableBehavior, {
         href: href,
         onClick: onClick,
         beforeNav: beforeNav,
@@ -643,7 +645,7 @@ class Clickable extends Component {
         style: getStyle(state)
       }, childrenProps)));
     } else {
-      return /*#__PURE__*/createElement(ClickableBehavior, {
+      return /*#__PURE__*/React.createElement(ClickableBehavior, {
         href: href,
         onClick: onClick,
         safeWithNav: safeWithNav,
@@ -659,7 +661,7 @@ class Clickable extends Component {
   }
 
   render() {
-    return /*#__PURE__*/createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
   }
 
 } // Source:  https://gist.github.com/MoOx/9137295
@@ -709,5 +711,4 @@ const styles = StyleSheet.create({
   }
 });
 
-export default Clickable;
-export { ClickableBehavior, getClickableBehavior, isClientSideUrl };
+export { ClickableBehavior, Clickable as default, getClickableBehavior, isClientSideUrl };

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 11);
+/******/ 	return __webpack_require__(__webpack_require__.s = 10);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -166,7 +166,9 @@ const disabledHandlers = {
   onKeyUp: () => void 0,
   onFocus: () => void 0,
   onBlur: () => void 0,
-  tabIndex: -1
+  // Clickable components should still be tabbable so they can
+  // be used as anchors.
+  tabIndex: 0
 };
 const keyCodes = {
   enter: 13,
@@ -675,142 +677,459 @@ module.exports = require("@khanacademy/wonder-blocks-core");
 
 /***/ }),
 /* 6 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
+/***/ (function(module, exports) {
 
-"use strict";
-/* unused harmony export SemanticColor */
-/* unused harmony export fade */
-/* unused harmony export mix */
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(10);
-/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+module.exports =
+/******/
+function (modules) {
+  // webpackBootstrap
 
-/**
- * A color manipulation library useful for dynamically
- * mixing colors together.
- */
+  /******/
+  // The module cache
 
-const color6Regexp = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
-const color3Regexp = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i;
-const rgbaRegexp = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)$/i; // Parse a color in #abcdef, rgb(...), or rgba(...) form into an object
-// with r,g,b,a keys.
+  /******/
+  var installedModules = {};
+  /******/
 
-const parse = color => {
-  if (typeof color !== "string") {
-    throw new Error(`Failed to parse color: ${color}`);
-  }
+  /******/
+  // The require function
 
-  const color3Match = color.match(color3Regexp);
+  /******/
 
-  if (color3Match) {
-    return {
-      r: parseInt(`${color3Match[1]}${color3Match[1]}`, 16),
-      g: parseInt(`${color3Match[2]}${color3Match[2]}`, 16),
-      b: parseInt(`${color3Match[3]}${color3Match[3]}`, 16),
-      a: 1
-    };
-  }
+  function __webpack_require__(moduleId) {
+    /******/
 
-  const color6Match = color.match(color6Regexp);
+    /******/
+    // Check if module is in cache
+
+    /******/
+    if (installedModules[moduleId]) {
+      /******/
+      return installedModules[moduleId].exports;
+      /******/
+    }
+    /******/
+    // Create a new module (and put it into the cache)
+
+    /******/
 
-  if (color6Match) {
-    return {
-      r: parseInt(color6Match[1], 16),
-      g: parseInt(color6Match[2], 16),
-      b: parseInt(color6Match[3], 16),
-      a: 1
-    };
-  }
 
-  const rgbaMatch = color.match(rgbaRegexp);
+    var module = installedModules[moduleId] = {
+      /******/
+      i: moduleId,
+
+      /******/
+      l: false,
+
+      /******/
+      exports: {}
+      /******/
 
-  if (rgbaMatch) {
-    return {
-      r: parseFloat(rgbaMatch[1]),
-      g: parseFloat(rgbaMatch[2]),
-      b: parseFloat(rgbaMatch[3]),
-      a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
     };
+    /******/
+
+    /******/
+    // Execute the module function
+
+    /******/
+
+    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+    /******/
+
+    /******/
+    // Flag the module as loaded
+
+    /******/
+
+    module.l = true;
+    /******/
+
+    /******/
+    // Return the exports of the module
+
+    /******/
+
+    return module.exports;
+    /******/
   }
+  /******/
+
+  /******/
+
+  /******/
+  // expose the modules object (__webpack_modules__)
+
+  /******/
+
+
+  __webpack_require__.m = modules;
+  /******/
+
+  /******/
+  // expose the module cache
+
+  /******/
+
+  __webpack_require__.c = installedModules;
+  /******/
+
+  /******/
+  // define getter function for harmony exports
+
+  /******/
+
+  __webpack_require__.d = function (exports, name, getter) {
+    /******/
+    if (!__webpack_require__.o(exports, name)) {
+      /******/
+      Object.defineProperty(exports, name, {
+        enumerable: true,
+        get: getter
+      });
+      /******/
+    }
+    /******/
+
+  };
+  /******/
+
+  /******/
+  // define __esModule on exports
+
+  /******/
+
+
+  __webpack_require__.r = function (exports) {
+    /******/
+    if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+      /******/
+      Object.defineProperty(exports, Symbol.toStringTag, {
+        value: 'Module'
+      });
+      /******/
+    }
+    /******/
+
+
+    Object.defineProperty(exports, '__esModule', {
+      value: true
+    });
+    /******/
+  };
+  /******/
+
+  /******/
+  // create a fake namespace object
+
+  /******/
+  // mode & 1: value is a module id, require it
+
+  /******/
+  // mode & 2: merge all properties of value into the ns
+
+  /******/
+  // mode & 4: return value when already ns object
+
+  /******/
+  // mode & 8|1: behave like require
+
+  /******/
+
+
+  __webpack_require__.t = function (value, mode) {
+    /******/
+    if (mode & 1) value = __webpack_require__(value);
+    /******/
+
+    if (mode & 8) return value;
+    /******/
+
+    if (mode & 4 && typeof value === 'object' && value && value.__esModule) return value;
+    /******/
+
+    var ns = Object.create(null);
+    /******/
 
-  throw new Error(`Failed to parse color: ${color}`);
-}; // Stringify the color in an `rgba()` or `#abcdef` format.
+    __webpack_require__.r(ns);
+    /******/
 
 
-const format = color => {
-  const r = Math.round(color.r);
-  const g = Math.round(color.g);
-  const b = Math.round(color.b);
+    Object.defineProperty(ns, 'default', {
+      enumerable: true,
+      value: value
+    });
+    /******/
 
-  if (color.a === 1) {
-    const _s = c => {
-      const asString = c.toString(16);
-      return asString.length === 1 ? asString + asString : asString;
+    if (mode & 2 && typeof value != 'string') for (var key in value) __webpack_require__.d(ns, key, function (key) {
+      return value[key];
+    }.bind(null, key));
+    /******/
+
+    return ns;
+    /******/
+  };
+  /******/
+
+  /******/
+  // getDefaultExport function for compatibility with non-harmony modules
+
+  /******/
+
+
+  __webpack_require__.n = function (module) {
+    /******/
+    var getter = module && module.__esModule ?
+    /******/
+    function getDefault() {
+      return module['default'];
+    } :
+    /******/
+    function getModuleExports() {
+      return module;
     };
+    /******/
 
-    return `#${_s(r)}${_s(g)}${_s(b)}`;
-  } else {
-    return `rgba(${r},${g},${b},${color.a.toFixed(2)})`;
-  }
-}; // Adjust the alpha value of a color.
+    __webpack_require__.d(getter, 'a', getter);
+    /******/
 
 
-const fade = (color, percentage) => {
-  if (percentage < 0 || percentage > 1) {
-    throw new Error("Percentage must be between 0 and 1");
-  }
+    return getter;
+    /******/
+  };
+  /******/
+
+  /******/
+  // Object.prototype.hasOwnProperty.call
+
+  /******/
+
+
+  __webpack_require__.o = function (object, property) {
+    return Object.prototype.hasOwnProperty.call(object, property);
+  };
+  /******/
+
+  /******/
+  // __webpack_public_path__
+
+  /******/
+
+
+  __webpack_require__.p = "";
+  /******/
+
+  /******/
+
+  /******/
+  // Load entry module and return exports
 
-  const components = parse(color);
-  return format(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, components, {
-    a: components.a * percentage
-  }));
-}; // Mix a color into a background color, using the alpha channel of the base
-// color to determine the linear blend.
-
-
-const mix = (color, background) => {
-  const colorObj = parse(color);
-  const bgObj = parse(background);
-  return format({
-    r: colorObj.r * colorObj.a + bgObj.r * (1 - colorObj.a),
-    g: colorObj.g * colorObj.a + bgObj.g * (1 - colorObj.a),
-    b: colorObj.b * colorObj.a + bgObj.b * (1 - colorObj.a),
-    a: bgObj.a
+  /******/
+
+  return __webpack_require__(__webpack_require__.s = 1);
+  /******/
+}
+/************************************************************************/
+
+/******/
+([
+/* 0 */
+
+/***/
+function (module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+  /* harmony export (binding) */
+
+  __webpack_require__.d(__webpack_exports__, "a", function () {
+    return fade;
   });
-};
+  /* harmony export (binding) */
 
-const offBlack = "#21242c";
-const white = "#ffffff";
-const Color = {
-  // Product
-  blue: "#1865f2",
-  purple: "#9059ff",
-  green: "#00a60e",
-  gold: "#ffb100",
-  red: "#d92916",
-  // Neutral
-  offBlack,
-  offBlack64: fade(offBlack, 0.64),
-  offBlack50: fade(offBlack, 0.5),
-  offBlack32: fade(offBlack, 0.32),
-  offBlack16: fade(offBlack, 0.16),
-  offBlack8: fade(offBlack, 0.08),
-  offWhite: "#f7f8fa",
-  white,
-  white64: fade(white, 0.64),
-  white50: fade(white, 0.5),
-  // Brand
-  darkBlue: "#0a2a66",
-  teal: "#14bf96",
-  lightBlue: "#37c5fd",
-  pink: "#fa50ae"
-};
-const SemanticColor = {
-  controlDefault: Color.blue,
-  controlDestructive: Color.red
-};
-/* harmony default export */ __webpack_exports__["a"] = (Color);
+
+  __webpack_require__.d(__webpack_exports__, "b", function () {
+    return mix;
+  });
+  /**
+   * A color manipulation library useful for dynamically
+   * mixing colors together.
+   */
+
+
+  const color6Regexp = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i;
+  const color3Regexp = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/i;
+  const rgbaRegexp = /^rgba?\(\s*(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\s*\)$/i; // Parse a color in #abcdef, rgb(...), or rgba(...) form into an object
+  // with r,g,b,a keys.
+
+  const parse = color => {
+    if (typeof color !== "string") {
+      throw new Error(`Failed to parse color: ${color}`);
+    }
+
+    const color3Match = color.match(color3Regexp);
+
+    if (color3Match) {
+      return {
+        r: parseInt(`${color3Match[1]}${color3Match[1]}`, 16),
+        g: parseInt(`${color3Match[2]}${color3Match[2]}`, 16),
+        b: parseInt(`${color3Match[3]}${color3Match[3]}`, 16),
+        a: 1
+      };
+    }
+
+    const color6Match = color.match(color6Regexp);
+
+    if (color6Match) {
+      return {
+        r: parseInt(color6Match[1], 16),
+        g: parseInt(color6Match[2], 16),
+        b: parseInt(color6Match[3], 16),
+        a: 1
+      };
+    }
+
+    const rgbaMatch = color.match(rgbaRegexp);
+
+    if (rgbaMatch) {
+      return {
+        r: parseFloat(rgbaMatch[1]),
+        g: parseFloat(rgbaMatch[2]),
+        b: parseFloat(rgbaMatch[3]),
+        a: rgbaMatch[4] ? parseFloat(rgbaMatch[4]) : 1
+      };
+    }
+
+    throw new Error(`Failed to parse color: ${color}`);
+  }; // Stringify the color in an `rgba()` or `#abcdef` format.
+
+
+  const format = color => {
+    const r = Math.round(color.r);
+    const g = Math.round(color.g);
+    const b = Math.round(color.b);
+
+    if (color.a === 1) {
+      const _s = c => {
+        const asString = c.toString(16);
+        return asString.length === 1 ? asString + asString : asString;
+      };
+
+      return `#${_s(r)}${_s(g)}${_s(b)}`;
+    } else {
+      return `rgba(${r},${g},${b},${color.a.toFixed(2)})`;
+    }
+  }; // Adjust the alpha value of a color.
 
 
+  const fade = (color, percentage) => {
+    if (percentage < 0 || percentage > 1) {
+      throw new Error("Percentage must be between 0 and 1");
+    }
+
+    const components = parse(color);
+    return format({ ...components,
+      a: components.a * percentage
+    });
+  }; // Mix a color into a background color, using the alpha channel of the base
+  // color to determine the linear blend.
+
+
+  const mix = (color, background) => {
+    const colorObj = parse(color);
+    const bgObj = parse(background);
+    return format({
+      r: colorObj.r * colorObj.a + bgObj.r * (1 - colorObj.a),
+      g: colorObj.g * colorObj.a + bgObj.g * (1 - colorObj.a),
+      b: colorObj.b * colorObj.a + bgObj.b * (1 - colorObj.a),
+      a: bgObj.a
+    });
+  };
+  /***/
+
+},
+/* 1 */
+
+/***/
+function (module, __webpack_exports__, __webpack_require__) {
+  "use strict";
+
+  __webpack_require__.r(__webpack_exports__);
+  /* harmony export (binding) */
+
+
+  __webpack_require__.d(__webpack_exports__, "default", function () {
+    return Color;
+  });
+  /* harmony export (binding) */
+
+
+  __webpack_require__.d(__webpack_exports__, "SemanticColor", function () {
+    return SemanticColor;
+  });
+  /* harmony import */
+
+
+  var _util_utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
+  /* harmony reexport (safe) */
+
+
+  __webpack_require__.d(__webpack_exports__, "mix", function () {
+    return _util_utils_js__WEBPACK_IMPORTED_MODULE_0__["b"];
+  });
+  /* harmony reexport (safe) */
+
+
+  __webpack_require__.d(__webpack_exports__, "fade", function () {
+    return _util_utils_js__WEBPACK_IMPORTED_MODULE_0__["a"];
+  });
+
+  const offBlack = "#21242c";
+  const white = "#ffffff";
+  const Color = {
+    // Product
+    blue: "#1865f2",
+    purple: "#9059ff",
+    green: "#00a60e",
+    gold: "#ffb100",
+    red: "#d92916",
+    // Neutral
+    offBlack,
+    offBlack64: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
+    /* fade */
+    "a"])(offBlack, 0.64),
+    offBlack50: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
+    /* fade */
+    "a"])(offBlack, 0.5),
+    offBlack32: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
+    /* fade */
+    "a"])(offBlack, 0.32),
+    offBlack16: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
+    /* fade */
+    "a"])(offBlack, 0.16),
+    offBlack8: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
+    /* fade */
+    "a"])(offBlack, 0.08),
+    offWhite: "#f7f8fa",
+    white,
+    white64: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
+    /* fade */
+    "a"])(white, 0.64),
+    white50: Object(_util_utils_js__WEBPACK_IMPORTED_MODULE_0__[
+    /* fade */
+    "a"])(white, 0.5),
+    // Brand
+    darkBlue: "#0a2a66",
+    teal: "#14bf96",
+    lightBlue: "#37c5fd",
+    pink: "#fa50ae"
+  };
+  const SemanticColor = {
+    controlDefault: Color.blue,
+    controlDestructive: Color.red
+  };
+  /***/
+}
+/******/
+]);
+
 /***/ }),
 /* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -828,6 +1147,7 @@ const SemanticColor = {
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(6);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var _util_get_clickable_behavior_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
 /* harmony import */ var _util_is_client_side_url_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(1);
 function _extends() { _extends = Object.assign || 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; }; return _extends.apply(this, arguments); }
@@ -996,10 +1316,10 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
     cursor: "pointer"
   },
   focused: {
-    outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].blue}`
+    outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.blue}`
   },
   focusedLight: {
-    outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].white}`
+    outline: `solid 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default.a.white}`
   }
 });
 
@@ -1017,32 +1337,6 @@ module.exports = require("react-router");
 
 /***/ }),
 /* 10 */
-/***/ (function(module, exports) {
-
-function _extends() {
-  module.exports = _extends = Object.assign || 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["default"] = module.exports, module.exports.__esModule = true;
-  return _extends.apply(this, arguments);
-}
-
-module.exports = _extends;
-module.exports["default"] = module.exports, module.exports.__esModule = true;
-
-/***/ }),
-/* 11 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -27,6 +27,5 @@
   },
   "devDependencies": {
     "wb-dev-build-settings": "^0.2.0"
-  },
-  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
+  }
 }

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

@@ -1,8 +1,10 @@
 /* eslint-disable max-lines */
 // @flow
 import * as React from "react";
+import {render, screen} from "@testing-library/react";
 import {MemoryRouter, Switch, Route} from "react-router-dom";
 import {mount, shallow} from "enzyme";
+import "jest-enzyme";
 
 import getClickableBehavior from "../../util/get-clickable-behavior.js";
 import ClickableBehavior from "../clickable-behavior.js";
@@ -275,6 +277,46 @@ describe("ClickableBehavior", () => {
         expect(button.state("focused")).toEqual(false);
     });
 
+    test("tabIndex should be 0", () => {
+        // Arrange
+        // Act
+        render(
+            <ClickableBehavior disabled={false} onClick={(e) => {}}>
+                {(state, childrenProps) => {
+                    return (
+                        <button data-test-id="test-button-1" {...childrenProps}>
+                            Label
+                        </button>
+                    );
+                }}
+            </ClickableBehavior>,
+        );
+
+        // Assert
+        const button = screen.getByTestId("test-button-1");
+        expect(button).toHaveAttribute("tabIndex", "0");
+    });
+
+    test("tabIndex should be 0 even for disabled components", () => {
+        // Arrange
+        // Act
+        render(
+            <ClickableBehavior disabled={true} onClick={(e) => {}}>
+                {(state, childrenProps) => {
+                    return (
+                        <button data-test-id="test-button-2" {...childrenProps}>
+                            Label
+                        </button>
+                    );
+                }}
+            </ClickableBehavior>,
+        );
+
+        // Assert
+        const button = screen.getByTestId("test-button-2");
+        expect(button).toHaveAttribute("tabIndex", "0");
+    });
+
     it("does not change state if disabled", () => {
         const onClick = jest.fn();
         const button = shallow(

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

@@ -2,6 +2,7 @@
 import * as React from "react";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import Clickable from "../clickable.js";

package/src/components/clickable-behavior.js

@@ -223,7 +223,9 @@ const disabledHandlers = {
     onKeyUp: () => void 0,
     onFocus: () => void 0,
     onBlur: () => void 0,
-    tabIndex: -1,
+    // Clickable components should still be tabbable so they can
+    // be used as anchors.
+    tabIndex: 0,
 };
 
 const keyCodes = {

package/src/components/clickable.stories.js

@@ -15,7 +15,7 @@ export default {
     title: "Navigation/Clickable",
 };
 
-export const basic: StoryComponentType = () => (
+export const Basic: StoryComponentType = () => (
     <View>
         <View style={styles.centerText}>
             <Clickable
@@ -56,7 +56,7 @@ export const basic: StoryComponentType = () => (
     </View>
 );
 
-export const keyboardNavigation: StoryComponentType = () => (
+export const KeyboardNavigation: StoryComponentType = () => (
     <View>
         <Clickable
             href="https://www.khanacademy.org/about/tos"
@@ -77,14 +77,14 @@ export const keyboardNavigation: StoryComponentType = () => (
     </View>
 );
 
-keyboardNavigation.parameters = {
+KeyboardNavigation.parameters = {
     chromatic: {
         // we don't need screenshots because this story only tests behavior.
         disableSnapshot: true,
     },
 };
 
-export const keyboardNavigationTab: StoryComponentType = () => (
+export const KeyboardNavigationTab: StoryComponentType = () => (
     <View>
         <Clickable role="tab" aria-controls="panel-1" id="tab-1">
             {({hovered, focused, pressed}) => (

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.