@instructure/ui-modal 10.29.0 → 10.30.0

package/src/Modal/index.tsx

@@ -50,6 +50,7 @@ import type {
   ModalPropsForPortal,
   ModalPropsForTransition
 } from './props'
+import ModalContext from './ModalContext'
 
 /**
 ---
@@ -86,7 +87,8 @@ class Modal extends Component<ModalProps, ModalState> {
     this.state = {
       transitioning: false,
       open: props.open ?? false,
-      windowHeight: 99999
+      windowHeight: 99999,
+      bodyScrollAriaLabel: undefined
     }
   }
 
@@ -302,13 +304,21 @@ class Modal extends Component<ModalProps, ModalState> {
             onClose
           )}
         >
-          {constrain === 'parent' ? (
-            <span css={this.props.styles?.constrainContext}>
-              {this.renderDialog(passthroughProps)}
-            </span>
-          ) : (
-            this.renderDialog(passthroughProps)
-          )}
+          <ModalContext.Provider
+            value={{
+              bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
+              setBodyScrollAriaLabel: (txt: string) =>
+                this.setState({ bodyScrollAriaLabel: txt })
+            }}
+          >
+            {constrain === 'parent' ? (
+              <span css={this.props.styles?.constrainContext}>
+                {this.renderDialog(passthroughProps)}
+              </span>
+            ) : (
+              this.renderDialog(passthroughProps)
+            )}
+          </ModalContext.Provider>
         </Transition>
       </Portal>
     )

package/src/Modal/props.ts

@@ -197,6 +197,10 @@ type ModalState = {
   transitioning: boolean
   open: boolean
   windowHeight: number
+  /**
+   * The `aria-label` on the Modal's body if it's scrollable.
+   */
+  bodyScrollAriaLabel?: string
 }
 
 const propTypes: PropValidators<PropKeys> = {