@khanacademy/wonder-blocks-modal 6.0.0 → 6.0.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/wonder-blocks-modal
 
+## 6.0.1
+
+### Patch Changes
+
+-   0955be7e: - ModalBackdrop: Change initial focus behavior. Focus on the dismiss button (X) by default.
+
+    -   CloseButton: Override `:focus` styles on the dismiss button to make it visually distinct when the focus is set programmatically.
+
+-   Updated dependencies [f4abd572]
+-   Updated dependencies [0955be7e]
+    -   @khanacademy/wonder-blocks-core@9.0.0
+    -   @khanacademy/wonder-blocks-icon-button@6.0.1
+    -   @khanacademy/wonder-blocks-breadcrumbs@3.0.1
+    -   @khanacademy/wonder-blocks-layout@3.0.1
+    -   @khanacademy/wonder-blocks-typography@3.0.1
+
 ## 6.0.0
 
 ### Major Changes

package/dist/components/modal-backdrop.d.ts

@@ -5,7 +5,8 @@ type Props = {
     onCloseModal: () => unknown;
     /**
      * The selector for the element that will be focused when the dialog shows.
-     * When not set, the first tabbable element within the dialog will be used.
+     * When not set, the first tabbable element within the dialog will be used,
+     * which usually is the dismiss button (X).
      */
     initialFocusId?: string;
     /**

package/dist/es/index.js

@@ -26,7 +26,9 @@ const theme$1 = {
     }
   },
   border: {
-    radius: tokens.border.radius.medium_4
+    radius: tokens.border.radius.medium_4,
+    width: tokens.border.width.thin,
+    color: tokens.color.blue
   },
   spacing: {
     dialog: {
@@ -304,7 +306,7 @@ class FocusTrap extends React.Component {
 
 const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
 
-const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
+const FOCUSABLE_ELEMENTS = "a[href], details, input, textarea, select, button";
 function findFocusableNodes(root) {
   return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
 }
@@ -709,7 +711,14 @@ const themedStylesFn = theme => ({
     position: "absolute",
     right: theme.spacing.panel.closeButton,
     top: theme.spacing.panel.closeButton,
-    zIndex: 1
+    zIndex: 1,
+    ":focus": {
+      outlineWidth: theme.border.width,
+      outlineColor: theme.border.color,
+      outlineOffset: 1,
+      outlineStyle: "solid",
+      borderRadius: theme.border.radius
+    }
   },
   dark: {
     background: theme.color.bg.inverse,

package/dist/index.js

@@ -56,7 +56,9 @@ const theme$1 = {
     }
   },
   border: {
-    radius: tokens__namespace.border.radius.medium_4
+    radius: tokens__namespace.border.radius.medium_4,
+    width: tokens__namespace.border.width.thin,
+    color: tokens__namespace.color.blue
   },
   spacing: {
     dialog: {
@@ -334,7 +336,7 @@ class FocusTrap extends React__namespace.Component {
 
 const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
 
-const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';
+const FOCUSABLE_ELEMENTS = "a[href], details, input, textarea, select, button";
 function findFocusableNodes(root) {
   return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
 }
@@ -739,7 +741,14 @@ const themedStylesFn = theme => ({
     position: "absolute",
     right: theme.spacing.panel.closeButton,
     top: theme.spacing.panel.closeButton,
-    zIndex: 1
+    zIndex: 1,
+    ":focus": {
+      outlineWidth: theme.border.width,
+      outlineColor: theme.border.color,
+      outlineOffset: 1,
+      outlineStyle: "solid",
+      borderRadius: theme.border.radius
+    }
   },
   dark: {
     background: theme.color.bg.inverse,

package/dist/themes/default.d.ts

@@ -13,6 +13,8 @@ declare const theme: {
     };
     border: {
         radius: number;
+        width: number;
+        color: string;
     };
     spacing: {
         dialog: {

package/dist/themes/khanmigo.d.ts

@@ -16,6 +16,8 @@ declare const theme: {
     };
     border: {
         radius: number;
+        width: number;
+        color: string;
     };
     spacing: {
         dialog: {

package/dist/themes/themed-modal-dialog.d.ts

@@ -23,6 +23,8 @@ export declare const ModalDialogThemeContext: React.Context<{
     };
     border: {
         radius: number;
+        width: number;
+        color: string;
     };
     spacing: {
         dialog: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -16,14 +16,14 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-breadcrumbs": "^3.0.0",
-    "@khanacademy/wonder-blocks-core": "^8.0.0",
-    "@khanacademy/wonder-blocks-icon-button": "^6.0.0",
-    "@khanacademy/wonder-blocks-layout": "^3.0.0",
+    "@khanacademy/wonder-blocks-breadcrumbs": "^3.0.1",
+    "@khanacademy/wonder-blocks-core": "^9.0.0",
+    "@khanacademy/wonder-blocks-icon-button": "^6.0.1",
+    "@khanacademy/wonder-blocks-layout": "^3.0.1",
     "@khanacademy/wonder-blocks-theming": "^3.0.0",
     "@khanacademy/wonder-blocks-timing": "^6.0.0",
     "@khanacademy/wonder-blocks-tokens": "^3.0.0",
-    "@khanacademy/wonder-blocks-typography": "^3.0.0"
+    "@khanacademy/wonder-blocks-typography": "^3.0.1"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -32,7 +32,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-breadcrumbs": "^3.0.0",
+    "@khanacademy/wonder-blocks-breadcrumbs": "^3.0.1",
     "@khanacademy/wb-dev-build-settings": "^2.0.0"
   }
 }