@instructure/quiz-core 20.16.1-rc.9 → 20.17.1-rc.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/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,
@@ -80,6 +82,18 @@ export var QuizEntry = (_dec = withStyle(generateStyle, generateComponentTheme),
       _this.props.changeQuizEntryPoints(_this.props.quizEntry.id, points);
     };
 
+    _this.handleRef = function (node) {
+      _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();
@@ -166,7 +180,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 +336,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/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/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,
@@ -118,6 +121,19 @@ 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.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());
 
@@ -205,7 +221,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 +377,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/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/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.16.1-rc.9+18b632a90",
+  "version": "20.17.1-rc.0+793cefcb1",
   "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.9+18b632a90",
-    "@instructure/quiz-i18n": "20.16.1-rc.9+18b632a90",
-    "@instructure/quiz-interactions": "20.16.1-rc.9+18b632a90",
-    "@instructure/quiz-number-input": "20.16.1-rc.9+18b632a90",
-    "@instructure/quiz-rce": "20.16.1-rc.9+18b632a90",
+    "@instructure/quiz-common": "20.17.1-rc.0+793cefcb1",
+    "@instructure/quiz-i18n": "20.17.1-rc.0+793cefcb1",
+    "@instructure/quiz-interactions": "20.17.1-rc.0+793cefcb1",
+    "@instructure/quiz-number-input": "20.17.1-rc.0+793cefcb1",
+    "@instructure/quiz-rce": "20.17.1-rc.0+793cefcb1",
     "@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.9+18b632a90",
+    "instructure-validations": "20.17.1-rc.0+793cefcb1",
     "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.9+18b632a90",
+    "quiz-presets": "20.17.1-rc.0+793cefcb1",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "18b632a902fb06139b6b080bc39f5c750c984f43"
+  "gitHead": "793cefcb1a484b93a2d896cce280df3801407bc6"
 }