@commercetools-uikit/accessible-button - npm Package Compare versions

Comparing version 10.17.1-canary.1 to 10.17.1-canary.2

dist/accessible-button.cjs.js

@@ -62,5 +62,10 @@ 'use strict';
 var propsToOmit = ['onClick'];
+var getIsEnterOrSpace = function getIsEnterOrSpace(e) {
+  return e.key === ' ' || e.key === 'Enter';
+};
 var Button = _styled("button", {
   target: "e1hlacz70"
-})(getNormalizedButtonStyles, " display:inline-flex;outline:0;font-size:", designSystem.customProperties.fontSizeDefault, ";cursor:", function (props) {
+})(getNormalizedButtonStyles, " display:inline-flex;font-size:", designSystem.customProperties.fontSizeDefault, ";", function (props) {
+  return !props.as || props.as === 'button' ? 'outline: none' : '';
+}, " cursor:", function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
@@ -75,9 +80,22 @@ }, ";&:disabled{cursor:not-allowed;}");
     }
-    if (!props.isDisabled && onClick) return onClick(event);
+    if (!props.isDisabled && onClick) {
+      return onClick(event);
+    }
     return;
   }, [onClick, props.isDisabled]);
   var isButton = !props.as || props.as === 'button';
-  var buttonProps = {
-    type: props.type
-  };
+  var buttonProps = {};
+  if (isButton) {
+    buttonProps = {
+      type: props.type
+    };
+  } else if (!props.isDisabled) {
+    buttonProps = {
+      role: 'button',
+      tabIndex: '0',
+      onKeyPress: function onKeyPress(event) {
+        return getIsEnterOrSpace(event) && handleClick(event);
+      }
+    };
+  }
   return core.jsx(Button, _extends({
@@ -95,3 +113,3 @@ as: props.as,
     'aria-pressed': props.isToggled
-  } : {}, omit(props.buttonAttributes, propsToOmit), isButton ? buttonProps : {}, utils.filterAriaAttributes(props)), props.children);
+  } : {}, omit(props.buttonAttributes, propsToOmit), buttonProps, utils.filterAriaAttributes(props)), props.children);
 });
@@ -137,3 +155,3 @@ AccessibleButton.displayName = 'AccessibleButton';
 
-var version = '10.17.1-canary.1+3c3abfef';
+var version = '10.17.1-canary.2+d921662b';
 
@@ -140,0 +158,0 @@ exports.default = AccessibleButton;

dist/accessible-button.esm.js

@@ -56,5 +56,10 @@ import _styled from '@emotion/styled-base';
 var propsToOmit = ['onClick'];
+var getIsEnterOrSpace = function getIsEnterOrSpace(e) {
+  return e.key === ' ' || e.key === 'Enter';
+};
 var Button = _styled("button", {
   target: "e1hlacz70"
-})(getNormalizedButtonStyles, " display:inline-flex;outline:0;font-size:", customProperties.fontSizeDefault, ";cursor:", function (props) {
+})(getNormalizedButtonStyles, " display:inline-flex;font-size:", customProperties.fontSizeDefault, ";", function (props) {
+  return !props.as || props.as === 'button' ? 'outline: none' : '';
+}, " cursor:", function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
@@ -69,9 +74,22 @@ }, ";&:disabled{cursor:not-allowed;}");
     }
-    if (!props.isDisabled && onClick) return onClick(event);
+    if (!props.isDisabled && onClick) {
+      return onClick(event);
+    }
     return;
   }, [onClick, props.isDisabled]);
   var isButton = !props.as || props.as === 'button';
-  var buttonProps = {
-    type: props.type
-  };
+  var buttonProps = {};
+  if (isButton) {
+    buttonProps = {
+      type: props.type
+    };
+  } else if (!props.isDisabled) {
+    buttonProps = {
+      role: 'button',
+      tabIndex: '0',
+      onKeyPress: function onKeyPress(event) {
+        return getIsEnterOrSpace(event) && handleClick(event);
+      }
+    };
+  }
   return jsx(Button, _extends({
@@ -89,3 +107,3 @@ as: props.as,
     'aria-pressed': props.isToggled
-  } : {}, omit(props.buttonAttributes, propsToOmit), isButton ? buttonProps : {}, filterAriaAttributes(props)), props.children);
+  } : {}, omit(props.buttonAttributes, propsToOmit), buttonProps, filterAriaAttributes(props)), props.children);
 });
@@ -131,5 +149,5 @@ AccessibleButton.displayName = 'AccessibleButton';
 
-var version = '10.17.1-canary.1+3c3abfef';
+var version = '10.17.1-canary.2+d921662b';
 
 export default AccessibleButton;
 export { getNormalizedButtonStyles, version };

package.json

 {
   "name": "@commercetools-uikit/accessible-button",
-  "version": "10.17.1-canary.1+3c3abfef",
+  "version": "10.17.1-canary.2+d921662b",
   "description": "",
@@ -22,4 +22,4 @@ "main": "dist/accessible-button.cjs.js",
   "dependencies": {
-    "@commercetools-uikit/design-system": "10.17.1-canary.1+3c3abfef",
-    "@commercetools-uikit/utils": "10.17.1-canary.1+3c3abfef",
+    "@commercetools-uikit/design-system": "10.17.1-canary.2+d921662b",
+    "@commercetools-uikit/utils": "10.17.1-canary.2+d921662b",
     "@emotion/core": "10.0.27",
@@ -34,3 +34,3 @@ "@emotion/styled": "10.0.27",
   },
-  "gitHead": "3c3abfefb13b3d319241c293ae9ff99f26d11ebc"
+  "gitHead": "d921662ba03b4c95b0b99b96a0d259efbca63706"
 }

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17790

increased by5.42%

Lines of code

284

increased by14.52%

Dependency changes

• Updated@commercetools-uikit/design-system@10.17.1-canary.2+d921662b

• Updated@commercetools-uikit/utils@10.17.1-canary.2+d921662b