@khanacademy/wonder-blocks-modal 2.3.11 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-modal
 
+## 3.0.1
+
+### Patch Changes
+
+-   Updated dependencies [ceb111df]
+    -   @khanacademy/wonder-blocks-icon-button@3.4.15
+
+## 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

@@ -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

@@ -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

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "2.3.11",
+  "version": "3.0.1",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -20,7 +20,7 @@
     "@khanacademy/wonder-blocks-color": "^1.2.0",
     "@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-icon-button": "^3.4.15",
     "@khanacademy/wonder-blocks-layout": "^1.4.12",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-typography": "^1.1.34"

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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