@khanacademy/wonder-blocks-button 2.10.2 → 2.11.0

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

@@ -21,8 +21,8 @@ exports[`wonder-blocks-button example 1 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -94,8 +94,8 @@ exports[`wonder-blocks-button example 1 1`] = `
     </span>
   </button>
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -170,8 +170,8 @@ exports[`wonder-blocks-button example 1 1`] = `
     </span>
   </button>
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -267,8 +267,8 @@ exports[`wonder-blocks-button example 2 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -340,8 +340,8 @@ exports[`wonder-blocks-button example 2 1`] = `
     </span>
   </button>
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -416,8 +416,8 @@ exports[`wonder-blocks-button example 2 1`] = `
     </span>
   </button>
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -513,8 +513,8 @@ exports[`wonder-blocks-button example 3 1`] = `
   }
 >
   <button
+    aria-disabled={true}
     className=""
-    disabled={true}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -535,7 +535,7 @@ exports[`wonder-blocks-button example 3 1`] = `
           "border": 0,
         },
         ":focus": Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+          "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px rgba(33,36,44,0.32)",
         },
         "alignItems": "center",
         "background": "rgba(33,36,44,0.32)",
@@ -560,7 +560,7 @@ exports[`wonder-blocks-button example 3 1`] = `
         "userSelect": "none",
       }
     }
-    tabIndex={-1}
+    tabIndex={0}
     type="button"
   >
     <span
@@ -586,8 +586,8 @@ exports[`wonder-blocks-button example 3 1`] = `
     </span>
   </button>
   <button
+    aria-disabled={true}
     className=""
-    disabled={true}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -608,7 +608,10 @@ exports[`wonder-blocks-button example 3 1`] = `
           "border": 0,
         },
         ":focus": Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+          "borderColor": "rgba(33,36,44,0.32)",
+          "borderWidth": 2,
+          "paddingLeft": 15,
+          "paddingRight": 15,
         },
         "alignItems": "center",
         "background": "none",
@@ -636,7 +639,7 @@ exports[`wonder-blocks-button example 3 1`] = `
         "userSelect": "none",
       }
     }
-    tabIndex={-1}
+    tabIndex={0}
     type="button"
   >
     <span
@@ -662,8 +665,8 @@ exports[`wonder-blocks-button example 3 1`] = `
     </span>
   </button>
   <button
+    aria-disabled={true}
     className=""
-    disabled={true}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -709,7 +712,7 @@ exports[`wonder-blocks-button example 3 1`] = `
         "userSelect": "none",
       }
     }
-    tabIndex={-1}
+    tabIndex={0}
     type="button"
   >
     <span
@@ -760,8 +763,8 @@ exports[`wonder-blocks-button example 4 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -833,8 +836,8 @@ exports[`wonder-blocks-button example 4 1`] = `
     </span>
   </button>
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -909,8 +912,8 @@ exports[`wonder-blocks-button example 4 1`] = `
     </span>
   </button>
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -983,8 +986,8 @@ exports[`wonder-blocks-button example 4 1`] = `
     </span>
   </button>
   <button
+    aria-disabled={true}
     className=""
-    disabled={true}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -1005,7 +1008,7 @@ exports[`wonder-blocks-button example 4 1`] = `
           "border": 0,
         },
         ":focus": Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+          "boxShadow": "0 0 0 1px rgba(33,36,44,0.32), 0 0 0 3px #b5cefb",
         },
         "alignItems": "center",
         "background": "#b5cefb",
@@ -1030,7 +1033,7 @@ exports[`wonder-blocks-button example 4 1`] = `
         "userSelect": "none",
       }
     }
-    tabIndex={-1}
+    tabIndex={0}
     type="button"
   >
     <span
@@ -1056,8 +1059,8 @@ exports[`wonder-blocks-button example 4 1`] = `
     </span>
   </button>
   <button
+    aria-disabled={true}
     className=""
-    disabled={true}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -1078,7 +1081,10 @@ exports[`wonder-blocks-button example 4 1`] = `
           "border": 0,
         },
         ":focus": Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+          "borderColor": "rgba(255,255,255,0.50)",
+          "borderWidth": 2,
+          "paddingLeft": 15,
+          "paddingRight": 15,
         },
         "alignItems": "center",
         "background": "none",
@@ -1106,7 +1112,7 @@ exports[`wonder-blocks-button example 4 1`] = `
         "userSelect": "none",
       }
     }
-    tabIndex={-1}
+    tabIndex={0}
     type="button"
   >
     <span
@@ -1132,8 +1138,8 @@ exports[`wonder-blocks-button example 4 1`] = `
     </span>
   </button>
   <button
+    aria-disabled={true}
     className=""
-    disabled={true}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -1179,7 +1185,7 @@ exports[`wonder-blocks-button example 4 1`] = `
         "userSelect": "none",
       }
     }
-    tabIndex={-1}
+    tabIndex={0}
     type="button"
   >
     <span
@@ -1249,8 +1255,8 @@ exports[`wonder-blocks-button example 5 1`] = `
     }
   >
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -1322,8 +1328,8 @@ exports[`wonder-blocks-button example 5 1`] = `
       </span>
     </button>
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -1398,8 +1404,8 @@ exports[`wonder-blocks-button example 5 1`] = `
       </span>
     </button>
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -1493,8 +1499,8 @@ exports[`wonder-blocks-button example 5 1`] = `
     }
   >
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -1566,8 +1572,8 @@ exports[`wonder-blocks-button example 5 1`] = `
       </span>
     </button>
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -1642,8 +1648,8 @@ exports[`wonder-blocks-button example 5 1`] = `
       </span>
     </button>
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -1737,8 +1743,8 @@ exports[`wonder-blocks-button example 5 1`] = `
     }
   >
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -1810,8 +1816,8 @@ exports[`wonder-blocks-button example 5 1`] = `
       </span>
     </button>
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -1886,8 +1892,8 @@ exports[`wonder-blocks-button example 5 1`] = `
       </span>
     </button>
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -1984,9 +1990,9 @@ exports[`wonder-blocks-button example 6 1`] = `
   }
 >
   <button
+    aria-disabled={true}
     aria-label="loading"
     className=""
-    disabled={true}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -2007,7 +2013,7 @@ exports[`wonder-blocks-button example 6 1`] = `
           "border": 0,
         },
         ":focus": Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+          "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px rgba(33,36,44,0.32)",
         },
         "alignItems": "center",
         "background": "rgba(33,36,44,0.32)",
@@ -2032,7 +2038,7 @@ exports[`wonder-blocks-button example 6 1`] = `
         "userSelect": "none",
       }
     }
-    tabIndex={-1}
+    tabIndex={0}
     type="button"
   >
     <span
@@ -2112,9 +2118,9 @@ exports[`wonder-blocks-button example 6 1`] = `
     </div>
   </button>
   <button
+    aria-disabled={true}
     aria-label="loading"
     className=""
-    disabled={true}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -2135,7 +2141,7 @@ exports[`wonder-blocks-button example 6 1`] = `
           "border": 0,
         },
         ":focus": Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+          "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px rgba(33,36,44,0.32)",
         },
         "alignItems": "center",
         "background": "rgba(33,36,44,0.32)",
@@ -2160,7 +2166,7 @@ exports[`wonder-blocks-button example 6 1`] = `
         "userSelect": "none",
       }
     }
-    tabIndex={-1}
+    tabIndex={0}
     type="button"
   >
     <span
@@ -2240,9 +2246,9 @@ exports[`wonder-blocks-button example 6 1`] = `
     </div>
   </button>
   <button
+    aria-disabled={true}
     aria-label="loading"
     className=""
-    disabled={true}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -2263,7 +2269,7 @@ exports[`wonder-blocks-button example 6 1`] = `
           "border": 0,
         },
         ":focus": Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
+          "boxShadow": "0 0 0 1px #ffffff, 0 0 0 3px rgba(33,36,44,0.32)",
         },
         "alignItems": "center",
         "background": "rgba(33,36,44,0.32)",
@@ -2288,7 +2294,7 @@ exports[`wonder-blocks-button example 6 1`] = `
         "userSelect": "none",
       }
     }
-    tabIndex={-1}
+    tabIndex={0}
     type="button"
   >
     <span
@@ -2459,8 +2465,8 @@ exports[`wonder-blocks-button example 7 1`] = `
     </span>
   </a>
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -3354,8 +3360,8 @@ exports[`wonder-blocks-button example 12 1`] = `
     }
   >
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -3447,8 +3453,8 @@ exports[`wonder-blocks-button example 12 1`] = `
       </span>
     </button>
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -3543,8 +3549,8 @@ exports[`wonder-blocks-button example 12 1`] = `
       </span>
     </button>
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -3658,8 +3664,8 @@ exports[`wonder-blocks-button example 12 1`] = `
     }
   >
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -3752,8 +3758,8 @@ exports[`wonder-blocks-button example 12 1`] = `
       </span>
     </button>
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -3849,8 +3855,8 @@ exports[`wonder-blocks-button example 12 1`] = `
       </span>
     </button>
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -3971,8 +3977,8 @@ exports[`wonder-blocks-button example 13 1`] = `
     onSubmit={[Function]}
   >
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -4067,8 +4073,8 @@ exports[`wonder-blocks-button example 14 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -4181,8 +4187,8 @@ exports[`wonder-blocks-button example 15 1`] = `
     }
   >
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -4293,8 +4299,8 @@ exports[`wonder-blocks-button example 15 1`] = `
     }
   >
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -4389,8 +4395,8 @@ exports[`wonder-blocks-button example 16 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -4466,8 +4472,8 @@ exports[`wonder-blocks-button example 16 1`] = `
     </span>
   </button>
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -4564,8 +4570,8 @@ exports[`wonder-blocks-button example 17 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -4641,8 +4647,8 @@ exports[`wonder-blocks-button example 17 1`] = `
     </span>
   </button>
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -4757,8 +4763,8 @@ exports[`wonder-blocks-button example 18 1`] = `
     }
   >
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -4831,8 +4837,8 @@ exports[`wonder-blocks-button example 18 1`] = `
       </span>
     </button>
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -4927,9 +4933,9 @@ exports[`wonder-blocks-button example 19 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     aria-label=""
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}

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

@@ -1,7 +1,9 @@
 // @flow
 import * as React from "react";
 import {MemoryRouter, Route, Switch} from "react-router-dom";
+import {render, screen} from "@testing-library/react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import Button from "../button.js";
 
@@ -785,6 +787,56 @@ describe("Button", () => {
         });
     });
 
+    describe("button focus", () => {
+        test("primary button can have focus", async () => {
+            // Arrange
+            render(<Button testId={"button-focus-test"}>Label</Button>);
+
+            // Act
+            const button = screen.getByTestId("button-focus-test");
+            button.focus();
+
+            // Assert
+            expect(button).toHaveFocus();
+        });
+
+        test("primary button can have focus when disabled", async () => {
+            // Arrange
+            render(
+                <Button disabled={true} testId={"button-focus-test"}>
+                    Label
+                </Button>,
+            );
+
+            // Act
+            const button = screen.getByTestId("button-focus-test");
+            button.focus();
+
+            // Assert
+            expect(button).toHaveFocus();
+        });
+
+        test("tertiary button can have focus when disabled", async () => {
+            // Arrange
+            render(
+                <Button
+                    disabled={true}
+                    testId={"button-focus-test"}
+                    kind="tertiary"
+                >
+                    Label
+                </Button>,
+            );
+
+            // Act
+            const button = screen.getByTestId("button-focus-test");
+            button.focus();
+
+            // Assert
+            expect(button).toHaveFocus();
+        });
+    });
+
     describe("type='submit'", () => {
         test("submit button within form via click", () => {
             // Arrange

package/src/components/button-core.js

@@ -162,7 +162,7 @@ export default class ButtonCore extends React.Component<Props> {
                 <StyledButton
                     type={type || "button"}
                     {...commonProps}
-                    disabled={disabled}
+                    aria-disabled={disabled}
                 >
                     {contents}
                 </StyledButton>
@@ -291,6 +291,11 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
                 background: light ? fadedColor : offBlack32,
                 color: light ? color : white64,
                 cursor: "default",
+                ":focus": {
+                    boxShadow: `0 0 0 1px ${
+                        light ? offBlack32 : white
+                    }, 0 0 0 3px ${light ? fadedColor : offBlack32}`,
+                },
             },
         };
     } else if (kind === "secondary") {
@@ -318,6 +323,8 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
                 color: light ? fadedColor : activeColor,
                 borderColor: light ? fadedColor : activeColor,
                 borderWidth: 2,
+                // We need to reduce padding to offset the difference
+                // caused by the border becoming thicker on focus.
                 // The left padding for the button with icon should have 4px
                 // less padding
                 paddingLeft: iconWidth ? padding - 5 : padding - 1,
@@ -327,9 +334,20 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
                 color: light ? white50 : offBlack32,
                 borderColor: light ? fadedColor : offBlack32,
                 cursor: "default",
+                ":focus": {
+                    borderColor: light ? white50 : offBlack32,
+                    borderWidth: 2,
+                    // We need to reduce padding to offset the difference
+                    // caused by the border becoming thicker on focus.
+                    // The left padding for the button with icon should have 4px
+                    // less padding
+                    paddingLeft: iconWidth ? padding - 5 : padding - 1,
+                    paddingRight: padding - 1,
+                },
             },
         };
     } else if (kind === "tertiary") {
+        // TODO(FEI-4229): Make tertiary buttons focusable
         newStyles = {
             default: {
                 background: "none",