@instructure/quiz-core 20.16.1-rc.8 → 20.17.0

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [20.17.0](https://gerrit.instructure.com/quizzes-ui/compare/v20.16.0...v20.17.0) (2024-08-06)
+
+
+### Bug Fixes
+
+* **a11y:** correct timer command for OS X ([80dd509](https://gerrit.instructure.com/quizzes-ui/commits/80dd509d088767c8d222f534bbf703a95c183760))
+* **a11y:** Focus isn't trapped inside of tray ([073433a](https://gerrit.instructure.com/quizzes-ui/commits/073433a328d7716fc320698f01fd6f39523ff5f5))
+* **a11y:** hide instructions after first question for screen reader ([df1b9be](https://gerrit.instructure.com/quizzes-ui/commits/df1b9bee393ed2585ecf8d3ff526e93bfe07e7b8))
+* **a11y:** localize strings for shortcut command ([521b894](https://gerrit.instructure.com/quizzes-ui/commits/521b894fd318297561afdcd7a76d5c2f5d5028e2))
+* **a11y:** make access code success message polite ([16f4c9e](https://gerrit.instructure.com/quizzes-ui/commits/16f4c9eaacdcb4f53aeb94b4acce383ded3fe00a))
+* **a11y:** move user's focus to topmost error field ([87e7691](https://gerrit.instructure.com/quizzes-ui/commits/87e7691b12c61f2e48b34923c61445242309181a))
+* **alerts:** make all alerts assertive by default ([18b632a](https://gerrit.instructure.com/quizzes-ui/commits/18b632a902fb06139b6b080bc39f5c750c984f43))
+* **ResultStimulus:** add width constraint ([7ddad6d](https://gerrit.instructure.com/quizzes-ui/commits/7ddad6d3e06a83b7348f630dba07c3420bcc8b81))
+
+
+
+
+
 # [20.16.0](https://gerrit.instructure.com/quizzes-ui/compare/v20.15.0...v20.16.0) (2024-07-08)
 
 

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

@@ -80,6 +80,10 @@ export var QuizEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
       _this.props.changeQuizEntryPoints(_this.props.quizEntry.id, points);
     };
 
+    _this.handleRef = function (node) {
+      _this.itemEditArea = node;
+    };
+
     _this.renderPrintableItemBankSample = function (sampleItem, index) {
       var quizEntry = QuizEntryRecord.create(sampleItem.toObject());
       var entryMutable = quizEntry.entry.toJS();
@@ -166,7 +170,8 @@ export var QuizEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
         initialFocusId: this.props.initialFocusId,
         handleValidationErrorsFromApi: this.props.handleValidationErrorsFromApi,
         clearValidationErrorsFromApi: this.props.clearValidationErrorsFromApi,
-        haveValidationErrorsFromApi: Boolean(Object.values(this.props.validationErrorsFromApi).length)
+        haveValidationErrorsFromApi: Boolean(Object.values(this.props.validationErrorsFromApi).length),
+        itemEditArea: this.itemEditArea
       }, pick(this.props, ['displayPosition', 'guid', 'draggingOnBuild', 'newHoverPosition', 'quizEntry', 'quizEntries', 'quizId', 'isContentLockedByBlueprint', 'setUi', 'switchOffEditing', 'switchOnEditing', 'shouldClone', 'scrollKey', 'editQuizEntryToggle', 'onEditQuizEntryToggle', 'stimulusOrientation']));
     }
   }, {
@@ -321,7 +326,8 @@ export var QuizEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
     key: "render",
     value: function render() {
       return this.props.connectDropTarget(jsx("div", {
-        tabIndex: "-1"
+        tabIndex: "-1",
+        ref: this.handleRef
       }, this.renderQuizEntryByType()));
     }
   }]);

package/es/building/components/resources/quizEntry/QuizEntryEdit/Footer/presenter.js

@@ -211,7 +211,8 @@ export var QuizEntryEditFooter = (_dec = withStyle(generateStyle, generateCompon
         guid: this.props.guid,
         isValid: this.props.isValid,
         submitHandler: this.props.successfulSubmit,
-        initialFocusId: this.props.initialFocusId
+        initialFocusId: this.props.initialFocusId,
+        itemEditArea: this.props.itemEditArea
       });
     }
   }, {
@@ -245,6 +246,7 @@ export var QuizEntryEditFooter = (_dec = withStyle(generateStyle, generateCompon
   guid: PropTypes.string.isRequired,
   initialFocusId: PropTypes.string,
   isValid: PropTypes.bool.isRequired,
+  itemEditArea: PropTypes.object,
   openModal: PropTypes.func.isRequired,
   quizEntry: ImmutablePropTypes.record.isRequired,
   setUi: PropTypes.func.isRequired,
@@ -259,6 +261,7 @@ export var QuizEntryEditFooter = (_dec = withStyle(generateStyle, generateCompon
   alternativeRightFooter: null,
   disableSubmit: false,
   initialFocusId: null,
+  itemEditArea: null,
   shouldClone: false
 }, _temp)) || _class);
 export default QuizEntryEditFooter;

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

@@ -370,7 +370,7 @@ var QuizEntryEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _d
     value: function renderFooter() {
       var isItemOrBankEntry = this.props.quizEntry.isItem || this.props.quizEntry.isBankEntry;
       if (!(isItemOrBankEntry || this.props.disabledForRegrade)) return;
-      var footerProps = pick(this.props, ['alternativeRightFooter', 'changeQuizEntryPoints', 'clearTemporaryItem', 'displayPosition', 'entry', 'guid', 'initialFocusId', 'openModal', 'quizEntry', 'setUi', 'shouldClone', 'workingQuizEntry']);
+      var footerProps = pick(this.props, ['alternativeRightFooter', 'changeQuizEntryPoints', 'clearTemporaryItem', 'displayPosition', 'entry', 'guid', 'initialFocusId', 'itemEditArea', 'openModal', 'quizEntry', 'setUi', 'shouldClone', 'workingQuizEntry']);
       return jsx(QuizEntryEditFooter, Object.assign({
         clearChanges: this.clearChanges,
         isValid: this.isValid(),
@@ -466,6 +466,7 @@ var QuizEntryEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   // from connected component
   initialFocusId: PropTypes.string,
   isOccluded: PropTypes.bool,
+  itemEditArea: PropTypes.object,
   name: PropTypes.string,
   newActiveBank: PropTypes.func,
   nextQuizEntry: ImmutablePropTypes.map,
@@ -501,6 +502,7 @@ var QuizEntryEdit = (_dec = withStyle(generateStyle, generateComponentTheme), _d
   haveValidationErrorsFromApi: false,
   initialFocusId: null,
   isOccluded: false,
+  itemEditArea: null,
   name: null,
   nextQuizEntry: null,
   newActiveBank: null,

package/es/common/actions/alerts.js

@@ -7,7 +7,8 @@ export function addAlert(_ref) {
       removeIn = _ref$removeIn === void 0 ? DEFAULT_ALERT_TIME : _ref$removeIn,
       _ref$guid = _ref.guid,
       guid = _ref$guid === void 0 ? uuid() : _ref$guid,
-      politeness = _ref.politeness;
+      _ref$politeness = _ref.politeness,
+      politeness = _ref$politeness === void 0 ? ASSERTIVE : _ref$politeness;
   return {
     type: ADD_ALERT,
     payload: {
@@ -46,8 +47,7 @@ export function addInfo(message) {
     variant: 'info'
   });
 }
-export function screenreaderNotification(message) {
-  var politeness = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : ASSERTIVE;
+export function screenreaderNotification(message, politeness) {
   return addAlert({
     message: message,
     variant: 'screenreader',

package/es/common/components/layout/header/Timer/presenter.js

@@ -112,7 +112,8 @@ export var Timer = (_dec = withStyle(generateStyle, generateComponentTheme), _de
   }, {
     key: "renderHelpScreenreaderText",
     value: function renderHelpScreenreaderText() {
-      var shortcutKey = platform.os.toString().startsWith('OS X') ? 'Option+Shift+T' : 'Alt+Shift+T';
+      // command based on operating system
+      var shortcutKey = platform.os.toString().startsWith('OS X') ? t('Option+Shift+T') : t('Alt+Shift+T');
       return jsx(ScreenReaderContent, null, t('During the quiz, press {shortcutKey} to have the remaining time read', {
         shortcutKey: shortcutKey
       }));

package/es/common/components/resources/entry/EntrySave/presenter.js

@@ -7,6 +7,7 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import ReactDOM from 'react-dom';
 import { Button } from '@instructure/ui-buttons';
 import { View } from '@instructure/ui-view';
 import { API_INPUT_VALIDATION_ERROR } from '@instructure/quiz-common';
@@ -100,21 +101,59 @@ export var EntrySave = /*#__PURE__*/function (_Component) {
       }());
     };
 
-    _this.onSubmit = function (e) {
-      e.preventDefault();
+    _this.onSubmit = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                e.preventDefault();
+
+                if (!_this.props.isValid) {
+                  _context2.next = 5;
+                  break;
+                }
+
+                if (_this.props.checkBankedContentShareabilityEnabled && _this.props.shouldValidateShareableContent) {
+                  _this.confirmShareableContent();
+                } else {
+                  _this.successfulSubmit();
+                }
+
+                _context2.next = 10;
+                break;
+
+              case 5:
+                _this.createScreenReaderNotification();
+
+                _context2.next = 8;
+                return _this.props.showError(_this.props.guid);
 
-      if (_this.props.isValid) {
-        if (_this.props.checkBankedContentShareabilityEnabled && _this.props.shouldValidateShareableContent) {
-          _this.confirmShareableContent();
-        } else {
-          _this.successfulSubmit();
-        }
-      } else {
-        _this.createScreenReaderNotification();
+              case 8:
+                _this.props.clearNextQuizEntry();
 
-        _this.props.showError(_this.props.guid);
+                _this.focusFirstErrorField();
 
-        _this.props.clearNextQuizEntry();
+              case 10:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      return function (_x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    _this.focusFirstErrorField = function () {
+      var itemEditArea = _this.props.itemEditArea;
+
+      if (itemEditArea) {
+        var editArea = ReactDOM.findDOMNode(itemEditArea);
+        var firstErrorField = editArea === null || editArea === void 0 ? void 0 : editArea.querySelector('[aria-invalid="true"]');
+        firstErrorField && firstErrorField.focus();
       }
     };
 
@@ -152,24 +191,24 @@ export var EntrySave = /*#__PURE__*/function (_Component) {
   }, {
     key: "successfulSubmit",
     value: function () {
-      var _successfulSubmit = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _successfulSubmit = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
         var validationResult;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 this.setState({
                   canSubmit: false
                 });
-                _context2.prev = 1;
-                _context2.next = 4;
+                _context3.prev = 1;
+                _context3.next = 4;
                 return this.props.submitHandler();
 
               case 4:
-                validationResult = _context2.sent;
+                validationResult = _context3.sent;
 
                 if (!(validationResult === API_INPUT_VALIDATION_ERROR)) {
-                  _context2.next = 8;
+                  _context3.next = 8;
                   break;
                 }
 
@@ -177,16 +216,16 @@ export var EntrySave = /*#__PURE__*/function (_Component) {
                 throw new Error('User input validation error received from API.');
 
               case 8:
-                _context2.next = 14;
+                _context3.next = 14;
                 break;
 
               case 10:
-                _context2.prev = 10;
-                _context2.t0 = _context2["catch"](1);
+                _context3.prev = 10;
+                _context3.t0 = _context3["catch"](1);
                 this.setState({
                   canSubmit: true
                 });
-                return _context2.abrupt("return");
+                return _context3.abrupt("return");
 
               case 14:
                 this.props.switchOffEditing();
@@ -195,10 +234,10 @@ export var EntrySave = /*#__PURE__*/function (_Component) {
 
               case 17:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2, this, [[1, 10]]);
+        }, _callee3, this, [[1, 10]]);
       }));
 
       function successfulSubmit() {
@@ -247,6 +286,7 @@ EntrySave.propTypes = {
   hideError: PropTypes.func.isRequired,
   initialFocusId: PropTypes.string,
   isValid: PropTypes.bool.isRequired,
+  itemEditArea: PropTypes.object,
   showError: PropTypes.func.isRequired,
   screenreaderNotification: PropTypes.func.isRequired,
   shouldValidateShareableContent: PropTypes.bool,
@@ -264,6 +304,7 @@ EntrySave.defaultProps = {
   disableSubmit: false,
   guid: null,
   initialFocusId: null,
+  itemEditArea: null,
   shouldValidateShareableContent: false
 };
 export default EntrySave;

package/es/common/components/resources/sessionItemResult/ResultStimulus/styles.js

@@ -57,7 +57,8 @@ var generateStyle = function generateStyle(componentTheme, props) {
       width: '100%'
     })),
     stimulusItem: {
-      flex: '1 1 auto'
+      flex: '1 1 auto',
+      width: '100%'
     },
     stimulusGroup: _objectSpread(_objectSpread({
       display: 'flex',

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

@@ -118,6 +118,10 @@ var QuizEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       _this.props.changeQuizEntryPoints(_this.props.quizEntry.id, points);
     };
 
+    _this.handleRef = function (node) {
+      _this.itemEditArea = node;
+    };
+
     _this.renderPrintableItemBankSample = function (sampleItem, index) {
       var quizEntry = _QuizEntry.default.create(sampleItem.toObject());
 
@@ -205,7 +209,8 @@ var QuizEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
         initialFocusId: this.props.initialFocusId,
         handleValidationErrorsFromApi: this.props.handleValidationErrorsFromApi,
         clearValidationErrorsFromApi: this.props.clearValidationErrorsFromApi,
-        haveValidationErrorsFromApi: Boolean(Object.values(this.props.validationErrorsFromApi).length)
+        haveValidationErrorsFromApi: Boolean(Object.values(this.props.validationErrorsFromApi).length),
+        itemEditArea: this.itemEditArea
       }, (0, _pick.default)(this.props, ['displayPosition', 'guid', 'draggingOnBuild', 'newHoverPosition', 'quizEntry', 'quizEntries', 'quizId', 'isContentLockedByBlueprint', 'setUi', 'switchOffEditing', 'switchOnEditing', 'shouldClone', 'scrollKey', 'editQuizEntryToggle', 'onEditQuizEntryToggle', 'stimulusOrientation']));
     }
   }, {
@@ -360,7 +365,8 @@ var QuizEntry = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
     key: "render",
     value: function render() {
       return this.props.connectDropTarget((0, _emotion.jsx)("div", {
-        tabIndex: "-1"
+        tabIndex: "-1",
+        ref: this.handleRef
       }, this.renderQuizEntryByType()));
     }
   }]);

package/lib/building/components/resources/quizEntry/QuizEntryEdit/Footer/presenter.js

@@ -238,7 +238,8 @@ var QuizEntryEditFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _them
         guid: this.props.guid,
         isValid: this.props.isValid,
         submitHandler: this.props.successfulSubmit,
-        initialFocusId: this.props.initialFocusId
+        initialFocusId: this.props.initialFocusId,
+        itemEditArea: this.props.itemEditArea
       });
     }
   }, {
@@ -271,6 +272,7 @@ var QuizEntryEditFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _them
   guid: _propTypes.default.string.isRequired,
   initialFocusId: _propTypes.default.string,
   isValid: _propTypes.default.bool.isRequired,
+  itemEditArea: _propTypes.default.object,
   openModal: _propTypes.default.func.isRequired,
   quizEntry: _reactImmutableProptypes.default.record.isRequired,
   setUi: _propTypes.default.func.isRequired,
@@ -285,6 +287,7 @@ var QuizEntryEditFooter = (_dec = (0, _emotion.withStyle)(_styles.default, _them
   alternativeRightFooter: null,
   disableSubmit: false,
   initialFocusId: null,
+  itemEditArea: null,
   shouldClone: false
 }, _temp)) || _class);
 exports.QuizEntryEditFooter = QuizEntryEditFooter;

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

@@ -402,7 +402,7 @@ var QuizEntryEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
     value: function renderFooter() {
       var isItemOrBankEntry = this.props.quizEntry.isItem || this.props.quizEntry.isBankEntry;
       if (!(isItemOrBankEntry || this.props.disabledForRegrade)) return;
-      var footerProps = (0, _pick.default)(this.props, ['alternativeRightFooter', 'changeQuizEntryPoints', 'clearTemporaryItem', 'displayPosition', 'entry', 'guid', 'initialFocusId', 'openModal', 'quizEntry', 'setUi', 'shouldClone', 'workingQuizEntry']);
+      var footerProps = (0, _pick.default)(this.props, ['alternativeRightFooter', 'changeQuizEntryPoints', 'clearTemporaryItem', 'displayPosition', 'entry', 'guid', 'initialFocusId', 'itemEditArea', 'openModal', 'quizEntry', 'setUi', 'shouldClone', 'workingQuizEntry']);
       return (0, _emotion.jsx)(_index4.default, Object.assign({
         clearChanges: this.clearChanges,
         isValid: this.isValid(),
@@ -497,6 +497,7 @@ var QuizEntryEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
   // from connected component
   initialFocusId: _propTypes.default.string,
   isOccluded: _propTypes.default.bool,
+  itemEditArea: _propTypes.default.object,
   name: _propTypes.default.string,
   newActiveBank: _propTypes.default.func,
   nextQuizEntry: _reactImmutableProptypes.default.map,
@@ -532,6 +533,7 @@ var QuizEntryEdit = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defa
   haveValidationErrorsFromApi: false,
   initialFocusId: null,
   isOccluded: false,
+  itemEditArea: null,
   name: null,
   nextQuizEntry: null,
   newActiveBank: null,

package/lib/common/actions/alerts.js

@@ -22,7 +22,8 @@ function addAlert(_ref) {
       removeIn = _ref$removeIn === void 0 ? _quizCommon.DEFAULT_ALERT_TIME : _ref$removeIn,
       _ref$guid = _ref.guid,
       guid = _ref$guid === void 0 ? (0, _uuid.v4)() : _ref$guid,
-      politeness = _ref.politeness;
+      _ref$politeness = _ref.politeness,
+      politeness = _ref$politeness === void 0 ? _quizCommon.ASSERTIVE : _ref$politeness;
   return {
     type: _quizCommon.ADD_ALERT,
     payload: {
@@ -66,8 +67,7 @@ function addInfo(message) {
   });
 }
 
-function screenreaderNotification(message) {
-  var politeness = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : _quizCommon.ASSERTIVE;
+function screenreaderNotification(message, politeness) {
   return addAlert({
     message: message,
     variant: 'screenreader',

package/lib/common/components/layout/header/Timer/presenter.js

@@ -139,7 +139,8 @@ var Timer = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   }, {
     key: "renderHelpScreenreaderText",
     value: function renderHelpScreenreaderText() {
-      var shortcutKey = platform.os.toString().startsWith('OS X') ? 'Option+Shift+T' : 'Alt+Shift+T';
+      // command based on operating system
+      var shortcutKey = platform.os.toString().startsWith('OS X') ? (0, _formatMessage.default)('Option+Shift+T') : (0, _formatMessage.default)('Alt+Shift+T');
       return (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('During the quiz, press {shortcutKey} to have the remaining time read', {
         shortcutKey: shortcutKey
       }));

package/lib/common/components/resources/entry/EntrySave/presenter.js

@@ -27,6 +27,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _uiButtons = require("@instructure/ui-buttons");
 
 var _uiView = require("@instructure/ui-view");
@@ -125,21 +127,60 @@ var EntrySave = /*#__PURE__*/function (_Component) {
       }());
     };
 
-    _this.onSubmit = function (e) {
-      e.preventDefault();
+    _this.onSubmit = /*#__PURE__*/function () {
+      var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(e) {
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                e.preventDefault();
+
+                if (!_this.props.isValid) {
+                  _context2.next = 5;
+                  break;
+                }
+
+                if (_this.props.checkBankedContentShareabilityEnabled && _this.props.shouldValidateShareableContent) {
+                  _this.confirmShareableContent();
+                } else {
+                  _this.successfulSubmit();
+                }
+
+                _context2.next = 10;
+                break;
+
+              case 5:
+                _this.createScreenReaderNotification();
+
+                _context2.next = 8;
+                return _this.props.showError(_this.props.guid);
 
-      if (_this.props.isValid) {
-        if (_this.props.checkBankedContentShareabilityEnabled && _this.props.shouldValidateShareableContent) {
-          _this.confirmShareableContent();
-        } else {
-          _this.successfulSubmit();
-        }
-      } else {
-        _this.createScreenReaderNotification();
+              case 8:
+                _this.props.clearNextQuizEntry();
+
+                _this.focusFirstErrorField();
+
+              case 10:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2);
+      }));
+
+      return function (_x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    _this.focusFirstErrorField = function () {
+      var itemEditArea = _this.props.itemEditArea;
 
-        _this.props.showError(_this.props.guid);
+      if (itemEditArea) {
+        var editArea = _reactDom.default.findDOMNode(itemEditArea);
 
-        _this.props.clearNextQuizEntry();
+        var firstErrorField = editArea === null || editArea === void 0 ? void 0 : editArea.querySelector('[aria-invalid="true"]');
+        firstErrorField && firstErrorField.focus();
       }
     };
 
@@ -177,24 +218,24 @@ var EntrySave = /*#__PURE__*/function (_Component) {
   }, {
     key: "successfulSubmit",
     value: function () {
-      var _successfulSubmit = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var _successfulSubmit = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
         var validationResult;
-        return _regenerator.default.wrap(function _callee2$(_context2) {
+        return _regenerator.default.wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
                 this.setState({
                   canSubmit: false
                 });
-                _context2.prev = 1;
-                _context2.next = 4;
+                _context3.prev = 1;
+                _context3.next = 4;
                 return this.props.submitHandler();
 
               case 4:
-                validationResult = _context2.sent;
+                validationResult = _context3.sent;
 
                 if (!(validationResult === _quizCommon.API_INPUT_VALIDATION_ERROR)) {
-                  _context2.next = 8;
+                  _context3.next = 8;
                   break;
                 }
 
@@ -202,16 +243,16 @@ var EntrySave = /*#__PURE__*/function (_Component) {
                 throw new Error('User input validation error received from API.');
 
               case 8:
-                _context2.next = 14;
+                _context3.next = 14;
                 break;
 
               case 10:
-                _context2.prev = 10;
-                _context2.t0 = _context2["catch"](1);
+                _context3.prev = 10;
+                _context3.t0 = _context3["catch"](1);
                 this.setState({
                   canSubmit: true
                 });
-                return _context2.abrupt("return");
+                return _context3.abrupt("return");
 
               case 14:
                 this.props.switchOffEditing();
@@ -220,10 +261,10 @@ var EntrySave = /*#__PURE__*/function (_Component) {
 
               case 17:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2, this, [[1, 10]]);
+        }, _callee3, this, [[1, 10]]);
       }));
 
       function successfulSubmit() {
@@ -273,6 +314,7 @@ EntrySave.propTypes = {
   hideError: _propTypes.default.func.isRequired,
   initialFocusId: _propTypes.default.string,
   isValid: _propTypes.default.bool.isRequired,
+  itemEditArea: _propTypes.default.object,
   showError: _propTypes.default.func.isRequired,
   screenreaderNotification: _propTypes.default.func.isRequired,
   shouldValidateShareableContent: _propTypes.default.bool,
@@ -290,6 +332,7 @@ EntrySave.defaultProps = {
   disableSubmit: false,
   guid: null,
   initialFocusId: null,
+  itemEditArea: null,
   shouldValidateShareableContent: false
 };
 var _default = EntrySave;

package/lib/common/components/resources/sessionItemResult/ResultStimulus/styles.js

@@ -67,7 +67,8 @@ var generateStyle = function generateStyle(componentTheme, props) {
       width: '100%'
     })),
     stimulusItem: {
-      flex: '1 1 auto'
+      flex: '1 1 auto',
+      width: '100%'
     },
     stimulusGroup: (0, _objectSpread6.default)((0, _objectSpread6.default)({
       display: 'flex',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.16.1-rc.8+80dd509d0",
+  "version": "20.17.0",
   "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.16.1-rc.8+80dd509d0",
-    "@instructure/quiz-i18n": "20.16.1-rc.8+80dd509d0",
-    "@instructure/quiz-interactions": "20.16.1-rc.8+80dd509d0",
-    "@instructure/quiz-number-input": "20.16.1-rc.8+80dd509d0",
-    "@instructure/quiz-rce": "20.16.1-rc.8+80dd509d0",
+    "@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/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -93,8 +93,8 @@
     "@instructure/ui-themes": "^8.51.0",
     "@instructure/ui-toggle-details": "^8.51.0",
     "@instructure/ui-tooltip": "^8.51.0",
-    "@instructure/ui-top-nav-bar": "^8.51.0",
-    "@instructure/ui-tray": "^8.51.0",
+    "@instructure/ui-top-nav-bar": "^8.55.0",
+    "@instructure/ui-tray": "8.55.1",
     "@instructure/ui-truncate-text": "^8.51.0",
     "@instructure/ui-utils": "^8.51.0",
     "@instructure/ui-view": "^8.51.0",
@@ -111,7 +111,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "20.16.1-rc.8+80dd509d0",
+    "instructure-validations": "^20.17.0",
     "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.16.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.16.1-rc.8+80dd509d0",
+    "quiz-presets": "^20.17.0",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "80dd509d088767c8d222f534bbf703a95c183760"
+  "gitHead": "7cfde18187bb7f81e74fc8471e3da12c596b176c"
 }