@khanacademy/wonder-blocks-banner 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-banner",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "design": "v1",
   "description": "Banner components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,13 +16,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-button": "^3.0.5",
+    "@khanacademy/wonder-blocks-button": "^3.0.6",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.4.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.31",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.13",
+    "@khanacademy/wonder-blocks-core": "^4.5.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.32",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.14",
+    "@khanacademy/wonder-blocks-link": "^3.8.12",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.33"
+    "@khanacademy/wonder-blocks-typography": "^1.1.34"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

package/src/components/__docs__/banner.argtypes.js

@@ -86,4 +86,13 @@ export default {
         },
         type: {required: false},
     },
+    "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},
+    },
 };

package/src/components/__docs__/banner.stories.js

@@ -374,6 +374,7 @@ export const WithDismissal: StoryComponentType = () => {
             onDismiss={handleDismiss}
             actions={[{title: "Also dismiss", onClick: handleDismiss}]}
             layout="floating"
+            aria-label="Notification banner."
         />
     );
 };

package/src/components/__tests__/banner.test.js

@@ -9,7 +9,7 @@ describe("Banner", () => {
         // Arrange
 
         // Act
-        render(<Banner text="" layout="floating" />);
+        render(<Banner text="test text" layout="floating" />);
 
         // Assert
         const button = screen.queryByRole("button");
@@ -20,7 +20,9 @@ describe("Banner", () => {
         // Arrange
 
         // Act
-        render(<Banner text="" onDismiss={() => {}} layout="floating" />);
+        render(
+            <Banner text="test text" onDismiss={() => {}} layout="floating" />,
+        );
 
         // Assert
         const button = screen.queryByRole("button");
@@ -30,7 +32,13 @@ describe("Banner", () => {
     test("clicking the dismiss button triggers `onDismiss`", () => {
         // Arrange
         const onDismissSpy = jest.fn();
-        render(<Banner text="" onDismiss={onDismissSpy} layout="floating" />);
+        render(
+            <Banner
+                text="test text"
+                onDismiss={onDismissSpy}
+                layout="floating"
+            />,
+        );
 
         // Act
         const button = screen.getByRole("button");
@@ -46,7 +54,7 @@ describe("Banner", () => {
         // Act
         render(
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
                 actions={[{title: "some link", href: "/", onClick: () => {}}]}
             />,
@@ -63,7 +71,7 @@ describe("Banner", () => {
         // Act
         render(
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
                 actions={[{title: "some button", onClick: () => {}}]}
             />,
@@ -80,7 +88,7 @@ describe("Banner", () => {
         // Act
         render(
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
                 actions={[
                     {title: "button 1", onClick: () => {}},
@@ -101,7 +109,7 @@ describe("Banner", () => {
 
         render(
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
                 actions={[{title: "a button", onClick: actionSpy}]}
             />,
@@ -121,7 +129,7 @@ describe("Banner", () => {
 
         render(
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
                 actions={[{title: "a link", onClick: actionSpy, href: "/"}]}
             />,
@@ -140,7 +148,7 @@ describe("Banner", () => {
 
         render(
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
                 actions={[{title: "a button", onClick: () => {}, href: "/foo"}]}
             />,
@@ -159,7 +167,7 @@ describe("Banner", () => {
         // Arrange
 
         // Act
-        render(<Banner text="" layout="floating" />);
+        render(<Banner text="test text" layout="floating" />);
 
         // Assert
         const icon = screen.getByTestId("banner-kind-icon");
@@ -172,7 +180,7 @@ describe("Banner", () => {
             // Arrange
 
             // Act
-            render(<Banner text="" kind={kind} layout="floating" />);
+            render(<Banner text="test text" kind={kind} layout="floating" />);
 
             // Assert
             const icon = screen.getByTestId("banner-kind-icon");
@@ -186,7 +194,9 @@ describe("Banner", () => {
         // Arrange
 
         // Act
-        render(<Banner text="" layout="floating" onDismiss={() => {}} />);
+        render(
+            <Banner text="test text" layout="floating" onDismiss={() => {}} />,
+        );
 
         // Assert
         const dismissButton = screen.getByRole("button");
@@ -199,7 +209,7 @@ describe("Banner", () => {
         // Act
         render(
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
                 onDismiss={() => {}}
                 dismissAriaLabel="Test dismiss aria label"
@@ -220,7 +230,7 @@ describe("Banner", () => {
         // Act
         render(
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
                 actions={[{title: "Test button title", onClick: () => {}}]}
             />,
@@ -237,7 +247,7 @@ describe("Banner", () => {
         // Act
         render(
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
                 actions={[{title: "Test link title", href: "/"}]}
             />,
@@ -254,7 +264,7 @@ describe("Banner", () => {
         // Act
         render(
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
                 actions={[
                     {
@@ -280,7 +290,7 @@ describe("Banner", () => {
         // Act
         render(
             <Banner
-                text=""
+                text="test text"
                 layout="floating"
                 actions={[
                     {
@@ -311,7 +321,7 @@ describe("Banner", () => {
         // Act
         render(
             <Banner
-                text=""
+                text="test text"
                 kind={kind}
                 layout="floating"
                 testId="wonder-blocks-banner-test-id"
@@ -329,8 +339,8 @@ describe("Banner", () => {
         // Act
         render(
             <Banner
-                text=""
-                kind={"warning"}
+                text="test text"
+                kind="warning"
                 layout="floating"
                 testId="wonder-blocks-banner-test-id"
             />,
@@ -340,4 +350,25 @@ describe("Banner", () => {
         const banner = screen.getByTestId("wonder-blocks-banner-test-id");
         expect(banner).toHaveAttribute("aria-live", "polite");
     });
+
+    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.",
+        );
+    });
 });

package/src/components/banner.js

@@ -6,8 +6,8 @@ import Button from "@khanacademy/wonder-blocks-button";
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
 import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
-import Link from "@khanacademy/wonder-blocks-link";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
+import Link from "@khanacademy/wonder-blocks-link";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
@@ -68,6 +68,12 @@ type BannerValues = {|
 |};
 
 type Props = {|
+    /**
+     * 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.
      */
@@ -160,11 +166,19 @@ const valuesForKind = (kind: BannerKind): BannerValues => {
  * ```
  */
 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;
 
     const renderActions = () => {
         return actions?.filter(Boolean).map((action) => {
@@ -204,17 +218,17 @@ const Banner = (props: Props): React.Node => {
         <View
             style={[
                 styles.containerOuter,
-                layoutStyle,
+                layout === "floating" && styles.floatingBorder,
                 {borderInlineStartColor: valuesForKind(kind).color},
             ]}
             role={valuesForKind(kind).role}
+            aria-label={ariaLabel}
             aria-live={valuesForKind(kind).ariaLive}
             testId={testId}
         >
             <View
                 style={[
                     styles.backgroundColor,
-                    layoutStyle,
                     {backgroundColor: valuesForKind(kind).color},
                 ]}
             />
@@ -336,6 +350,10 @@ const styles = StyleSheet.create({
         marginLeft: Spacing.xSmall_8,
         marginRight: Spacing.xSmall_8,
     },
+    floatingBorder: {
+        borderRadius: 4,
+        overflow: "hidden",
+    },
 });
 
 export default Banner;