@khanacademy/wonder-blocks-clickable 2.2.2 → 2.2.5

package/CHANGELOG.md

@@ -1,6 +1,26 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 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
+
+-   @khanacademy/wonder-blocks-core@4.2.1
+
 ## 2.2.2
+
 ### Patch Changes
 
-- 901bfe82: Change disabled tabindex from -1 to 0
+-   901bfe82: Change disabled tabindex from -1 to 0

package/dist/es/index.js

@@ -50,8 +50,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
@@ -147,9 +145,12 @@ const startState = {
 
 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;
@@ -463,7 +464,11 @@ class ClickableBehavior extends React.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,
@@ -602,7 +607,7 @@ class Clickable extends React.Component {
       } else {
         return /*#__PURE__*/React.createElement(StyledButton, _extends({}, commonProps, {
           type: "button",
-          disabled: this.props.disabled
+          "aria-disabled": this.props.disabled
         }), this.props.children(clickableState));
       }
     };

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.2",
+  "version": "2.2.5",
   "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.0.0"
+    "@khanacademy/wonder-blocks-core": "^4.3.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -26,6 +26,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.2.0"
+    "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

@@ -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

@@ -221,8 +221,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 +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;
@@ -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>