npm - @khanacademy/wonder-blocks-modal - Versions diffs - 2.3.11 → 3.0.0 - Mend

@khanacademy/wonder-blocks-modal 2.3.11 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/CHANGELOG.md +6 -0
package/dist/es/index.js +5 -3
package/dist/index.js +10 -3
package/package.json +1 -1
package/src/components/__docs__/modal-launcher.stories.js +2 -1
package/src/components/__docs__/one-pane-dialog.argtypes.js +6 -0
package/src/components/__tests__/one-pane-dialog.test.js +17 -0
package/src/components/modal-dialog.js +16 -4
package/src/components/one-pane-dialog.js +8 -3

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-modal
+## 3.0.0
+### Major Changes
+-   13cdc7fe: Handle `aria-describedby` in `OnePaneDialog`, and remove unused aria props from Flow types
 ## 2.3.11
 ### Patch Changes

package/dist/es/index.js CHANGED Viewed

@@ -21,7 +21,7 @@ class ModalDialog extends React.Component {
       children,
       testId,
       "aria-labelledby": ariaLabelledBy,
-      "aria-label": ariaLabel
+      "aria-describedby": ariaDescribedBy
     } = this.props;
     const contextValue = {
       ssrSize: "large",
@@ -41,7 +41,7 @@ class ModalDialog extends React.Component {
       role: role,
       "aria-modal": "true",
       "aria-labelledby": ariaLabelledBy,
-      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
       style: styles.dialog,
       testId: testId
     }, children), above && React.createElement(View, {
@@ -806,7 +806,8 @@ class OnePaneDialog extends React.Component {
       closeButtonVisible,
       testId,
       titleId,
-      role
+      role,
+      "aria-describedby": ariaDescribedBy
     } = this.props;
     return React.createElement(MediaLayout, {
       styleSheets: styleSheets
@@ -821,6 +822,7 @@ class OnePaneDialog extends React.Component {
       below: below,
       testId: testId,
       "aria-labelledby": uniqueId,
+      "aria-describedby": ariaDescribedBy,
       role: role
     }, React.createElement(ModalPanel, {
       onClose: onClose,

package/dist/index.js CHANGED Viewed

@@ -388,8 +388,13 @@ class ModalDialog extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       style,
       children,
       testId,
+      /* eslint-disable react/prop-types */
+      // the react/prop-types plugin does not like these
       "aria-labelledby": ariaLabelledBy,
-      "aria-label": ariaLabel
+      "aria-describedby": ariaDescribedBy
+      /* eslint-enable react/prop-types */
     } = this.props;
     const contextValue = {
       ssrSize: "large",
@@ -409,7 +414,7 @@ class ModalDialog extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       role: role,
       "aria-modal": "true",
       "aria-labelledby": ariaLabelledBy,
-      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
       style: styles.dialog,
       testId: testId
     }, children), above && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["View"], {
@@ -1043,7 +1048,8 @@ class OnePaneDialog extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       closeButtonVisible,
       testId,
       titleId,
-      role
+      role,
+      "aria-describedby": ariaDescribedBy
     } = this.props;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["MediaLayout"], {
       styleSheets: styleSheets
@@ -1058,6 +1064,7 @@ class OnePaneDialog extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       below: below,
       testId: testId,
       "aria-labelledby": uniqueId,
+      "aria-describedby": ariaDescribedBy,
       role: role
     }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_modal_panel_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"], {
       onClose: onClose,

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "2.3.11",
+  "version": "3.0.0",
   "design": "v2",
   "publishConfig": {
     "access": "public"

package/src/components/__docs__/modal-launcher.stories.js CHANGED Viewed

@@ -433,7 +433,7 @@ export const FocusTrap: StoryComponentType = () => {
             closeButtonVisible={false}
             content={
                 <>
-                    <Body>
+                    <Body id="focus-trap-story-body-text">
                         This modal demonstrates how the focus trap works with
                         form elements (or focusable elements). Also demonstrates
                         how the focus trap is moved to the next modal when it is
@@ -467,6 +467,7 @@ export const FocusTrap: StoryComponentType = () => {
                     </Button>
                 </>
             }
+            aria-describedby="focus-trap-story-body-text"
         />
     );

package/src/components/__docs__/one-pane-dialog.argtypes.js CHANGED Viewed

@@ -99,4 +99,10 @@ export default {
             not provided, a unique id will be generated.`,
         table: {type: {summary: "string"}},
     },
+    "aria-describedby": {
+        control: {type: "text"},
+        description:
+            "The ID of the content describing this dialog, if applicable",
+        table: {type: {summary: "string"}},
+    },
 };

package/src/components/__tests__/one-pane-dialog.test.js CHANGED Viewed

@@ -68,4 +68,21 @@ describe("OnePaneDialog", () => {
         // Assert
         expect(screen.getByLabelText("Breadcrumbs")).toBeInTheDocument();
     });
+    it("applies aria-describedby to the modal", () => {
+        // Arrange
+        render(
+            <OnePaneDialog
+                title="unused"
+                content={<p id="description">cool dialog</p>}
+                aria-describedby="description"
+            />,
+        );
+        // Act
+        const modal = screen.getByRole("dialog");
+        // Assert
+        expect(modal).toHaveDescription(/cool dialog/i);
+    });
 });

package/src/components/modal-dialog.js CHANGED Viewed

@@ -7,12 +7,11 @@ import {
     MEDIA_MODAL_SPEC,
 } from "@khanacademy/wonder-blocks-layout";
 import {View} from "@khanacademy/wonder-blocks-core";
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
 import type {MediaLayoutContextValue} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 type Props = {|
-    ...AriaProps,
     /**
      * The dialog content
      */
@@ -48,6 +47,16 @@ type Props = {|
      * Test ID used for e2e testing.
      */
     testId?: string,
+    /**
+     * The ID of the content labelling this dialog, if applicable.
+     */
+    "aria-labelledby"?: string,
+    /**
+     * The ID of the content describing this dialog, if applicable.
+     */
+    "aria-describedby"?: string,
 |};
 type DefaultProps = {|
@@ -77,8 +86,11 @@ export default class ModalDialog extends React.Component<Props> {
             style,
             children,
             testId,
+            /* eslint-disable react/prop-types */
+            // the react/prop-types plugin does not like these
             "aria-labelledby": ariaLabelledBy,
-            "aria-label": ariaLabel,
+            "aria-describedby": ariaDescribedBy,
+            /* eslint-enable react/prop-types */
         } = this.props;
         const contextValue: MediaLayoutContextValue = {
@@ -96,7 +108,7 @@ export default class ModalDialog extends React.Component<Props> {
                                 role={role}
                                 aria-modal="true"
                                 aria-labelledby={ariaLabelledBy}
-                                aria-label={ariaLabel}
+                                aria-describedby={ariaDescribedBy}
                                 style={styles.dialog}
                                 testId={testId}
                             >

package/src/components/one-pane-dialog.js CHANGED Viewed

@@ -3,7 +3,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {typeof Breadcrumbs} from "@khanacademy/wonder-blocks-breadcrumbs";
 import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
 import {IDProvider} from "@khanacademy/wonder-blocks-core";
 import ModalDialog from "./modal-dialog.js";
@@ -11,8 +11,6 @@ import ModalPanel from "./modal-panel.js";
 import ModalHeader from "./modal-header.js";
 type Common = {|
-    ...AriaProps,
     /**
      * The content of the modal, appearing between the titlebar and footer.
      */
@@ -84,6 +82,11 @@ type Common = {|
      * not provided, a unique id will be generated.
      */
     titleId?: string,
+    /**
+     * The ID of the content describing this dialog, if applicable.
+     */
+    "aria-describedby"?: string,
 |};
 type WithSubtitle = {|
@@ -195,6 +198,7 @@ export default class OnePaneDialog extends React.Component<Props> {
             testId,
             titleId,
             role,
+            "aria-describedby": ariaDescribedBy,
         } = this.props;
         return (
@@ -208,6 +212,7 @@ export default class OnePaneDialog extends React.Component<Props> {
                                 below={below}
                                 testId={testId}
                                 aria-labelledby={uniqueId}
+                                aria-describedby={ariaDescribedBy}
                                 role={role}
                             >
                                 <ModalPanel