clickable-box - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

dist/index.cjs.js

@@ -198,3 +198,2 @@ 'use strict';
 
-      var isActiveButton = !disabled && !!onClick;
       return React.createElement(Component // Don't set `tabIndex` if `disabled`. We do set it though even if
@@ -211,6 +210,8 @@ // `onClick` is not provided so that it mimics the behavior of a native
         ,
-        role: "button",
+        role: "button" // Only fire these events if the `disabled` prop is not true.
+        ,
         onKeyPress: !disabled ? this.onKeyPress : undefined,
-        onClick: isActiveButton ? onClick : undefined,
-        "aria-disabled": !isActiveButton,
+        onClick: !disabled ? onClick : undefined // Announce to screen readers that the `ClickableBox` is disabled.
+        ,
+        "aria-disabled": disabled ? "true" : undefined,
         ref: innerRef
@@ -217,0 +218,0 @@ }, otherProps));

package.json

 {
   "name": "clickable-box",
   "description": "Add `onClick` to HTML elements without sacrificing accessibility.",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "author": "Daniel O'Connor <[e-mail]>",
@@ -6,0 +6,0 @@ "license": "MIT",

src/index.jsx

@@ -59,4 +59,2 @@ import React from "react";
 
-    const isActiveButton = !disabled && !!onClick;
-
     return (
@@ -75,5 +73,7 @@ <Component
         role="button"
+        // Only fire these events if the `disabled` prop is not true.
         onKeyPress={!disabled ? this.onKeyPress : undefined}
-        onClick={isActiveButton ? onClick : undefined}
-        aria-disabled={!isActiveButton}
+        onClick={!disabled ? onClick : undefined}
+        // Announce to screen readers that the `ClickableBox` is disabled.
+        aria-disabled={disabled ? "true" : undefined}
         ref={innerRef}
@@ -80,0 +80,0 @@ {...otherProps}

src/index.test.jsx

@@ -82,2 +82,10 @@ import React from "react";
 
+test("does not add `aria-disabled` if not disabled", () => {
+  const children = "duckduck";
+
+  const { getByText } = render(<ClickableBox>{children}</ClickableBox>);
+
+  expect(getByText(children).getAttribute("aria-disabled")).toBeNull();
+});
+
 describe("events", () => {
@@ -84,0 +92,0 @@ test("fires event when clicked on", () => {

No alert changes

Improved metrics

Total package byte prevSize

29510

increased by1.55%

Lines of code

628

increased by1.13%

No dependency changes