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

Comparing version 1.0.1 to 1.1.0

CHANGELOG.md

 # @khanacademy/wonder-blocks-banner
 
+## 1.1.0
+
+### Minor Changes
+
+-   87572f0a: Add ariaLabel prop
+
+### Patch Changes
+
+-   150021e2: Fix border
+-   d3da219c: Add dependency to WB link
+
 ## 1.0.1
@@ -4,0 +15,0 @@

dist/es/index.js

@@ -7,4 +7,4 @@ import * as React from 'react';
 import Icon, { icons } from '@khanacademy/wonder-blocks-icon';
+import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import Link from '@khanacademy/wonder-blocks-link';
-import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
@@ -66,2 +66,3 @@ import { LabelSmall } from '@khanacademy/wonder-blocks-typography';
     actions,
+    "aria-label": ariaLabel,
     dismissAriaLabel,
@@ -74,5 +75,2 @@ onDismiss,
   } = props;
-  const layoutStyle = {
-    borderRadius: layout && layout === "full-width" ? 0 : 4
-  };
 
@@ -113,10 +111,11 @@ const renderActions = () => {
   return React.createElement(View, {
-    style: [styles.containerOuter, layoutStyle, {
+    style: [styles.containerOuter, layout === "floating" && styles.floatingBorder, {
       borderInlineStartColor: valuesForKind(kind).color
     }],
     role: valuesForKind(kind).role,
+    "aria-label": ariaLabel,
     "aria-live": valuesForKind(kind).ariaLive,
     testId: testId
   }, React.createElement(View, {
-    style: [styles.backgroundColor, layoutStyle, {
+    style: [styles.backgroundColor, {
       backgroundColor: valuesForKind(kind).color
@@ -218,2 +217,6 @@ }]
     marginRight: Spacing.xSmall_8
+  },
+  floatingBorder: {
+    borderRadius: 4,
+    overflow: "hidden"
   }
@@ -220,0 +223,0 @@ });

package.json

 {
   "name": "@khanacademy/wonder-blocks-banner",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "design": "v1",
@@ -24,2 +24,3 @@ "description": "Banner components for Wonder Blocks.",
     "@khanacademy/wonder-blocks-icon-button": "^3.4.14",
+    "@khanacademy/wonder-blocks-link": "^3.8.12",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
@@ -26,0 +27,0 @@ "@khanacademy/wonder-blocks-typography": "^1.1.34"

src/components/__docs__/banner.argtypes.js

@@ -89,2 +89,11 @@ // @flow
     },
+    "aria-label": {
+        control: {type: "text"},
+        description:
+            "Accessible label for the banner. This is read out before the other contents of the banner.",
+        table: {
+            type: {summary: "string"},
+        },
+        type: {required: false},
+    },
 };

src/components/__docs__/banner.stories.js

@@ -377,2 +377,3 @@ // @flow
             layout="floating"
+            aria-label="Notification banner."
         />
@@ -379,0 +380,0 @@ );

src/components/__tests__/banner.test.js

@@ -12,3 +12,3 @@ // @flow
         // Act
-        render(<Banner text="" layout="floating" />);
+        render(<Banner text="test text" layout="floating" />);
 
@@ -24,3 +24,5 @@ // Assert
         // Act
-        render(<Banner text="" onDismiss={() => {}} layout="floating" />);
+        render(
+            <Banner text="test text" onDismiss={() => {}} layout="floating" />,
+        );
 
@@ -35,3 +37,9 @@ // Assert
         const onDismissSpy = jest.fn();
-        render(<Banner text="" onDismiss={onDismissSpy} layout="floating" />);
+        render(
+            <Banner
+                text="test text"
+                onDismiss={onDismissSpy}
+                layout="floating"
+            />,
+        );
 
@@ -52,3 +60,3 @@ // Act
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
@@ -70,3 +78,3 @@ actions={[{title: "some link", href: "/", onClick: () => {}}]}
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
@@ -88,3 +96,3 @@ actions={[{title: "some button", onClick: () => {}}]}
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
@@ -110,3 +118,3 @@ actions={[
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
@@ -131,3 +139,3 @@ actions={[{title: "a button", onClick: actionSpy}]}
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
@@ -151,3 +159,3 @@ actions={[{title: "a link", onClick: actionSpy, href: "/"}]}
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
@@ -171,3 +179,3 @@ actions={[{title: "a button", onClick: () => {}, href: "/foo"}]}
         // Act
-        render(<Banner text="" layout="floating" />);
+        render(<Banner text="test text" layout="floating" />);
 
@@ -185,3 +193,3 @@ // Assert
             // Act
-            render(<Banner text="" kind={kind} layout="floating" />);
+            render(<Banner text="test text" kind={kind} layout="floating" />);
 
@@ -200,3 +208,5 @@ // Assert
         // Act
-        render(<Banner text="" layout="floating" onDismiss={() => {}} />);
+        render(
+            <Banner text="test text" layout="floating" onDismiss={() => {}} />,
+        );
 
@@ -214,3 +224,3 @@ // Assert
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
@@ -236,3 +246,3 @@ onDismiss={() => {}}
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
@@ -254,3 +264,3 @@ actions={[{title: "Test button title", onClick: () => {}}]}
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
@@ -272,3 +282,3 @@ actions={[{title: "Test link title", href: "/"}]}
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
@@ -299,3 +309,3 @@ actions={[
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
@@ -331,3 +341,3 @@ actions={[
             <Banner
-                text=""
+                text="test text"
                 kind={kind}
@@ -350,4 +360,4 @@ layout="floating"
             <Banner
-                text=""
-                kind={"warning"}
+                text="test text"
+                kind="warning"
                 layout="floating"
@@ -362,2 +372,23 @@ testId="wonder-blocks-banner-test-id"
     });
+
+    test("aria-label prop becomes aria-label attribute on the banner", () => {
+        // Arrange
+
+        // Act
+        render(
+            <Banner
+                text="test text"
+                layout="full-width"
+                testId="wonder-blocks-banner-test-id"
+                aria-label="This is a banner aria label."
+            />,
+        );
+
+        // Assert
+        const banner = screen.getByTestId("wonder-blocks-banner-test-id");
+        expect(banner).toHaveAttribute(
+            "aria-label",
+            "This is a banner aria label.",
+        );
+    });
 });

src/components/banner.js

@@ -9,4 +9,4 @@ // @flow
 import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import Link from "@khanacademy/wonder-blocks-link";
-import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
@@ -73,2 +73,8 @@ import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
     /**
+     * Accessible label for the banner.
+     * This is read out before the other contents of the banner.
+     */
+    "aria-label"?: string,
+
+    /**
      * Determines the color and icon of the banner.
@@ -165,7 +171,15 @@ */
 const Banner = (props: Props): React.Node => {
-    const {actions, dismissAriaLabel, onDismiss, kind, layout, text, testId} =
-        props;
-    const layoutStyle = {
-        borderRadius: layout && layout === "full-width" ? 0 : 4,
-    };
+    const {
+        actions,
+        // Suppressing lint on the next line because it's saying `aria-label`
+        // is missing in props validation when it's not.
+        // eslint-disable-next-line react/prop-types
+        "aria-label": ariaLabel,
+        dismissAriaLabel,
+        onDismiss,
+        kind,
+        layout,
+        text,
+        testId,
+    } = props;
 
@@ -210,6 +224,7 @@ const renderActions = () => {
                 styles.containerOuter,
-                layoutStyle,
+                layout === "floating" && styles.floatingBorder,
                 {borderInlineStartColor: valuesForKind(kind).color},
             ]}
             role={valuesForKind(kind).role}
+            aria-label={ariaLabel}
             aria-live={valuesForKind(kind).ariaLive}
@@ -221,3 +236,2 @@ testId={testId}
                     styles.backgroundColor,
-                    layoutStyle,
                     {backgroundColor: valuesForKind(kind).color},
@@ -344,4 +358,8 @@ ]}
     },
+    floatingBorder: {
+        borderRadius: 4,
+        overflow: "hidden",
+    },
 });
 
 export default Banner;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

77323

decreased by-67.07%

Dependency count

11

increased by10%

Lines of code

1823

decreased by-70.18%

Dependency changes

• + Added@khanacademy/wonder-blocks-link@^3.8.12

• + Added@khanacademy/wonder-blocks-link@3.9.4(transitive)