@khanacademy/wonder-blocks-clickable 2.2.3 → 2.2.6

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 2.2.6
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.3.1
+
+## 2.2.5
+
+### Patch Changes
+
+-   Updated dependencies [246a921d]
+    -   @khanacademy/wonder-blocks-core@4.3.0
+
+## 2.2.4
+
+### Patch Changes
+
+-   166ecc97: Use `aria-disabled` instead of disabled, fix focused + disabled styles.
+
 ## 2.2.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -9,13 +9,11 @@ import Color from '@khanacademy/wonder-blocks-color';
 
 const getAppropriateTriggersForRole = role => {
   switch (role) {
-    // Triggers on ENTER, but not SPACE
     case "link":
       return {
         triggerOnEnter: true,
         triggerOnSpace: false
       };
-    // Triggers on SPACE, but not ENTER
 
     case "checkbox":
     case "radio":
@@ -25,7 +23,6 @@ const getAppropriateTriggersForRole = role => {
         triggerOnEnter: false,
         triggerOnSpace: true
       };
-    // Triggers on both ENTER and SPACE
 
     case "button":
     case "menuitem":
@@ -50,10 +47,6 @@ const disabledHandlers = {
   onTouchCancel: () => void 0,
   onKeyDown: () => void 0,
   onKeyUp: () => void 0,
-  onFocus: () => void 0,
-  onBlur: () => void 0,
-  // Clickable components should still be tabbable so they can
-  // be used as anchors.
   tabIndex: 0
 };
 const keyCodes = {
@@ -66,92 +59,13 @@ const startState = {
   pressed: false,
   waiting: false
 };
-/**
- * Add hover, focus, and active status updates to a clickable component.
- *
- * Via mouse:
- *
- * 1. Hover over button -> hover state
- * 2. Mouse down -> active state
- * 3. Mouse up -> default state
- * 4. Press tab -> focus state
- *
- * Via touch:
- *
- * 1. Touch down -> press state
- * 2. Touch up -> default state
- *
- * Via keyboard:
- *
- * 1. Tab to focus -> focus state
- * 2. Keydown (spacebar/enter) -> active state
- * 3. Keyup (spacebar/enter) -> focus state
- *
- * Warning: The event handlers returned (onClick, onMouseEnter, onMouseLeave,
- * onMouseDown, onMouseUp, onDragStart, 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.
- *
- * There are internal props triggerOnEnter and triggerOnSpace that can be set
- * to false if one of those keys shouldn't count as a click on this component.
- * Be careful about setting those to false -- make certain that the component
- * shouldn't process that key.
- *
- * See [this document](https://docs.google.com/document/d/1DG5Rg2f0cawIL5R8UqnPQpd7pbdObk8OyjO5ryYQmBM/edit#)
- * for a more thorough explanation of expected behaviors and potential cavaets.
- *
- * `ClickableBehavior` accepts a function as `children` which is passed state
- * and an object containing event handlers and some other props. The `children`
- * function should return a clickable React Element of some sort.
- *
- * Example:
- *
- * ```js
- * class MyClickableComponent extends React.Component<Props> {
- *     render(): React.Node {
- *         const ClickableBehavior = getClickableBehavior();
- *         return <ClickableBehavior
- *             disabled={this.props.disabled}
- *             onClick={this.props.onClick}
- *         >
- *             {({hovered}, childrenProps) =>
- *                 <RoundRect
- *                      textcolor='white'
- *                      backgroundColor={hovered ? 'red' : 'blue'}}
- *                      {...childrenProps}
- *                 >
- *                      {this.props.children}
- *                 </RoundRect>
- *             }
- *         </ClickableBehavior>
- *     }
- * }
- * ```
- *
- * This follows a pattern called [Function as Child Components]
- * (https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9).
- *
- * WARNING: Do not use this component directly, use getClickableBehavior
- * instead. getClickableBehavior takes three arguments (href, directtNav, and
- * router) and returns either the default ClickableBehavior or a react-router
- * aware version.
- *
- * The react-router aware version is returned if `router` is a react-router-dom
- * router, `skipClientNav` is not `true`, and `href` is an internal URL.
- *
- * The `router` can be accessed via __RouterContext (imported from 'react-router')
- * from a component rendered as a descendant of a BrowserRouter.
- * See https://reacttraining.com/react-router/web/guides/basic-components.
- */
-
 class ClickableBehavior extends React.Component {
   static getDerivedStateFromProps(props, state) {
-    // If new props are disabled, reset the hovered/focused/pressed states
     if (props.disabled) {
-      return startState;
+      return _extends({}, startState, {
+        focused: state.focused
+      });
     } else {
-      // Cannot return undefined
       return null;
     }
   }
@@ -178,7 +92,6 @@ class ClickableBehavior extends React.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({
@@ -262,17 +175,11 @@ class ClickableBehavior extends React.Component {
       } = getAppropriateTriggersForRole(role);
 
       if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
-        // This prevents space from scrolling down. It also prevents the
-        // space and enter keys from triggering click events. We manually
-        // call the supplied onClick and handle potential navigation in
-        // handleKeyUp instead.
         e.preventDefault();
         this.setState({
           pressed: true
         });
       } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
-        // If the component isn't supposed to trigger on enter, we have to
-        // keep track of the enter keydown to negate the onClick callback
         this.enterClick = true;
       }
     };
@@ -344,8 +251,7 @@ class ClickableBehavior extends React.Component {
             waiting: false
           });
         } else {
-          window.location.assign(href); // We don't bother clearing the waiting state, the full page
-          // load navigation will do that for us by loading a new page.
+          window.location.assign(href);
         }
       }
     } else {
@@ -362,15 +268,11 @@ class ClickableBehavior extends React.Component {
     } = this.props;
 
     if (history && !skipClientNav || this.props.target === "_blank") {
-      // client-side nav
       safeWithNav();
       this.navigateOrReset(shouldNavigate);
       return Promise.resolve();
     } else {
       if (!this.state.waiting) {
-        // We only show the spinner for safeWithNav when doing
-        // a full page load navigation since since the spinner is
-        // indicating that we're waiting for navigation to occur.
         this.setState({
           waiting: true
         });
@@ -378,19 +280,13 @@ class ClickableBehavior extends React.Component {
 
       return safeWithNav().then(() => {
         if (!this.state.waiting) {
-          // We only show the spinner for safeWithNav when doing
-          // a full page load navigation since since the spinner is
-          // indicating that we're waiting for navigation to occur.
           this.setState({
             waiting: true
           });
         }
 
         return;
-      }).catch(error => {// We ignore the error here so that we always
-        // navigate when using safeWithNav regardless of
-        // whether we're doing a client-side nav or not.
-      }).finally(() => {
+      }).catch(error => {}).finally(() => {
         this.navigateOrReset(shouldNavigate);
       });
     }
@@ -409,9 +305,7 @@ class ClickableBehavior extends React.Component {
 
     if (onClick) {
       onClick(e);
-    } // If onClick() has called e.preventDefault() then we shouldn't
-    // navigate.
-
+    }
 
     if (e.defaultPrevented) {
       shouldNavigate = false;
@@ -425,20 +319,12 @@ class ClickableBehavior extends React.Component {
 
       while (target) {
         if (target instanceof window.HTMLFormElement) {
-          // This event must be marked as cancelable otherwise calling
-          // e.preventDefault() on it won't do anything in Firefox.
-          // Chrome and Safari allow calling e.preventDefault() on
-          // non-cancelable events, but really they shouldn't.
           const event = new window.Event("submit", {
             cancelable: true
           });
           target.dispatchEvent(event);
           break;
-        } // All events should be typed as SyntheticEvent<HTMLElement>.
-        // Updating all of the places will take some time so I'll do
-        // this later
-        // $FlowFixMe[prop-missing]
-
+        }
 
         target = target.parentElement;
       }
@@ -463,7 +349,10 @@ class ClickableBehavior extends React.Component {
   }
 
   render() {
-    const childrenProps = this.props.disabled ? disabledHandlers : {
+    const childrenProps = this.props.disabled ? _extends({}, disabledHandlers, {
+      onFocus: this.handleFocus,
+      onBlur: this.handleBlur
+    }) : {
       onClick: this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       onMouseLeave: this.handleMouseLeave,
@@ -477,15 +366,8 @@ 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
-    }; // 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
-    // by passing in a different value for the `rel` prop.
-    // More info: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
-
+    };
     childrenProps.rel = this.props.rel || (this.props.target === "_blank" ? "noopener noreferrer" : undefined);
     const {
       children
@@ -498,12 +380,6 @@ ClickableBehavior.defaultProps = {
   disabled: false
 };
 
-/**
- * Returns:
- * - false for hrefs staring with http://, https://, //.
- * - false for '#', 'javascript:...', 'mailto:...', 'tel:...', etc.
- * - true for all other values, e.g. /foo/bar
- */
 const isClientSideUrl = href => {
   if (typeof href !== "string") {
     return false;
@@ -512,35 +388,9 @@ const isClientSideUrl = href => {
   return !/^(https?:)?\/\//i.test(href) && !/^([^#]*#[\w-]*|[\w\-.]+:)/.test(href);
 };
 
-/**
- * Returns either the default ClickableBehavior or a react-router aware version.
- *
- * The react-router aware version is returned if `router` is a react-router-dom
- * router, `skipClientNav` is not `true`, and `href` is an internal URL.
- *
- * The `router` can be accessed via __RouterContext (imported from 'react-router')
- * from a component rendered as a descendant of a BrowserRouter.
- * See https://reacttraining.com/react-router/web/guides/basic-components.
- */
 const ClickableBehaviorWithRouter = withRouter(ClickableBehavior);
-function getClickableBehavior(
-/**
- * The URL to navigate to.
- */
-href,
-/**
- * Should we skip using the react router and go to the page directly.
- */
-skipClientNav,
-/**
- * router object added to the React context object by react-router-dom.
- */
-router) {
+function getClickableBehavior(href, skipClientNav, router) {
   if (router && skipClientNav !== true && href && isClientSideUrl(href)) {
-    // We cast to `any` here since the type of ClickableBehaviorWithRouter
-    // is slightly different from the return type of this function.
-    // TODO(WB-1037): Always return the wrapped version once all routes have
-    // been ported to the app-shell in webapp.
     return ClickableBehaviorWithRouter;
   }
 
@@ -551,58 +401,32 @@ const _excluded = ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
-/**
- * A component to turn any custom component into a clickable one.
- *
- * Works by wrapping ClickableBehavior around the child element and styling the
- * child appropriately and encapsulates routing logic which can be customized.
- * Expects a function which returns an element as it's child.
- *
- * Example usage:
- * ```jsx
- * <Clickable onClick={() => alert("You clicked me!")}>
- *     {({hovered, focused, pressed}) =>
- *         <div
- *             style={[
- *                 hovered && styles.hovered,
- *                 focused && styles.focused,
- *                 pressed && styles.pressed,
- *             ]}
- *         >
- *             Click Me!
- *         </div>
- *     }
- * </Clickable>
- * ```
- */
-
 class Clickable extends React.Component {
   constructor(...args) {
     super(...args);
 
     this.getCorrectTag = (clickableState, router, commonProps) => {
       const activeHref = this.props.href && !this.props.disabled;
-      const useClient = router && !this.props.skipClientNav && isClientSideUrl(this.props.href || ""); // NOTE: checking this.props.href here is redundant, but flow
-      // needs it to refine this.props.href to a string.
+      const useClient = router && !this.props.skipClientNav && isClientSideUrl(this.props.href || "");
 
       if (activeHref && useClient && this.props.href) {
-        return /*#__PURE__*/React.createElement(StyledLink, _extends({}, commonProps, {
+        return 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__*/React.createElement(StyledAnchor, _extends({}, commonProps, {
+        return 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__*/React.createElement(StyledButton, _extends({}, commonProps, {
+        return React.createElement(StyledButton, _extends({}, commonProps, {
           type: "button",
-          disabled: this.props.disabled
+          "aria-disabled": this.props.disabled
         }), this.props.children(clickableState));
       }
     };
@@ -632,7 +456,7 @@ class Clickable extends React.Component {
     const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), style];
 
     if (beforeNav) {
-      return /*#__PURE__*/React.createElement(ClickableBehavior, {
+      return React.createElement(ClickableBehavior, {
         href: href,
         onClick: onClick,
         beforeNav: beforeNav,
@@ -645,7 +469,7 @@ class Clickable extends React.Component {
         style: getStyle(state)
       }, childrenProps)));
     } else {
-      return /*#__PURE__*/React.createElement(ClickableBehavior, {
+      return React.createElement(ClickableBehavior, {
         href: href,
         onClick: onClick,
         safeWithNav: safeWithNav,
@@ -661,11 +485,10 @@ class Clickable extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+    return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
   }
 
-} // Source:  https://gist.github.com/MoOx/9137295
-
+}
 Clickable.defaultProps = {
   light: false,
   disabled: false,
@@ -680,23 +503,13 @@ const styles = StyleSheet.create({
     overflow: "visible",
     background: "transparent",
     textDecoration: "none",
-
-    /* inherit font & color from ancestor */
     color: "inherit",
     font: "inherit",
     boxSizing: "border-box",
-    // This removes the 300ms click delay on mobile browsers by indicating that
-    // "double-tap to zoom" shouldn't be used on this element.
     touchAction: "manipulation",
     userSelect: "none",
-    // This is usual frowned upon b/c of accessibility.  We expect users of Clickable
-    // to define their own focus styles.
     outline: "none",
-
-    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
     lineHeight: "normal",
-
-    /* Corrects font smoothing for webkit */
     WebkitFontSmoothing: "inherit",
     MozOsxFontSmoothing: "inherit"
   },

package/dist/index.js

@@ -164,8 +164,6 @@ const disabledHandlers = {
   onTouchCancel: () => void 0,
   onKeyDown: () => void 0,
   onKeyUp: () => void 0,
-  onFocus: () => void 0,
-  onBlur: () => void 0,
   // Clickable components should still be tabbable so they can
   // be used as anchors.
   tabIndex: 0
@@ -261,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;
@@ -577,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,
@@ -1214,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));
       }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.2.3",
+  "version": "2.2.6",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-core": "^4.2.1"
+    "@khanacademy/wonder-blocks-core": "^4.3.1"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -26,6 +26,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.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

@@ -378,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
@@ -464,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", () => {

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

@@ -3,6 +3,8 @@ 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";
@@ -452,6 +454,47 @@ describe("Clickable", () => {
         );
     });
 
+    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", () => {
         /**
          * Clickable expect a function as children so we create a simple wrapper to

package/src/components/clickable-behavior.js

@@ -166,6 +166,7 @@ type Props =
            * A target destination window for a link to open in. Should only be used
            * when `href` is specified.
            */
+          // TODO(WB-1262): only allow this prop when `href` is also set.
           target?: "_blank",
       |}
     | {|
@@ -221,8 +222,6 @@ const disabledHandlers = {
     onTouchCancel: () => void 0,
     onKeyDown: () => void 0,
     onKeyUp: () => void 0,
-    onFocus: () => void 0,
-    onBlur: () => void 0,
     // Clickable components should still be tabbable so they can
     // be used as anchors.
     tabIndex: 0,
@@ -334,9 +333,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;
@@ -610,7 +610,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

@@ -111,6 +111,8 @@ type Props =
 
           /**
            * A target destination window for a link to open in.
+           *
+           * TODO(WB-1262): only allow this prop when `href` is also set.t
            */
           target?: "_blank",
       |}
@@ -143,6 +145,8 @@ type Props =
 
           /**
            * A target destination window for a link to open in.
+           *
+           * TODO(WB-1262): only allow this prop when `href` is also set.t
            */
           target?: "_blank",
       |}
@@ -252,7 +256,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>