@instructure/ui-modal 11.5.0 → 11.5.1-snapshot-1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.5.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.5.0...v11.5.1-snapshot-1) (2026-02-18)
+
+
+### Bug Fixes
+
+* **ui-modal:** voiceOver in Chrome treats scrollable modal body as single interactive object preventing line-by-line navigation ([0be3fb1](https://github.com/instructure/instructure-ui/commit/0be3fb1dee541a37c2d38ae6656fd0330f651265))
+
+
+
+
+
 # [11.5.0](https://github.com/instructure/instructure-ui/compare/v11.4.0...v11.5.0) (2026-02-03)
 
 **Note:** Version bump only for package @instructure/ui-modal

package/es/Modal/ModalBody/index.js

@@ -33,13 +33,14 @@ import { withStyle } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import { allowedProps } from "./props.js";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import ModalContext from "../ModalContext.js";
 /**
 ---
 parent: Modal
 id: Modal.Body
 ---
 **/
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_ModalBody = class ModalBody extends Component {
   constructor(props) {
     super(props);
@@ -82,7 +83,7 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
     return void 0;
   }
   render() {
-    var _this$props$styles, _finalRef$scrollHeigh, _finalRef$getBounding, _finalRef$getBounding2;
+    var _finalRef$scrollHeigh, _finalRef$getBounding, _finalRef$getBounding2;
     const _this$props3 = this.props,
       as = _this$props3.as,
       elementRef = _this$props3.elementRef,
@@ -97,23 +98,29 @@ let ModalBody = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
     // TODO rethink, the 'as' prop, likely its not a good idea to allow React
     // components. See INSTUI-4674
     const finalRef = this.getFinalRef(this.ref);
-    return _jsx(View, {
-      ...passthroughProps,
-      display: "block",
-      "data-cid": "ModalBody",
-      width: isFit ? '100%' : void 0,
-      height: isFit ? '100%' : void 0,
-      elementRef: this.handleRef,
-      as: as,
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalBody,
-      padding: padding
-      // check if there is a scrollbar, if so, the element has to be tabbable to be able to scroll with keyboard only
-      // epsilon tolerance is used to avoid scrollbar for rounding errors
-      ,
-      ...(finalRef && Math.abs(((_finalRef$scrollHeigh = finalRef.scrollHeight) !== null && _finalRef$scrollHeigh !== void 0 ? _finalRef$scrollHeigh : 0) - ((_finalRef$getBounding = (_finalRef$getBounding2 = finalRef.getBoundingClientRect()) === null || _finalRef$getBounding2 === void 0 ? void 0 : _finalRef$getBounding2.height) !== null && _finalRef$getBounding !== void 0 ? _finalRef$getBounding : 0)) > 1 ? {
-        tabIndex: 0
-      } : {}),
-      children: children
+    const hasScrollbar = finalRef && Math.abs(((_finalRef$scrollHeigh = finalRef.scrollHeight) !== null && _finalRef$scrollHeigh !== void 0 ? _finalRef$scrollHeigh : 0) - ((_finalRef$getBounding = (_finalRef$getBounding2 = finalRef.getBoundingClientRect()) === null || _finalRef$getBounding2 === void 0 ? void 0 : _finalRef$getBounding2.height) !== null && _finalRef$getBounding !== void 0 ? _finalRef$getBounding : 0)) > 1;
+    return _jsx(ModalContext.Consumer, {
+      children: value => {
+        var _this$props$styles;
+        return _jsx(View, {
+          ...passthroughProps,
+          display: "block",
+          "data-cid": "ModalBody",
+          width: isFit ? '100%' : void 0,
+          height: isFit ? '100%' : void 0,
+          elementRef: this.handleRef,
+          as: as,
+          css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalBody,
+          padding: padding
+          // check if there is a scrollbar, if so, the element has to be tabbable
+          ,
+          ...(hasScrollbar ? {
+            tabIndex: 0,
+            'aria-label': value.bodyScrollAriaLabel
+          } : {}),
+          children: children
+        });
+      }
     });
   }
 }, _ModalBody.displayName = "ModalBody", _ModalBody.componentId = 'Modal.Body', _ModalBody.allowedProps = allowedProps, _ModalBody.defaultProps = {

package/es/Modal/ModalContext.js

@@ -0,0 +1,34 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { createContext } from 'react';
+/**
+ * React context created by the `Modal` component
+ * @private
+ */
+const ModalContext = /*#__PURE__*/createContext({
+  bodyScrollAriaLabel: void 0
+});
+export default ModalContext;
+export { ModalContext };

package/es/Modal/ModalHeader/index.js

@@ -32,6 +32,7 @@ import { CloseButton } from '@instructure/ui-buttons';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import { allowedProps } from "./props.js";
+import ModalContext from "../ModalContext.js";
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /**
 ---
@@ -43,8 +44,30 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
   constructor(...args) {
     super(...args);
     this.ref = null;
+    /**
+     * Gets all text in a DOM subtree, text under <button> nodes is excluded
+     */
+    this.getTextExcludingButtons = root => {
+      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+        acceptNode(node) {
+          var _node$parentElement;
+          return (_node$parentElement = node.parentElement) !== null && _node$parentElement !== void 0 && _node$parentElement.closest('button') ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
+        }
+      });
+      let text = '';
+      let current;
+      while (current = walker.nextNode()) {
+        text += current.nodeValue;
+      }
+      return text;
+    };
     this.handleRef = el => {
       this.ref = el;
+      if (el) {
+        var _this$context$setBody, _this$context;
+        const txt = this.getTextExcludingButtons(el);
+        (_this$context$setBody = (_this$context = this.context).setBodyScrollAriaLabel) === null || _this$context$setBody === void 0 ? void 0 : _this$context$setBody.call(_this$context, txt);
+      }
     };
     this.makeStyleProps = () => {
       return {
@@ -85,6 +108,6 @@ let ModalHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
 }, _ModalHeader.displayName = "ModalHeader", _ModalHeader.componentId = 'Modal.Header', _ModalHeader.allowedProps = allowedProps, _ModalHeader.defaultProps = {
   variant: 'default',
   spacing: 'default'
-}, _ModalHeader)) || _class);
+}, _ModalHeader.contextType = ModalContext, _ModalHeader)) || _class);
 export default ModalHeader;
 export { ModalHeader };

package/es/Modal/index.js

@@ -39,13 +39,14 @@ import { withStyle } from '@instructure/emotion';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import { allowedProps } from "./props.js";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import ModalContext from "./ModalContext.js";
 /**
 ---
 category: components
 tags: overlay, portal, dialog
 ---
 **/
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Modal = class Modal extends Component {
   constructor(props) {
     var _props$open;
@@ -78,7 +79,8 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
     this.state = {
       transitioning: false,
       open: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false,
-      windowHeight: 99999
+      windowHeight: 99999,
+      bodyScrollAriaLabel: void 0
     };
   }
   componentDidMount() {
@@ -228,10 +230,18 @@ let Modal = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
         onExit: onExit,
         onExiting: onExiting,
         onExited: createChainedFunction(this.handleTransitionComplete, onExited, onClose),
-        children: constrain === 'parent' ? _jsx("span", {
-          css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext,
-          children: this.renderDialog(passthroughProps)
-        }) : this.renderDialog(passthroughProps)
+        children: _jsx(ModalContext.Provider, {
+          value: {
+            bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
+            setBodyScrollAriaLabel: txt => this.setState({
+              bodyScrollAriaLabel: txt
+            })
+          },
+          children: constrain === 'parent' ? _jsx("span", {
+            css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext,
+            children: this.renderDialog(passthroughProps)
+          }) : this.renderDialog(passthroughProps)
+        })
       })
     });
   }

package/lib/Modal/ModalBody/index.js

@@ -14,6 +14,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _ModalContext = _interopRequireDefault(require("../ModalContext"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["as", "elementRef", "overflow", "variant", "padding", "children"];
 var _dec, _class, _ModalBody;
@@ -88,7 +89,7 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
     return void 0;
   }
   render() {
-    var _this$props$styles, _finalRef$scrollHeigh, _finalRef$getBounding, _finalRef$getBounding2;
+    var _finalRef$scrollHeigh, _finalRef$getBounding, _finalRef$getBounding2;
     const _this$props3 = this.props,
       as = _this$props3.as,
       elementRef = _this$props3.elementRef,
@@ -103,23 +104,29 @@ let ModalBody = exports.ModalBody = (_dec = (0, _emotion.withStyle)(_styles.defa
     // TODO rethink, the 'as' prop, likely its not a good idea to allow React
     // components. See INSTUI-4674
     const finalRef = this.getFinalRef(this.ref);
-    return (0, _jsxRuntime.jsx)(_View.View, {
-      ...passthroughProps,
-      display: "block",
-      "data-cid": "ModalBody",
-      width: isFit ? '100%' : void 0,
-      height: isFit ? '100%' : void 0,
-      elementRef: this.handleRef,
-      as: as,
-      css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalBody,
-      padding: padding
-      // check if there is a scrollbar, if so, the element has to be tabbable to be able to scroll with keyboard only
-      // epsilon tolerance is used to avoid scrollbar for rounding errors
-      ,
-      ...(finalRef && Math.abs(((_finalRef$scrollHeigh = finalRef.scrollHeight) !== null && _finalRef$scrollHeigh !== void 0 ? _finalRef$scrollHeigh : 0) - ((_finalRef$getBounding = (_finalRef$getBounding2 = finalRef.getBoundingClientRect()) === null || _finalRef$getBounding2 === void 0 ? void 0 : _finalRef$getBounding2.height) !== null && _finalRef$getBounding !== void 0 ? _finalRef$getBounding : 0)) > 1 ? {
-        tabIndex: 0
-      } : {}),
-      children: children
+    const hasScrollbar = finalRef && Math.abs(((_finalRef$scrollHeigh = finalRef.scrollHeight) !== null && _finalRef$scrollHeigh !== void 0 ? _finalRef$scrollHeigh : 0) - ((_finalRef$getBounding = (_finalRef$getBounding2 = finalRef.getBoundingClientRect()) === null || _finalRef$getBounding2 === void 0 ? void 0 : _finalRef$getBounding2.height) !== null && _finalRef$getBounding !== void 0 ? _finalRef$getBounding : 0)) > 1;
+    return (0, _jsxRuntime.jsx)(_ModalContext.default.Consumer, {
+      children: value => {
+        var _this$props$styles;
+        return (0, _jsxRuntime.jsx)(_View.View, {
+          ...passthroughProps,
+          display: "block",
+          "data-cid": "ModalBody",
+          width: isFit ? '100%' : void 0,
+          height: isFit ? '100%' : void 0,
+          elementRef: this.handleRef,
+          as: as,
+          css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.modalBody,
+          padding: padding
+          // check if there is a scrollbar, if so, the element has to be tabbable
+          ,
+          ...(hasScrollbar ? {
+            tabIndex: 0,
+            'aria-label': value.bodyScrollAriaLabel
+          } : {}),
+          children: children
+        });
+      }
     });
   }
 }, _ModalBody.displayName = "ModalBody", _ModalBody.componentId = 'Modal.Body', _ModalBody.allowedProps = _props.allowedProps, _ModalBody.defaultProps = {

package/lib/Modal/ModalContext.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ModalContext = void 0;
+var _react = require("react");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * React context created by the `Modal` component
+ * @private
+ */
+const ModalContext = exports.ModalContext = /*#__PURE__*/(0, _react.createContext)({
+  bodyScrollAriaLabel: void 0
+});
+var _default = exports.default = ModalContext;

package/lib/Modal/ModalHeader/index.js

@@ -14,6 +14,7 @@ var _CloseButton = require("@instructure/ui-buttons/lib/CloseButton");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _ModalContext = _interopRequireDefault(require("../ModalContext"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["children"];
 var _dec, _class, _ModalHeader;
@@ -50,8 +51,30 @@ let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.
   constructor(...args) {
     super(...args);
     this.ref = null;
+    /**
+     * Gets all text in a DOM subtree, text under <button> nodes is excluded
+     */
+    this.getTextExcludingButtons = root => {
+      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+        acceptNode(node) {
+          var _node$parentElement;
+          return (_node$parentElement = node.parentElement) !== null && _node$parentElement !== void 0 && _node$parentElement.closest('button') ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
+        }
+      });
+      let text = '';
+      let current;
+      while (current = walker.nextNode()) {
+        text += current.nodeValue;
+      }
+      return text;
+    };
     this.handleRef = el => {
       this.ref = el;
+      if (el) {
+        var _this$context$setBody, _this$context;
+        const txt = this.getTextExcludingButtons(el);
+        (_this$context$setBody = (_this$context = this.context).setBodyScrollAriaLabel) === null || _this$context$setBody === void 0 ? void 0 : _this$context$setBody.call(_this$context, txt);
+      }
     };
     this.makeStyleProps = () => {
       return {
@@ -92,5 +115,5 @@ let ModalHeader = exports.ModalHeader = (_dec = (0, _emotion.withStyle)(_styles.
 }, _ModalHeader.displayName = "ModalHeader", _ModalHeader.componentId = 'Modal.Header', _ModalHeader.allowedProps = _props.allowedProps, _ModalHeader.defaultProps = {
   variant: 'default',
   spacing: 'default'
-}, _ModalHeader)) || _class);
+}, _ModalHeader.contextType = _ModalContext.default, _ModalHeader)) || _class);
 var _default = exports.default = ModalHeader;

package/lib/Modal/index.js

@@ -40,6 +40,7 @@ var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
 var _props = require("./props");
+var _ModalContext = _interopRequireDefault(require("./ModalContext"));
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 const _excluded = ["open", "onOpen", "onClose", "mountNode", "insertAt", "transition", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "constrain", "overflow"];
 var _dec, _class, _Modal;
@@ -104,7 +105,8 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
     this.state = {
       transitioning: false,
       open: (_props$open = props.open) !== null && _props$open !== void 0 ? _props$open : false,
-      windowHeight: 99999
+      windowHeight: 99999,
+      bodyScrollAriaLabel: void 0
     };
   }
   componentDidMount() {
@@ -254,10 +256,18 @@ let Modal = exports.Modal = (_dec = (0, _emotion.withStyle)(_styles.default, _th
         onExit: onExit,
         onExiting: onExiting,
         onExited: (0, _createChainedFunction.createChainedFunction)(this.handleTransitionComplete, onExited, onClose),
-        children: constrain === 'parent' ? (0, _jsxRuntime.jsx)("span", {
-          css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext,
-          children: this.renderDialog(passthroughProps)
-        }) : this.renderDialog(passthroughProps)
+        children: (0, _jsxRuntime.jsx)(_ModalContext.default.Provider, {
+          value: {
+            bodyScrollAriaLabel: this.state.bodyScrollAriaLabel,
+            setBodyScrollAriaLabel: txt => this.setState({
+              bodyScrollAriaLabel: txt
+            })
+          },
+          children: constrain === 'parent' ? (0, _jsxRuntime.jsx)("span", {
+            css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.constrainContext,
+            children: this.renderDialog(passthroughProps)
+          }) : this.renderDialog(passthroughProps)
+        })
       })
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "11.5.0",
+  "version": "11.5.1-snapshot-1",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -15,28 +15,28 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@instructure/console": "11.5.0",
-    "@instructure/shared-types": "11.5.0",
-    "@instructure/emotion": "11.5.0",
-    "@instructure/ui-buttons": "11.5.0",
-    "@instructure/ui-dialog": "11.5.0",
-    "@instructure/ui-dom-utils": "11.5.0",
-    "@instructure/ui-motion": "11.5.0",
-    "@instructure/ui-overlays": "11.5.0",
-    "@instructure/ui-portal": "11.5.0",
-    "@instructure/ui-utils": "11.5.0",
-    "@instructure/ui-react-utils": "11.5.0",
-    "@instructure/ui-view": "11.5.0"
+    "@instructure/console": "11.5.1-snapshot-1",
+    "@instructure/emotion": "11.5.1-snapshot-1",
+    "@instructure/ui-buttons": "11.5.1-snapshot-1",
+    "@instructure/shared-types": "11.5.1-snapshot-1",
+    "@instructure/ui-dialog": "11.5.1-snapshot-1",
+    "@instructure/ui-dom-utils": "11.5.1-snapshot-1",
+    "@instructure/ui-motion": "11.5.1-snapshot-1",
+    "@instructure/ui-overlays": "11.5.1-snapshot-1",
+    "@instructure/ui-react-utils": "11.5.1-snapshot-1",
+    "@instructure/ui-portal": "11.5.1-snapshot-1",
+    "@instructure/ui-utils": "11.5.1-snapshot-1",
+    "@instructure/ui-view": "11.5.1-snapshot-1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "@testing-library/user-event": "^14.6.1",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.5.0",
-    "@instructure/ui-color-utils": "11.5.0",
-    "@instructure/ui-position": "11.5.0",
-    "@instructure/ui-themes": "11.5.0"
+    "@instructure/ui-position": "11.5.1-snapshot-1",
+    "@instructure/ui-babel-preset": "11.5.1-snapshot-1",
+    "@instructure/ui-color-utils": "11.5.1-snapshot-1",
+    "@instructure/ui-themes": "11.5.1-snapshot-1"
   },
   "peerDependencies": {
     "react": ">=18 <=19"

package/src/Modal/ModalBody/index.tsx

@@ -35,6 +35,7 @@ import generateComponentTheme from './theme'
 import { allowedProps } from './props'
 import type { ModalBodyProps } from './props'
 import { UIElement } from '@instructure/shared-types'
+import ModalContext from '../ModalContext'
 
 /**
 ---
@@ -117,30 +118,37 @@ class ModalBody extends Component<ModalBodyProps> {
     // TODO rethink, the 'as' prop, likely its not a good idea to allow React
     // components. See INSTUI-4674
     const finalRef = this.getFinalRef(this.ref)
-
+    const hasScrollbar =
+      finalRef &&
+      Math.abs(
+        (finalRef.scrollHeight ?? 0) -
+          (finalRef.getBoundingClientRect()?.height ?? 0)
+      ) > 1
     return (
-      <View
-        {...passthroughProps}
-        display="block"
-        data-cid="ModalBody"
-        width={isFit ? '100%' : undefined}
-        height={isFit ? '100%' : undefined}
-        elementRef={this.handleRef}
-        as={as}
-        css={this.props.styles?.modalBody}
-        padding={padding}
-        // check if there is a scrollbar, if so, the element has to be tabbable to be able to scroll with keyboard only
-        // epsilon tolerance is used to avoid scrollbar for rounding errors
-        {...(finalRef &&
-        Math.abs(
-          (finalRef.scrollHeight ?? 0) -
-            (finalRef.getBoundingClientRect()?.height ?? 0)
-        ) > 1
-          ? { tabIndex: 0 }
-          : {})}
-      >
-        {children}
-      </View>
+      <ModalContext.Consumer>
+        {(value) => (
+          <View
+            {...passthroughProps}
+            display="block"
+            data-cid="ModalBody"
+            width={isFit ? '100%' : undefined}
+            height={isFit ? '100%' : undefined}
+            elementRef={this.handleRef}
+            as={as}
+            css={this.props.styles?.modalBody}
+            padding={padding}
+            // check if there is a scrollbar, if so, the element has to be tabbable
+            {...(hasScrollbar
+              ? {
+                  tabIndex: 0,
+                  'aria-label': value.bodyScrollAriaLabel
+                }
+              : {})}
+          >
+            {children}
+          </View>
+        )}
+      </ModalContext.Consumer>
     )
   }
 }

package/src/Modal/ModalContext.ts

@@ -0,0 +1,46 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { createContext } from 'react'
+
+type ModalContextType = {
+  /**
+   * Needed for setting the correct aria-label in the modal body when its scrollable.
+   * This is a value read from the Modal's Header.
+   */
+  bodyScrollAriaLabel?: string
+  setBodyScrollAriaLabel?: (txt: string) => void
+}
+
+/**
+ * React context created by the `Modal` component
+ * @private
+ */
+const ModalContext = createContext<ModalContextType>({
+  bodyScrollAriaLabel: undefined
+})
+
+export default ModalContext
+export { ModalContext }
+export type { ModalContextType }

package/src/Modal/ModalHeader/index.tsx

@@ -39,6 +39,7 @@ import generateComponentTheme from './theme'
 
 import { allowedProps } from './props'
 import type { ModalHeaderProps, ModalHeaderStyleProps } from './props'
+import ModalContext from '../ModalContext'
 
 type CloseButtonChild = ComponentElement<CloseButtonProps, CloseButton>
 
@@ -59,9 +60,34 @@ class ModalHeader extends Component<ModalHeaderProps> {
   }
 
   ref: HTMLDivElement | null = null
+  declare context: React.ContextType<typeof ModalContext>
+  static contextType = ModalContext
+
+  /**
+   * Gets all text in a DOM subtree, text under <button> nodes is excluded
+   */
+  getTextExcludingButtons = (root: Node) => {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+      acceptNode(node) {
+        return node.parentElement?.closest('button')
+          ? NodeFilter.FILTER_REJECT
+          : NodeFilter.FILTER_ACCEPT
+      }
+    })
+    let text = ''
+    let current
+    while ((current = walker.nextNode())) {
+      text += current.nodeValue
+    }
+    return text
+  }
 
   handleRef = (el: HTMLDivElement | null) => {
     this.ref = el
+    if (el) {
+      const txt = this.getTextExcludingButtons(el)
+      this.context.setBodyScrollAriaLabel?.(txt)
+    }
   }
 
   componentDidMount() {