@instructure/quiz-core 20.17.0 → 20.17.1-rc.1

package/es/banks/components/BankEntry/presenter.js

@@ -155,6 +155,10 @@ export var BankEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
       }, _callee, null, [[0, 10]]);
     }));
 
+    _this.handleRef = function (node) {
+      _this.itemEditArea = node;
+    };
+
     _this.clearChanges = function () {
       _this.clearValidationErrorsFromApi(CLEAR_ALL_INPUT_VALIDATION_ERRORS);
 
@@ -185,6 +189,7 @@ export var BankEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
         entry: entry,
         guid: "".concat(_this.props.bankEntry.id, "_bank_entry_edit"),
         handleQuizEntryPointsChange: _this.handlePointsChange,
+        itemEditArea: _this.itemEditArea,
         parentId: _this.props.bankId,
         parentType: PARENT_TYPE_BANK,
         shouldValidateShareableContent: true,
@@ -643,7 +648,8 @@ export var BankEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
       }
 
       return jsx(Page, null, this.renderNav(), jsx("div", {
-        css: this.props.styles.content
+        css: this.props.styles.content,
+        ref: this.handleRef
       }, this.props.iceTopNavBarEnabled && jsx("div", {
         css: this.props.styles.breadcrumb
       }, jsx(HeaderBreadCrumb, {

package/es/building/components/resources/AddToBankOptions/index.js

@@ -1,3 +1,5 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -30,25 +32,47 @@ export var AddToBankOptions = (_dec = withStyle(generateStyle, generateComponent
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
+    _this.openAddToBankModal = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var displayPosition, msg;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              displayPosition = _this.props.displayPosition;
 
-    _this.openAddToBankModal = function () {
-      var displayPosition = _this.props.displayPosition;
+              if (!_this.props.isValid) {
+                _context.next = 5;
+                break;
+              }
 
-      if (_this.props.isValid) {
-        _this.props.openModal([ADD_TO_BANK_MODAL, _this.props.entryType, _this.props.guid].join(':'), {
-          modalTrigger: _this.addToBankLink
-        });
-      } else {
-        var msg = t('{entryType} {displayPosition, number} cannot be saved due to invalid input data.', {
-          entryType: _this.props.entryType,
-          displayPosition: displayPosition
-        });
+              _this.props.openModal([ADD_TO_BANK_MODAL, _this.props.entryType, _this.props.guid].join(':'), {
+                modalTrigger: _this.addToBankLink
+              });
 
-        _this.props.screenreaderNotification(msg);
+              _context.next = 10;
+              break;
 
-        _this.props.showError(_this.props.guid);
-      }
-    };
+            case 5:
+              msg = t('{entryType} {displayPosition, number} cannot be saved due to invalid input data.', {
+                entryType: _this.props.entryType,
+                displayPosition: displayPosition
+              });
+
+              _this.props.screenreaderNotification(msg);
+
+              _context.next = 9;
+              return _this.props.showError(_this.props.guid);
+
+            case 9:
+              _this.props.focusFirstErrorField();
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
 
     _this.storeAddToBankLinkRef = function (c) {
       _this.addToBankLink = c;
@@ -78,11 +102,14 @@ export var AddToBankOptions = (_dec = withStyle(generateStyle, generateComponent
 }(Component), _class2.propTypes = {
   displayPosition: PropTypes.number.isRequired,
   entryType: PropTypes.string.isRequired,
+  focusFirstErrorField: PropTypes.func,
   guid: PropTypes.string.isRequired,
   isValid: PropTypes.bool.isRequired,
   openModal: PropTypes.func.isRequired,
   screenreaderNotification: PropTypes.func.isRequired,
   showError: PropTypes.func.isRequired,
   styles: PropTypes.object
+}, _class2.defaultProps = {
+  focusFirstErrorField: function focusFirstErrorField() {}
 }, _temp)) || _class);
 export default AddToBankOptions;

package/es/building/components/resources/quizEntry/QuizEntry/presenter.js

@@ -14,6 +14,7 @@ import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import pick from 'lodash/pick';
 import partial from 'lodash/partial';
+import ReactDOM from 'react-dom';
 import { withStyle, jsx } from '@instructure/emotion';
 import t from '@instructure/quiz-i18n/es/format-message';
 import WarningWrapper from "../../../../../common/components/resources/WarningWrapper/index.js";
@@ -63,6 +64,7 @@ export var QuizEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
       return jsx(AddToBankOptions, {
         displayPosition: _this.props.displayPosition,
         entryType: _this.props.quizEntry.entryType,
+        focusFirstErrorField: _this.focusFirstErrorField,
         guid: _this.props.guid,
         isValid: _this.props.workingEntry.isValid(),
         openModal: _this.props.openModal,
@@ -84,6 +86,14 @@ export var QuizEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
       _this.itemEditArea = node;
     };
 
+    _this.focusFirstErrorField = function () {
+      if (_this.itemEditArea) {
+        var editArea = ReactDOM.findDOMNode(_this.itemEditArea);
+        var firstErrorField = editArea === null || editArea === void 0 ? void 0 : editArea.querySelector('[aria-invalid="true"]');
+        firstErrorField && firstErrorField.focus();
+      }
+    };
+
     _this.renderPrintableItemBankSample = function (sampleItem, index) {
       var quizEntry = QuizEntryRecord.create(sampleItem.toObject());
       var entryMutable = quizEntry.entry.toJS();

package/es/common/components/resources/stimulus/StimulusEdit/presenter.js

@@ -381,6 +381,7 @@ export var StimulusEdit = (_dec = withStyle(generateStyle, generateComponentThem
       }, jsx(AddToBankOptions, {
         displayPosition: this.props.displayPosition,
         entryType: this.props.quizEntry.entryType,
+        focusFirstErrorField: this.focusFirstErrorField,
         guid: this.props.guid,
         isValid: this.props.workingStimulus.isValid(),
         openModal: this.props.openModal,

package/lib/banks/components/BankEntry/presenter.js

@@ -205,6 +205,10 @@ var BankEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       }, _callee, null, [[0, 10]]);
     }));
 
+    _this.handleRef = function (node) {
+      _this.itemEditArea = node;
+    };
+
     _this.clearChanges = function () {
       _this.clearValidationErrorsFromApi(_quizCommon.CLEAR_ALL_INPUT_VALIDATION_ERRORS);
 
@@ -235,6 +239,7 @@ var BankEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
         entry: entry,
         guid: "".concat(_this.props.bankEntry.id, "_bank_entry_edit"),
         handleQuizEntryPointsChange: _this.handlePointsChange,
+        itemEditArea: _this.itemEditArea,
         parentId: _this.props.bankId,
         parentType: _quizCommon.PARENT_TYPE_BANK,
         shouldValidateShareableContent: true,
@@ -693,7 +698,8 @@ var BankEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       }
 
       return (0, _emotion.jsx)(_index6.default, null, this.renderNav(), (0, _emotion.jsx)("div", {
-        css: this.props.styles.content
+        css: this.props.styles.content,
+        ref: this.handleRef
       }, this.props.iceTopNavBarEnabled && (0, _emotion.jsx)("div", {
         css: this.props.styles.breadcrumb
       }, (0, _emotion.jsx)(_index.HeaderBreadCrumb, {

package/lib/building/components/resources/AddToBankOptions/index.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.AddToBankOptions = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -50,25 +54,47 @@ var AddToBankOptions = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.d
     }
 
     _this = _super.call.apply(_super, [this].concat(args));
-
-    _this.openAddToBankModal = function () {
-      var displayPosition = _this.props.displayPosition;
-
-      if (_this.props.isValid) {
-        _this.props.openModal([_quizCommon.ADD_TO_BANK_MODAL, _this.props.entryType, _this.props.guid].join(':'), {
-          modalTrigger: _this.addToBankLink
-        });
-      } else {
-        var msg = (0, _formatMessage.default)('{entryType} {displayPosition, number} cannot be saved due to invalid input data.', {
-          entryType: _this.props.entryType,
-          displayPosition: displayPosition
-        });
-
-        _this.props.screenreaderNotification(msg);
-
-        _this.props.showError(_this.props.guid);
-      }
-    };
+    _this.openAddToBankModal = /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var displayPosition, msg;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              displayPosition = _this.props.displayPosition;
+
+              if (!_this.props.isValid) {
+                _context.next = 5;
+                break;
+              }
+
+              _this.props.openModal([_quizCommon.ADD_TO_BANK_MODAL, _this.props.entryType, _this.props.guid].join(':'), {
+                modalTrigger: _this.addToBankLink
+              });
+
+              _context.next = 10;
+              break;
+
+            case 5:
+              msg = (0, _formatMessage.default)('{entryType} {displayPosition, number} cannot be saved due to invalid input data.', {
+                entryType: _this.props.entryType,
+                displayPosition: displayPosition
+              });
+
+              _this.props.screenreaderNotification(msg);
+
+              _context.next = 9;
+              return _this.props.showError(_this.props.guid);
+
+            case 9:
+              _this.props.focusFirstErrorField();
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
 
     _this.storeAddToBankLinkRef = function (c) {
       _this.addToBankLink = c;
@@ -97,12 +123,15 @@ var AddToBankOptions = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.d
 }(_react.Component), _class2.propTypes = {
   displayPosition: _propTypes.default.number.isRequired,
   entryType: _propTypes.default.string.isRequired,
+  focusFirstErrorField: _propTypes.default.func,
   guid: _propTypes.default.string.isRequired,
   isValid: _propTypes.default.bool.isRequired,
   openModal: _propTypes.default.func.isRequired,
   screenreaderNotification: _propTypes.default.func.isRequired,
   showError: _propTypes.default.func.isRequired,
   styles: _propTypes.default.object
+}, _class2.defaultProps = {
+  focusFirstErrorField: function focusFirstErrorField() {}
 }, _temp)) || _class);
 exports.AddToBankOptions = AddToBankOptions;
 var _default = AddToBankOptions;

package/lib/building/components/resources/quizEntry/QuizEntry/presenter.js

@@ -31,6 +31,8 @@ var _pick = _interopRequireDefault(require("lodash/pick"));
 
 var _partial = _interopRequireDefault(require("lodash/partial"));
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _emotion = require("@instructure/emotion");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
@@ -101,6 +103,7 @@ var QuizEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       return (0, _emotion.jsx)(_index7.default, {
         displayPosition: _this.props.displayPosition,
         entryType: _this.props.quizEntry.entryType,
+        focusFirstErrorField: _this.focusFirstErrorField,
         guid: _this.props.guid,
         isValid: _this.props.workingEntry.isValid(),
         openModal: _this.props.openModal,
@@ -122,6 +125,15 @@ var QuizEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       _this.itemEditArea = node;
     };
 
+    _this.focusFirstErrorField = function () {
+      if (_this.itemEditArea) {
+        var editArea = _reactDom.default.findDOMNode(_this.itemEditArea);
+
+        var firstErrorField = editArea === null || editArea === void 0 ? void 0 : editArea.querySelector('[aria-invalid="true"]');
+        firstErrorField && firstErrorField.focus();
+      }
+    };
+
     _this.renderPrintableItemBankSample = function (sampleItem, index) {
       var quizEntry = _QuizEntry.default.create(sampleItem.toObject());
 

package/lib/common/components/resources/stimulus/StimulusEdit/presenter.js

@@ -416,6 +416,7 @@ var StimulusEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
       }, (0, _emotion.jsx)(_index2.default, {
         displayPosition: this.props.displayPosition,
         entryType: this.props.quizEntry.entryType,
+        focusFirstErrorField: this.focusFirstErrorField,
         guid: this.props.guid,
         isValid: this.props.workingStimulus.isValid(),
         openModal: this.props.openModal,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.17.0",
+  "version": "20.17.1-rc.1+0dec4f96a",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.51.0",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.2.2",
-    "@instructure/quiz-common": "^20.17.0",
-    "@instructure/quiz-i18n": "^20.17.0",
-    "@instructure/quiz-interactions": "^20.17.0",
-    "@instructure/quiz-number-input": "^20.17.0",
-    "@instructure/quiz-rce": "^20.17.0",
+    "@instructure/quiz-common": "20.17.1-rc.1+0dec4f96a",
+    "@instructure/quiz-i18n": "20.17.1-rc.1+0dec4f96a",
+    "@instructure/quiz-interactions": "20.17.1-rc.1+0dec4f96a",
+    "@instructure/quiz-number-input": "20.17.1-rc.1+0dec4f96a",
+    "@instructure/quiz-rce": "20.17.1-rc.1+0dec4f96a",
     "@instructure/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -111,7 +111,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "^20.17.0",
+    "instructure-validations": "20.17.1-rc.1+0dec4f96a",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -142,7 +142,7 @@
     "uuid": "^3.2.1"
   },
   "devDependencies": {
-    "@instructure/quiz-scripts": "^20.17.0",
+    "@instructure/quiz-scripts": "20.17.0",
     "@instructure/ui-axe-check": "^8.51.0",
     "@instructure/ui-babel-preset": "^7.22.1",
     "@instructure/ui-karma-config": "^7.22.1",
@@ -163,7 +163,7 @@
     "jquery": "^2.2.3",
     "karma-junit-reporter": "^2.0.1",
     "most-subject": "^5.3.0",
-    "quiz-presets": "^20.17.0",
+    "quiz-presets": "20.17.1-rc.1+0dec4f96a",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7cfde18187bb7f81e74fc8471e3da12c596b176c"
+  "gitHead": "0dec4f96afef7862bbe01bd73e5641952467fcf6"
 }