brainly-style-guide - npm Package Compare versions

Comparing version 157.0.3 to 157.1.0

commonjs/components/toplayer/TopLayer.js

@@ -46,3 +46,4 @@ "use strict";
       className = props.className,
-      additionalProps = _objectWithoutProperties(props, ["children", "onClose", "size", "lead", "fill", "modal", "withBugbox", "smallSpaced", "splashScreen", "limitedWidth", "row", "noPadding", "transparent", "className"]);
+      onCloseButtonKeyDown = props.onCloseButtonKeyDown,
+      additionalProps = _objectWithoutProperties(props, ["children", "onClose", "size", "lead", "fill", "modal", "withBugbox", "smallSpaced", "splashScreen", "limitedWidth", "row", "noPadding", "transparent", "className", "onCloseButtonKeyDown"]);
 
@@ -67,3 +68,6 @@ var topLayerClassName = (0, _classnames2.default)('sg-toplayer', _defineProperty({
     className: "sg-toplayer__close",
-    onClick: onClose
+    onClick: onClose,
+    onKeyDown: onCloseButtonKeyDown,
+    role: "button",
+    tabIndex: "0"
   }, _react.default.createElement(_Icon.default, {
@@ -70,0 +74,0 @@ type: "close",

esm/components/toplayer/TopLayer.js

@@ -28,3 +28,4 @@ import _extends from "@babel/runtime/helpers/esm/extends";
       className = props.className,
-      additionalProps = _objectWithoutProperties(props, ["children", "onClose", "size", "lead", "fill", "modal", "withBugbox", "smallSpaced", "splashScreen", "limitedWidth", "row", "noPadding", "transparent", "className"]);
+      onCloseButtonKeyDown = props.onCloseButtonKeyDown,
+      additionalProps = _objectWithoutProperties(props, ["children", "onClose", "size", "lead", "fill", "modal", "withBugbox", "smallSpaced", "splashScreen", "limitedWidth", "row", "noPadding", "transparent", "className", "onCloseButtonKeyDown"]);
 
@@ -49,3 +50,6 @@ var topLayerClassName = classnames('sg-toplayer', _defineProperty({
     className: "sg-toplayer__close",
-    onClick: onClose
+    onClick: onClose,
+    onKeyDown: onCloseButtonKeyDown,
+    role: "button",
+    tabIndex: "0"
   }, React.createElement(Icon, {
@@ -52,0 +56,0 @@ type: "close",

package.json

 {
   "name": "brainly-style-guide",
-  "version": "157.0.3",
+  "version": "157.1.0",
   "description": "Brainly Front-End Style Guide",
@@ -5,0 +5,0 @@ "repository": "https://github.com/brainly/style-guide.git",

src/components/toplayer/TopLayer.jsx

@@ -19,2 +19,5 @@ // @flow strict
   onClose?: (SyntheticMouseEvent<HTMLDivElement>) => mixed,
+  onCloseButtonKeyDown?: (
+    event: SyntheticKeyboardEvent<HTMLInputElement>
+  ) => mixed,
   lead?: boolean,
@@ -51,2 +54,3 @@ fill?: boolean,
     className,
+    onCloseButtonKeyDown,
     ...additionalProps
@@ -79,3 +83,9 @@ } = props;
       {onClose ? (
-        <div className="sg-toplayer__close" onClick={onClose}>
+        <div
+          className="sg-toplayer__close"
+          onClick={onClose}
+          onKeyDown={onCloseButtonKeyDown}
+          role="button"
+          tabIndex="0"
+        >
           <Icon type="close" color="gray-secondary" size={24} />
@@ -82,0 +92,0 @@ </div>

src/components/toplayer/TopLayer.spec.jsx

@@ -41,2 +41,13 @@ import React from 'react';
 
+test('key down action', () => {
+  const mockCallback = jest.fn();
+  const topLayer = mount(
+    <TopLayer onClose={mockCallback} onCloseButtonKeyDown={mockCallback} />
+  );
+  const button = topLayer.find('.sg-toplayer__close');
+
+  button.simulate('keyDown');
+  expect(mockCallback.mock.calls).toHaveLength(1);
+});
+
 test('size', () => {
@@ -43,0 +54,0 @@ const size = SIZE.SMALL;

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a 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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Lines of code

26690

increased by0.1%

Worsened metrics

Total package byte prevSize

2036999

decreased by-12.88%

Number of package files

853

decreased by-6.26%

No dependency changes