@instructure/ui-modal 7.21.0 → 7.22.1

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.22.1](https://github.com/instructure/instructure-ui/compare/v7.22.0...v7.22.1) (2023-01-27)
+
+### Bug Fixes
+
+- **ui-modal:** fix screen reader focus order in Chrome ([19aeebe](https://github.com/instructure/instructure-ui/commit/19aeebe))
+
+# [7.22.0](https://github.com/instructure/instructure-ui/compare/v7.21.0...v7.22.0) (2023-01-05)
+
+**Note:** Version bump only for package @instructure/ui-modal
+
 # [7.21.0](https://github.com/instructure/instructure-ui/compare/v7.20.2...v7.21.0) (2022-09-05)
 
 **Note:** Version bump only for package @instructure/ui-modal

package/es/Modal/ModalBody/index.js

@@ -38,6 +38,7 @@ import { View } from '@instructure/ui-view';
 import { themeable, ThemeablePropTypes } from '@instructure/ui-themeable';
 import { testable } from '@instructure/ui-testable';
 import { isIE11 } from '@instructure/ui-utils';
+import { getComputedStyle } from '@instructure/ui-dom-utils';
 var styles = {
   componentId: 'butxX',
   template: function template(theme) {
@@ -59,13 +60,43 @@ var ModalBody = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_clas
 
   var _super = _createSuper(ModalBody);
 
-  function ModalBody() {
+  function ModalBody(props) {
+    var _this;
+
     _classCallCheck(this, ModalBody);
 
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.ref = null;
+
+    _this.handleRef = function (el) {
+      var elementRef = _this.props.elementRef;
+      _this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
+    _this.state = {
+      isFirefox: false
+    };
+    return _this;
   }
 
   _createClass(ModalBody, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // We detect if -moz- prefixed style is present to identify whether we are in Firefox browser
+      var style = this.ref && getComputedStyle(this.ref);
+      var isFirefox = !!(style && Array.prototype.slice.call(style).join('').match(/(?:-moz-)/));
+
+      if (isFirefox) {
+        this.setState({
+          isFirefox: isFirefox
+        });
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _classnames;
@@ -92,12 +123,16 @@ var ModalBody = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_clas
         display: "block",
         width: isFit ? '100%' : null,
         height: isFit ? '100%' : null,
-        elementRef: elementRef,
+        elementRef: this.handleRef,
         as: as,
         className: classes,
-        padding: padding,
-        tabIndex: "-1" // prevent FF from focusing view when scrollable
+        padding: padding // We have to make an exception in Firefox, because it makes
+        //  the container focusable when it is scrollable.
+        //  This is a feature, not a bug, but it prevents VoiceOver
+        //  to correctly focus inside the body in other browsers.
 
+      }, this.state.isFirefox && {
+        tabIndex: -1
       }), children);
     }
   }]);

package/lib/Modal/ModalBody/index.js

@@ -39,6 +39,8 @@ var _testable = require("@instructure/ui-testable/lib/testable.js");
 
 var _isIE = require("@instructure/ui-utils/lib/isIE11.js");
 
+var _getComputedStyle = require("@instructure/ui-dom-utils/lib/getComputedStyle.js");
+
 var _theme = _interopRequireDefault(require("./theme.js"));
 
 var _dec, _dec2, _class, _class2, _temp;
@@ -63,12 +65,42 @@ var ModalBody = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.themea
 
   var _super = (0, _createSuper2.default)(ModalBody);
 
-  function ModalBody() {
+  function ModalBody(props) {
+    var _this;
+
     (0, _classCallCheck2.default)(this, ModalBody);
-    return _super.apply(this, arguments);
+    _this = _super.call(this, props);
+    _this.ref = null;
+
+    _this.handleRef = function (el) {
+      var elementRef = _this.props.elementRef;
+      _this.ref = el;
+
+      if (typeof elementRef === 'function') {
+        elementRef(el);
+      }
+    };
+
+    _this.state = {
+      isFirefox: false
+    };
+    return _this;
   }
 
   (0, _createClass2.default)(ModalBody, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // We detect if -moz- prefixed style is present to identify whether we are in Firefox browser
+      var style = this.ref && (0, _getComputedStyle.getComputedStyle)(this.ref);
+      var isFirefox = !!(style && Array.prototype.slice.call(style).join('').match(/(?:-moz-)/));
+
+      if (isFirefox) {
+        this.setState({
+          isFirefox: isFirefox
+        });
+      }
+    }
+  }, {
     key: "render",
     value: function render() {
       var _classnames;
@@ -93,12 +125,16 @@ var ModalBody = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.themea
         display: "block",
         width: isFit ? '100%' : null,
         height: isFit ? '100%' : null,
-        elementRef: elementRef,
+        elementRef: this.handleRef,
         as: as,
         className: classes,
-        padding: padding,
-        tabIndex: "-1" // prevent FF from focusing view when scrollable
+        padding: padding // We have to make an exception in Firefox, because it makes
+        //  the container focusable when it is scrollable.
+        //  This is a feature, not a bug, but it prevents VoiceOver
+        //  to correctly focus inside the body in other browsers.
 
+      }, this.state.isFirefox && {
+        tabIndex: -1
       }), children);
     }
   }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-modal",
-  "version": "7.21.0",
+  "version": "7.22.1",
   "description": "A component for displaying content in a dialog overlay",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -23,18 +23,19 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@instructure/console": "^7.21.0",
-    "@instructure/ui-buttons": "^7.21.0",
-    "@instructure/ui-dialog": "^7.21.0",
-    "@instructure/ui-motion": "^7.21.0",
-    "@instructure/ui-overlays": "^7.21.0",
-    "@instructure/ui-portal": "^7.21.0",
-    "@instructure/ui-prop-types": "^7.21.0",
-    "@instructure/ui-react-utils": "^7.21.0",
-    "@instructure/ui-testable": "^7.21.0",
-    "@instructure/ui-themeable": "^7.21.0",
-    "@instructure/ui-utils": "^7.21.0",
-    "@instructure/ui-view": "^7.21.0",
+    "@instructure/console": "^7.22.1",
+    "@instructure/ui-buttons": "^7.22.1",
+    "@instructure/ui-dialog": "^7.22.1",
+    "@instructure/ui-dom-utils": "^7.22.1",
+    "@instructure/ui-motion": "^7.22.1",
+    "@instructure/ui-overlays": "^7.22.1",
+    "@instructure/ui-portal": "^7.22.1",
+    "@instructure/ui-prop-types": "^7.22.1",
+    "@instructure/ui-react-utils": "^7.22.1",
+    "@instructure/ui-testable": "^7.22.1",
+    "@instructure/ui-themeable": "^7.22.1",
+    "@instructure/ui-utils": "^7.22.1",
+    "@instructure/ui-view": "^7.22.1",
     "classnames": "^2",
     "prop-types": "^15"
   },
@@ -42,10 +43,10 @@
     "react": "^16.8"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "^7.21.0",
-    "@instructure/ui-color-utils": "^7.21.0",
-    "@instructure/ui-test-locator": "^7.21.0",
-    "@instructure/ui-test-utils": "^7.21.0"
+    "@instructure/ui-babel-preset": "^7.22.1",
+    "@instructure/ui-color-utils": "^7.22.1",
+    "@instructure/ui-test-locator": "^7.22.1",
+    "@instructure/ui-test-utils": "^7.22.1"
   },
   "publishConfig": {
     "access": "public"

package/src/Modal/ModalBody/index.js

@@ -31,6 +31,7 @@ import { themeable, ThemeablePropTypes } from '@instructure/ui-themeable'
 import { testable } from '@instructure/ui-testable'
 import { error } from '@instructure/console/macro'
 import { isIE11 } from '@instructure/ui-utils'
+import { getComputedStyle } from '@instructure/ui-dom-utils'
 
 import styles from './styles.css'
 import theme from './theme'
@@ -62,6 +63,40 @@ class ModalBody extends Component {
     overflow: undefined
   }
 
+  ref = null
+
+  handleRef = (el) => {
+    const { elementRef } = this.props
+    this.ref = el
+    if (typeof elementRef === 'function') {
+      elementRef(el)
+    }
+  }
+
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      isFirefox: false
+    }
+  }
+
+  componentDidMount() {
+    // We detect if -moz- prefixed style is present to identify whether we are in Firefox browser
+    const style = this.ref && getComputedStyle(this.ref)
+    const isFirefox = !!(
+      style &&
+      Array.prototype.slice
+        .call(style)
+        .join('')
+        .match(/(?:-moz-)/)
+    )
+
+    if (isFirefox) {
+      this.setState({ isFirefox })
+    }
+  }
+
   render() {
     const {
       as,
@@ -93,11 +128,15 @@ class ModalBody extends Component {
         display="block"
         width={isFit ? '100%' : null}
         height={isFit ? '100%' : null}
-        elementRef={elementRef}
+        elementRef={this.handleRef}
         as={as}
         className={classes}
         padding={padding}
-        tabIndex="-1" // prevent FF from focusing view when scrollable
+        // We have to make an exception in Firefox, because it makes
+        //  the container focusable when it is scrollable.
+        //  This is a feature, not a bug, but it prevents VoiceOver
+        //  to correctly focus inside the body in other browsers.
+        {...(this.state.isFirefox && { tabIndex: -1 })}
       >
         {children}
       </View>