@khanacademy/wonder-blocks-button 2.9.13 → 2.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "2.9.13",
+  "version": "2.10.2",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,23 +15,23 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-clickable": "^2.1.2",
-    "@khanacademy/wonder-blocks-color": "^1.1.18",
-    "@khanacademy/wonder-blocks-core": "^3.1.4",
-    "@khanacademy/wonder-blocks-icon": "^1.2.21",
-    "@khanacademy/wonder-blocks-progress-spinner": "^1.1.25",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.3",
-    "@khanacademy/wonder-blocks-typography": "^1.1.25"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.1",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.0.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.24",
+    "@khanacademy/wonder-blocks-progress-spinner": "^1.1.28",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-typography": "^1.1.28"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-router-dom": "^4.2.2"
+    "react": "16.14.0",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.0"
+    "wb-dev-build-settings": "^0.2.0"
   },
-  "gitHead": "8022bb419eed74be37f71f71c7621854794a731c"
+  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
 }

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -2850,7 +2850,7 @@ exports[`wonder-blocks-button example 9 1`] = `
         }
       }
     >
-      Async action, client-side nav
+      beforeNav, client-side nav
     </span>
   </a>
   <a
@@ -2918,7 +2918,7 @@ exports[`wonder-blocks-button example 9 1`] = `
         }
       }
     >
-      Async action, server-side nav
+      beforeNav, server-side nav
     </span>
   </a>
   <a
@@ -2987,7 +2987,7 @@ exports[`wonder-blocks-button example 9 1`] = `
         }
       }
     >
-      Async action, open URL in new tab
+      beforeNav, open URL in new tab
     </span>
   </a>
 </div>
@@ -3078,13 +3078,242 @@ exports[`wonder-blocks-button example 10 1`] = `
         }
       }
     >
-      This button prevent navigation.
+      safeWithNav, client-side nav
+    </span>
+  </a>
+  <a
+    className=""
+    href="/foo"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+    role="button"
+    style={
+      Object {
+        ":focus": Object {
+          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+        },
+        "alignItems": "center",
+        "background": "#1865f2",
+        "border": "none",
+        "borderRadius": 4,
+        "boxSizing": "border-box",
+        "color": "#ffffff",
+        "cursor": "pointer",
+        "display": "inline-flex",
+        "height": 40,
+        "justifyContent": "center",
+        "marginRight": 10,
+        "outline": "none",
+        "paddingBottom": 0,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 0,
+        "position": "relative",
+        "textDecoration": "none",
+        "touchAction": "manipulation",
+        "userSelect": "none",
+      }
+    }
+    tabIndex={0}
+  >
+    <span
+      className=""
+      style={
+        Object {
+          "MozOsxFontSmoothing": "grayscale",
+          "WebkitFontSmoothing": "antialiased",
+          "alignItems": "center",
+          "display": "inline-block",
+          "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+          "fontSize": 16,
+          "fontWeight": "bold",
+          "lineHeight": "20px",
+          "overflow": "hidden",
+          "pointerEvents": "none",
+          "textOverflow": "ellipsis",
+          "whiteSpace": "nowrap",
+        }
+      }
+    >
+      safeWithNav, server-side nav
+    </span>
+  </a>
+  <a
+    className=""
+    href="https://google.com"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+    rel="noopener noreferrer"
+    role="button"
+    style={
+      Object {
+        ":focus": Object {
+          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+        },
+        "alignItems": "center",
+        "background": "#1865f2",
+        "border": "none",
+        "borderRadius": 4,
+        "boxSizing": "border-box",
+        "color": "#ffffff",
+        "cursor": "pointer",
+        "display": "inline-flex",
+        "height": 40,
+        "justifyContent": "center",
+        "marginRight": 10,
+        "outline": "none",
+        "paddingBottom": 0,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 0,
+        "position": "relative",
+        "textDecoration": "none",
+        "touchAction": "manipulation",
+        "userSelect": "none",
+      }
+    }
+    tabIndex={0}
+    target="_blank"
+  >
+    <span
+      className=""
+      style={
+        Object {
+          "MozOsxFontSmoothing": "grayscale",
+          "WebkitFontSmoothing": "antialiased",
+          "alignItems": "center",
+          "display": "inline-block",
+          "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+          "fontSize": 16,
+          "fontWeight": "bold",
+          "lineHeight": "20px",
+          "overflow": "hidden",
+          "pointerEvents": "none",
+          "textOverflow": "ellipsis",
+          "whiteSpace": "nowrap",
+        }
+      }
+    >
+      safeWithNav, open URL in new tab
     </span>
   </a>
 </div>
 `;
 
 exports[`wonder-blocks-button example 11 1`] = `
+<div
+  className=""
+  style={
+    Object {
+      "alignItems": "center",
+      "borderStyle": "solid",
+      "borderWidth": 0,
+      "boxSizing": "border-box",
+      "display": "flex",
+      "flexDirection": "row",
+      "margin": 0,
+      "minHeight": 0,
+      "minWidth": 0,
+      "padding": 0,
+      "position": "relative",
+      "zIndex": 0,
+    }
+  }
+>
+  <a
+    className=""
+    href="/foo"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onDragStart={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchCancel={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+    role="button"
+    style={
+      Object {
+        ":focus": Object {
+          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+        },
+        "alignItems": "center",
+        "background": "#1865f2",
+        "border": "none",
+        "borderRadius": 4,
+        "boxSizing": "border-box",
+        "color": "#ffffff",
+        "cursor": "pointer",
+        "display": "inline-flex",
+        "height": 40,
+        "justifyContent": "center",
+        "marginRight": 10,
+        "outline": "none",
+        "paddingBottom": 0,
+        "paddingLeft": 16,
+        "paddingRight": 16,
+        "paddingTop": 0,
+        "position": "relative",
+        "textDecoration": "none",
+        "touchAction": "manipulation",
+        "userSelect": "none",
+      }
+    }
+    tabIndex={0}
+  >
+    <span
+      className=""
+      style={
+        Object {
+          "MozOsxFontSmoothing": "grayscale",
+          "WebkitFontSmoothing": "antialiased",
+          "alignItems": "center",
+          "display": "inline-block",
+          "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
+          "fontSize": 16,
+          "fontWeight": "bold",
+          "lineHeight": "20px",
+          "overflow": "hidden",
+          "pointerEvents": "none",
+          "textOverflow": "ellipsis",
+          "whiteSpace": "nowrap",
+        }
+      }
+    >
+      This button prevents navigation.
+    </span>
+  </a>
+</div>
+`;
+
+exports[`wonder-blocks-button example 12 1`] = `
 <div
   className=""
   style={
@@ -3718,7 +3947,7 @@ exports[`wonder-blocks-button example 11 1`] = `
 </div>
 `;
 
-exports[`wonder-blocks-button example 12 1`] = `
+exports[`wonder-blocks-button example 13 1`] = `
 <div
   className=""
   style={
@@ -3817,7 +4046,7 @@ exports[`wonder-blocks-button example 12 1`] = `
 </div>
 `;
 
-exports[`wonder-blocks-button example 13 1`] = `
+exports[`wonder-blocks-button example 14 1`] = `
 <div
   className=""
   style={
@@ -3912,7 +4141,7 @@ exports[`wonder-blocks-button example 13 1`] = `
 </div>
 `;
 
-exports[`wonder-blocks-button example 14 1`] = `
+exports[`wonder-blocks-button example 15 1`] = `
 <div
   className=""
   style={
@@ -4139,7 +4368,7 @@ exports[`wonder-blocks-button example 14 1`] = `
 </div>
 `;
 
-exports[`wonder-blocks-button example 15 1`] = `
+exports[`wonder-blocks-button example 16 1`] = `
 <div
   className=""
   style={
@@ -4313,7 +4542,7 @@ exports[`wonder-blocks-button example 15 1`] = `
 </div>
 `;
 
-exports[`wonder-blocks-button example 16 1`] = `
+exports[`wonder-blocks-button example 17 1`] = `
 <div
   className=""
   style={
@@ -4488,7 +4717,7 @@ exports[`wonder-blocks-button example 16 1`] = `
 </div>
 `;
 
-exports[`wonder-blocks-button example 17 1`] = `
+exports[`wonder-blocks-button example 18 1`] = `
 <div
   className=""
   style={
@@ -4677,7 +4906,7 @@ exports[`wonder-blocks-button example 17 1`] = `
 </div>
 `;
 
-exports[`wonder-blocks-button example 18 1`] = `
+exports[`wonder-blocks-button example 19 1`] = `
 <div
   className=""
   style={

package/src/__tests__/generated-snapshot.test.js

@@ -426,7 +426,7 @@ describe("wonder-blocks-button", () => {
                             })
                         }
                     >
-                        Async action, client-side nav
+                        beforeNav, client-side nav
                     </Button>
                     <Button
                         href="/foo"
@@ -438,7 +438,7 @@ describe("wonder-blocks-button", () => {
                             })
                         }
                     >
-                        Async action, server-side nav
+                        beforeNav, server-side nav
                     </Button>
                     <Button
                         href="https://google.com"
@@ -451,7 +451,7 @@ describe("wonder-blocks-button", () => {
                             })
                         }
                     >
-                        Async action, open URL in new tab
+                        beforeNav, open URL in new tab
                     </Button>
                     <Switch>
                         <Route path="/foo">
@@ -482,9 +482,38 @@ describe("wonder-blocks-button", () => {
                     <Button
                         href="/foo"
                         style={styles.button}
-                        onClick={(e) => e.preventDefault()}
+                        safeWithNav={() =>
+                            new Promise((resolve, reject) => {
+                                setTimeout(resolve, 1000);
+                            })
+                        }
+                    >
+                        safeWithNav, client-side nav
+                    </Button>
+                    <Button
+                        href="/foo"
+                        style={styles.button}
+                        skipClientNav={true}
+                        safeWithNav={() =>
+                            new Promise((resolve, reject) => {
+                                setTimeout(resolve, 1000);
+                            })
+                        }
+                    >
+                        safeWithNav, server-side nav
+                    </Button>
+                    <Button
+                        href="https://google.com"
+                        target="_blank"
+                        style={styles.button}
+                        skipClientNav={true}
+                        safeWithNav={() =>
+                            new Promise((resolve, reject) => {
+                                setTimeout(resolve, 1000);
+                            })
+                        }
                     >
-                        This button prevent navigation.
+                        safeWithNav, open URL in new tab
                     </Button>
                     <Switch>
                         <Route path="/foo">
@@ -499,6 +528,39 @@ describe("wonder-blocks-button", () => {
     });
 
     it("example 11", () => {
+        const styles = StyleSheet.create({
+            row: {
+                flexDirection: "row",
+                alignItems: "center",
+            },
+            button: {
+                marginRight: 10,
+            },
+        }); // NOTE: In actual code you would use BrowserRouter instead
+
+        const example = (
+            <MemoryRouter>
+                <View style={styles.row}>
+                    <Button
+                        href="/foo"
+                        style={styles.button}
+                        onClick={(e) => e.preventDefault()}
+                    >
+                        This button prevents navigation.
+                    </Button>
+                    <Switch>
+                        <Route path="/foo">
+                            <View id="foo">Hello, world!</View>
+                        </Route>
+                    </Switch>
+                </View>
+            </MemoryRouter>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 12", () => {
         const styles = StyleSheet.create({
             row: {
                 flexDirection: "row",
@@ -542,7 +604,7 @@ describe("wonder-blocks-button", () => {
         expect(tree).toMatchSnapshot();
     });
 
-    it("example 12", () => {
+    it("example 13", () => {
         const example = (
             <View>
                 <form onSubmit={() => alert("the form was submitted")}>
@@ -554,7 +616,7 @@ describe("wonder-blocks-button", () => {
         expect(tree).toMatchSnapshot();
     });
 
-    it("example 13", () => {
+    it("example 14", () => {
         const example = (
             <View>
                 <Button>Label</Button>
@@ -564,7 +626,7 @@ describe("wonder-blocks-button", () => {
         expect(tree).toMatchSnapshot();
     });
 
-    it("example 14", () => {
+    it("example 15", () => {
         const styles = StyleSheet.create({
             column: {
                 alignItems: "flex-start",
@@ -594,7 +656,7 @@ describe("wonder-blocks-button", () => {
         expect(tree).toMatchSnapshot();
     });
 
-    it("example 15", () => {
+    it("example 16", () => {
         const styles = StyleSheet.create({
             row: {
                 flexDirection: "row",
@@ -621,7 +683,7 @@ describe("wonder-blocks-button", () => {
         expect(tree).toMatchSnapshot();
     });
 
-    it("example 16", () => {
+    it("example 17", () => {
         const styles = StyleSheet.create({
             row: {
                 flexDirection: "row",
@@ -649,7 +711,7 @@ describe("wonder-blocks-button", () => {
         expect(tree).toMatchSnapshot();
     });
 
-    it("example 17", () => {
+    it("example 18", () => {
         const styles = StyleSheet.create({
             row: {
                 flexDirection: "row",
@@ -672,7 +734,7 @@ describe("wonder-blocks-button", () => {
         expect(tree).toMatchSnapshot();
     });
 
-    it("example 18", () => {
+    it("example 19", () => {
         const styles = StyleSheet.create({
             row: {
                 flexDirection: "row",

package/src/components/__docs__/accessibility.stories.mdx

@@ -0,0 +1,92 @@
+import {Meta, Story, Canvas} from "@storybook/addon-docs";
+import {StyleSheet} from "aphrodite";
+
+import Button from "@khanacademy/wonder-blocks-button";
+import {View} from "@khanacademy/wonder-blocks-core";
+
+<Meta
+    title="Navigation/Button/Accessibility"
+    component={Button}
+    parameters={{
+        previewTabs: {
+            canvas: {hidden: true},
+        },
+        viewMode: "docs",
+        chromatic: {
+            // Disables chromatic testing for these stories.
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+export const Template = (args) => <Button {...args} />;
+
+## Accessibility
+
+### Labeling
+
+`Button` has an accessible label by default. The accessible name is computed from
+the `children` prop. However, `aria-label` should be used when `spinner={true}`
+to let people using screen readers that the action taken by clicking the button
+will take some time to complete.
+
+This is an example of a component with an accessible label:
+
+<Canvas>
+    <Story name="Labeling">
+        <View>
+            <Button spinner={true} aria-label="The action is being saved...">
+                Label
+            </Button>
+        </View>
+    </Story>
+</Canvas>
+
+### Disabled state
+
+Buttons do not need an `aria-disabled` attribute, if it also has a `disabled`
+attribute. Users operating the web page through a screen reader may not be able
+to fully evaluate the implied behaviors of the button element itself.
+
+<Canvas>
+    <Story name="Disabled state">
+        <View style={{flexDirection: "row"}}>
+            <Button
+                style={styles.button}
+                onClick={(e) => console.log("Hello, world!")}
+                disabled={true}
+            >
+                Primary
+            </Button>
+            <Button
+                style={styles.button}
+                href={"/foo"}
+                kind="secondary"
+                disabled={true}
+            >
+                Secondary
+            </Button>
+            <Button
+                style={styles.button}
+                onClick={(e) => console.log("Hello, world!")}
+                kind="tertiary"
+                disabled={true}
+            >
+                Tertiary
+            </Button>
+        </View>
+    </Story>
+</Canvas>
+
+### References
+
+-   [Implicit ARIA semantics](https://www.w3.org/TR/wai-aria-1.1/#implicit_semantics)
+-   [Document conformance requirements](https://www.w3.org/TR/html-aria/#document-conformance-requirements-for-use-of-aria-attributes-in-html)
+
+For more details, see the [Accessibility section](https://www.w3.org/TR/wai-aria-practices-1.1/#button) in w3.org.
+
+export const styles = StyleSheet.create({
+    button: {
+        marginRight: 10,
+    },
+});