@khanacademy/wonder-blocks-clickable 2.2.0 → 2.2.4

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# @khanacademy/wonder-blocks-clickable
+
+## 2.2.4
+
+### Patch Changes
+
+-   166ecc97: Use `aria-disabled` instead of disabled, fix focused + disabled styles.
+
+## 2.2.3
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.2.1
+
+## 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';
@@ -50,9 +50,9 @@ const disabledHandlers = {
   onTouchCancel: () => void 0,
   onKeyDown: () => void 0,
   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,11 +143,14 @@ 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 new props are disabled, reset the hovered/pressed states
     if (props.disabled) {
-      return startState;
+      // Keep the focused state for enabling keyboard navigation.
+      return _extends({}, startState, {
+        focused: state.focused
+      });
     } else {
       // Cannot return undefined
       return null;
@@ -461,7 +464,11 @@ class ClickableBehavior extends Component {
   }
 
   render() {
-    const childrenProps = this.props.disabled ? disabledHandlers : {
+    const childrenProps = this.props.disabled ? _extends({}, disabledHandlers, {
+      // Keep these handlers for keyboard accessibility.
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    }) : {
       onClick: this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
@@ -574,7 +581,7 @@ const StyledLink = addStyle(Link);
  * ```
  */
 
-class Clickable extends Component {
+class Clickable extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -584,23 +591,23 @@ 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
+          "aria-disabled": this.props.disabled
         }), this.props.children(clickableState));
       }
     };
@@ -630,7 +637,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 +650,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 +666,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 +716,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);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -164,9 +164,9 @@ const disabledHandlers = {
   onTouchCancel: () => void 0,
   onKeyDown: () => void 0,
   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,
@@ -259,9 +259,12 @@ const startState = {
 
 class ClickableBehavior extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   static getDerivedStateFromProps(props, state) {
-    // If new props are disabled, reset the hovered/focused/pressed states
+    // If new props are disabled, reset the hovered/pressed states
     if (props.disabled) {
-      return startState;
+      // Keep the focused state for enabling keyboard navigation.
+      return { ...startState,
+        focused: state.focused
+      };
     } else {
       // Cannot return undefined
       return null;
@@ -575,7 +578,11 @@ class ClickableBehavior extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
   }
 
   render() {
-    const childrenProps = this.props.disabled ? disabledHandlers : {
+    const childrenProps = this.props.disabled ? { ...disabledHandlers,
+      // Keep these handlers for keyboard accessibility.
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    } : {
       onClick: this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
@@ -675,142 +682,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 (color6Match) {
-    return {
-      r: parseInt(color6Match[1], 16),
-      g: parseInt(color6Match[2], 16),
-      b: parseInt(color6Match[3], 16),
-      a: 1
-    };
-  }
+    /******/
+    if (installedModules[moduleId]) {
+      /******/
+      return installedModules[moduleId].exports;
+      /******/
+    }
+    /******/
+    // Create a new module (and put it into the cache)
 
-  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__)
+
+  /******/
 
-  throw new Error(`Failed to parse color: ${color}`);
-}; // Stringify the color in an `rgba()` or `#abcdef` format.
 
+  __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
+      });
+      /******/
+    }
+    /******/
+
+  };
+  /******/
 
-const format = color => {
-  const r = Math.round(color.r);
-  const g = Math.round(color.g);
-  const b = Math.round(color.b);
+  /******/
+  // define __esModule on exports
 
-  if (color.a === 1) {
-    const _s = c => {
-      const asString = c.toString(16);
-      return asString.length === 1 ? asString + asString : asString;
+  /******/
+
+
+  __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);
+    /******/
+
+    __webpack_require__.r(ns);
+    /******/
+
+
+    Object.defineProperty(ns, 'default', {
+      enumerable: true,
+      value: value
+    });
+    /******/
+
+    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 = "";
+  /******/
+
+  /******/
 
-  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
+  /******/
+  // Load entry module and return exports
+
+  /******/
+
+  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 +1152,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); }
@@ -894,7 +1219,7 @@ class Clickable extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       } else {
         return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledButton, _extends({}, commonProps, {
           type: "button",
-          disabled: this.props.disabled
+          "aria-disabled": this.props.disabled
         }), this.props.children(clickableState));
       }
     };
@@ -996,10 +1321,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 +1342,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.0",
+  "version": "2.2.4",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -15,8 +15,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-core": "^3.2.0"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-core": "^4.2.1"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -26,7 +26,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
-  },
-  "gitHead": "b6193f70c73e70fbaf76bc688dc69a47fb1d0ef3"
+    "wb-dev-build-settings": "^0.3.0"
+  }
 }

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -21,9 +21,9 @@ exports[`wonder-blocks-clickable example 1 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     aria-label=""
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -128,9 +128,9 @@ exports[`wonder-blocks-clickable example 2 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     aria-label=""
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}

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";
@@ -22,8 +24,9 @@ const wait = (delay: number = 0) =>
 describe("ClickableBehavior", () => {
     beforeEach(() => {
         // Note: window.location.assign and window.open need mock functions in
-        // the testing environment.
-        window.location.assign = jest.fn();
+        // the testing environment
+        delete window.location;
+        window.location = {assign: jest.fn()};
         window.open = jest.fn();
     });
 
@@ -274,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(
@@ -335,7 +378,7 @@ describe("ClickableBehavior", () => {
         expect(button.state("pressed")).toEqual(false);
 
         button.simulate("focus");
-        expect(button.state("focused")).toEqual(false);
+        expect(button.state("focused")).toEqual(true);
 
         const anchor = shallow(
             <ClickableBehavior
@@ -421,7 +464,7 @@ describe("ClickableBehavior", () => {
 
         expect(button.state("hovered")).toEqual(false);
         expect(button.state("pressed")).toEqual(false);
-        expect(button.state("focused")).toEqual(false);
+        expect(button.state("focused")).toEqual(true);
     });
 
     describe("full page load navigation", () => {
@@ -566,6 +609,7 @@ describe("ClickableBehavior", () => {
             const button = wrapper.find("#test-button").first();
             button.simulate("click", {
                 preventDefault() {
+                    // $FlowIgnore[object-this-reference]
                     this.defaultPrevented = true;
                 },
             });
@@ -1052,6 +1096,7 @@ describe("ClickableBehavior", () => {
             const button = wrapper.find("#test-button").first();
             button.simulate("click", {
                 preventDefault() {
+                    // $FlowIgnore[object-this-reference]
                     this.defaultPrevented = true;
                 },
             });

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

@@ -2,6 +2,9 @@
 import * as React from "react";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 import {mount} from "enzyme";
+import "jest-enzyme";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import Clickable from "../clickable.js";
@@ -13,6 +16,11 @@ const wait = (delay: number = 0) =>
     });
 
 describe("Clickable", () => {
+    beforeEach(() => {
+        delete window.location;
+        window.location = {assign: jest.fn()};
+    });
+
     test("client-side navigation", () => {
         // Arrange
         const wrapper = mount(
@@ -129,8 +137,6 @@ describe("Clickable", () => {
 
     test("should navigate to a specific link using the keyboard", () => {
         // Arrange
-        window.location.assign = jest.fn();
-
         const wrapper = mount(
             <Clickable testId="button" href="/foo" skipClientNav={true}>
                 {(eventState) => <h1>Click Me!</h1>}
@@ -276,7 +282,6 @@ describe("Clickable", () => {
 
     test("safeWithNav with skipClientNav=true waits for promise resolution", async () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const wrapper = mount(
             <MemoryRouter>
                 <div>
@@ -309,7 +314,6 @@ describe("Clickable", () => {
 
     test("beforeNav resolution and safeWithNav with skipClientNav=true waits for promise resolution", async () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const wrapper = mount(
             <MemoryRouter>
                 <div>
@@ -336,8 +340,6 @@ describe("Clickable", () => {
         buttonWrapper.simulate("click", {button: 0});
         await wait(0);
         buttonWrapper.update();
-        await wait(0);
-        buttonWrapper.update();
 
         // Assert
         expect(window.location.assign).toHaveBeenCalledWith("/foo");
@@ -345,7 +347,6 @@ describe("Clickable", () => {
 
     test("safeWithNav with skipClientNav=true waits for promise rejection", async () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const wrapper = mount(
             <MemoryRouter>
                 <div>
@@ -376,9 +377,8 @@ describe("Clickable", () => {
         expect(window.location.assign).toHaveBeenCalledWith("/foo");
     });
 
-    test("safeWithNav with skipClientNav=false calls safeWithNav but doesn't wait to navigate", async () => {
+    test("safeWithNav with skipClientNav=false calls safeWithNav but doesn't wait to navigate", () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const safeWithNavMock = jest.fn();
         const wrapper = mount(
             <MemoryRouter>
@@ -406,12 +406,16 @@ describe("Clickable", () => {
 
         // Assert
         expect(safeWithNavMock).toHaveBeenCalled();
-        expect(window.location.assign).toHaveBeenCalledWith("/foo");
+        expect(wrapper).toIncludeText(
+            "Hello, world!" /*client side nav to /foo*/,
+        );
+        expect(window.location.assign).not.toHaveBeenCalledWith(
+            "/foo" /*not a full page nav*/,
+        );
     });
 
     test("safeWithNav with beforeNav resolution and skipClientNav=false calls safeWithNav but doesn't wait to navigate", async () => {
         // Arrange
-        jest.spyOn(window.location, "assign");
         const safeWithNavMock = jest.fn();
         const wrapper = mount(
             <MemoryRouter>
@@ -442,7 +446,53 @@ describe("Clickable", () => {
 
         // Assert
         expect(safeWithNavMock).toHaveBeenCalled();
-        expect(window.location.assign).toHaveBeenCalledWith("/foo");
+        expect(wrapper).toIncludeText(
+            "Hello, world!" /*client side nav to /foo*/,
+        );
+        expect(window.location.assign).not.toHaveBeenCalledWith(
+            "/foo" /*not a full page nav*/,
+        );
+    });
+
+    test("should add aria-disabled if disabled is set", () => {
+        // Arrange
+
+        // Act
+        render(
+            <Clickable testId="clickable-button" disabled={true}>
+                {(eventState) => <h1>Click Me!</h1>}
+            </Clickable>,
+        );
+
+        const button = screen.getByTestId("clickable-button");
+
+        // Assert
+        expect(button).toHaveAttribute("aria-disabled", "true");
+    });
+
+    test("allow keyboard navigation when disabled is set", () => {
+        // Arrange
+        render(
+            <div>
+                <button>First focusable button</button>
+                <Clickable testId="clickable-button" disabled={true}>
+                    {(eventState) => <h1>Click Me!</h1>}
+                </Clickable>
+            </div>,
+        );
+
+        // Act
+        // RTL's focuses on `document.body` by default, so we need to focus on
+        // the first button
+        userEvent.tab();
+
+        // Then we focus on our Clickable button.
+        userEvent.tab();
+
+        const button = screen.getByTestId("clickable-button");
+
+        // Assert
+        expect(button).toHaveFocus();
     });
 
     describe("raw events", () => {

package/src/components/clickable-behavior.js

@@ -221,9 +221,9 @@ const disabledHandlers = {
     onTouchCancel: () => void 0,
     onKeyDown: () => void 0,
     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 = {
@@ -332,9 +332,10 @@ export default class ClickableBehavior extends React.Component<
         props: Props,
         state: ClickableState,
     ): ?Partial<ClickableState> {
-        // If new props are disabled, reset the hovered/focused/pressed states
+        // If new props are disabled, reset the hovered/pressed states
         if (props.disabled) {
-            return startState;
+            // Keep the focused state for enabling keyboard navigation.
+            return {...startState, focused: state.focused};
         } else {
             // Cannot return undefined
             return null;
@@ -558,9 +559,8 @@ export default class ClickableBehavior extends React.Component<
         }
 
         const keyCode = e.which || e.keyCode;
-        const {triggerOnEnter, triggerOnSpace} = getAppropriateTriggersForRole(
-            role,
-        );
+        const {triggerOnEnter, triggerOnSpace} =
+            getAppropriateTriggersForRole(role);
         if (
             (triggerOnEnter && keyCode === keyCodes.enter) ||
             (triggerOnSpace && keyCode === keyCodes.space)
@@ -585,9 +585,8 @@ export default class ClickableBehavior extends React.Component<
         }
 
         const keyCode = e.which || e.keyCode;
-        const {triggerOnEnter, triggerOnSpace} = getAppropriateTriggersForRole(
-            role,
-        );
+        const {triggerOnEnter, triggerOnSpace} =
+            getAppropriateTriggersForRole(role);
         if (
             (triggerOnEnter && keyCode === keyCodes.enter) ||
             (triggerOnSpace && keyCode === keyCodes.space)
@@ -610,7 +609,12 @@ export default class ClickableBehavior extends React.Component<
 
     render(): React.Node {
         const childrenProps: ChildrenProps = this.props.disabled
-            ? disabledHandlers
+            ? {
+                  ...disabledHandlers,
+                  // Keep these handlers for keyboard accessibility.
+                  onFocus: this.handleFocus,
+                  onBlur: this.handleBlur,
+              }
             : {
                   onClick: this.handleClick,
                   onMouseEnter: this.handleMouseEnter,

package/src/components/clickable.js

@@ -252,7 +252,7 @@ export default class Clickable extends React.Component<Props> {
                 <StyledButton
                     {...commonProps}
                     type="button"
-                    disabled={this.props.disabled}
+                    aria-disabled={this.props.disabled}
                 >
                     {this.props.children(clickableState)}
                 </StyledButton>

package/src/components/clickable.md

@@ -145,6 +145,13 @@ const styles = StyleSheet.create({
 </MemoryRouter>
 ```
 
+### Running callbacks on navigation
+
+When using the `href` prop, the `onClick`, `beforeNav`, and `safeWithNav` props
+can be used to run callbacks when navigating to the new URL. Which prop to use
+depends on the use case. See the [Button](#section-button) documentation for
+details.
+
 ### Navigating with the Keyboard
 
 Clickable adds support to keyboard navigation. This way, your components are

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.