@khanacademy/wonder-blocks-clickable - npm Package Compare versions

Comparing version 2.2.3 to 2.2.4

CHANGELOG.md

 # @khanacademy/wonder-blocks-clickable
 
+## 2.2.4
+
+### Patch Changes
+
+-   166ecc97: Use `aria-disabled` instead of disabled, fix focused + disabled styles.
+
 ## 2.2.3
@@ -4,0 +10,0 @@

dist/es/index.js

@@ -53,4 +53,2 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
   onKeyUp: () => void 0,
-  onFocus: () => void 0,
-  onBlur: () => void 0,
   // Clickable components should still be tabbable so they can
@@ -151,5 +149,8 @@ // be used as anchors.
   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 {
@@ -468,3 +469,7 @@ // Cannot return undefined
   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,
@@ -608,3 +613,3 @@ onMouseEnter: this.handleMouseEnter,
           type: "button",
-          disabled: this.props.disabled
+          "aria-disabled": this.props.disabled
         }), this.props.children(clickableState));
@@ -611,0 +616,0 @@ }

dist/index.js

@@ -167,4 +167,2 @@ module.exports =
   onKeyUp: () => void 0,
-  onFocus: () => void 0,
-  onBlur: () => void 0,
   // Clickable components should still be tabbable so they can
@@ -265,5 +263,8 @@ // be used as anchors.
   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 {
@@ -582,3 +583,7 @@ // Cannot return undefined
   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,
@@ -1220,3 +1225,3 @@ onMouseEnter: this.handleMouseEnter,
           type: "button",
-          disabled: this.props.disabled
+          "aria-disabled": this.props.disabled
         }), this.props.children(clickableState));
@@ -1223,0 +1228,0 @@ }

package.json

 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "design": "v1",
@@ -5,0 +5,0 @@ "description": "Clickable component for Wonder-Blocks.",

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

@@ -381,3 +381,3 @@ /* eslint-disable max-lines */
         button.simulate("focus");
-        expect(button.state("focused")).toEqual(false);
+        expect(button.state("focused")).toEqual(true);
 
@@ -468,3 +468,3 @@ const anchor = shallow(
         expect(button.state("pressed")).toEqual(false);
-        expect(button.state("focused")).toEqual(false);
+        expect(button.state("focused")).toEqual(true);
     });
@@ -471,0 +471,0 @@

src/components/__tests__/clickable.test.js

@@ -6,2 +6,4 @@ // @flow
 import "jest-enzyme";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
@@ -456,2 +458,43 @@ import {View} from "@khanacademy/wonder-blocks-core";
 
+    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", () => {
@@ -458,0 +501,0 @@ /**

src/components/clickable-behavior.js

@@ -224,4 +224,2 @@ // @flow
     onKeyUp: () => void 0,
-    onFocus: () => void 0,
-    onBlur: () => void 0,
     // Clickable components should still be tabbable so they can
@@ -338,5 +336,6 @@ // be used as anchors.
     ): ?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 {
@@ -615,3 +614,8 @@ // Cannot return undefined
         const childrenProps: ChildrenProps = this.props.disabled
-            ? disabledHandlers
+            ? {
+                  ...disabledHandlers,
+                  // Keep these handlers for keyboard accessibility.
+                  onFocus: this.handleFocus,
+                  onBlur: this.handleBlur,
+              }
             : {
@@ -618,0 +622,0 @@ onClick: this.handleClick,

src/components/clickable.js

@@ -255,3 +255,3 @@ // @flow
                     type="button"
-                    disabled={this.props.disabled}
+                    aria-disabled={this.props.disabled}
                 >
@@ -258,0 +258,0 @@ {this.props.children(clickableState)}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

200706

increased by1.02%

Lines of code

4938

increased by0.98%

No dependency changes