@pie-element/complex-rubric 2.10.6 → 2.11.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.11.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/complex-rubric@2.10.6...@pie-element/complex-rubric@2.11.0) (2024-05-27)
+
+
+### Features
+
+* update pie-lib/pie-toolbox PD-3736, PD-3734, PD-2488 ([3c44f06](https://github.com/pie-framework/pie-elements/commit/3c44f06d96e609246acde257a8223dc16192c2c4))
+
+
+
+
+
 ## [2.10.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/complex-rubric@2.10.5...@pie-element/complex-rubric@2.10.6) (2024-05-27)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.2.22](https://github.com/pie-framework/pie-elements/compare/@pie-element/complex-rubric-configure@2.2.21...@pie-element/complex-rubric-configure@2.2.22) (2024-05-27)
+
+**Note:** Version bump only for package @pie-element/complex-rubric-configure
+
+
+
+
+
 ## [2.2.21](https://github.com/pie-framework/pie-elements/compare/@pie-element/complex-rubric-configure@2.2.20...@pie-element/complex-rubric-configure@2.2.21) (2024-05-27)
 
 **Note:** Version bump only for package @pie-element/complex-rubric-configure

package/configure/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@pie-element/complex-rubric-configure",
   "private": true,
-  "version": "2.2.21",
+  "version": "2.2.22",
   "description": "Complex Rubric authoring view",
   "main": "lib/index.js",
   "module": "src/index.js",
   "author": "Pie Framework Authors",
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-element/multi-trait-rubric": "^3.10.6",
-    "@pie-element/rubric": "^3.10.6",
+    "@pie-element/multi-trait-rubric": "^3.11.0",
+    "@pie-element/rubric": "^3.11.0",
     "@pie-framework/pie-configure-events": "^1.3.0",
     "@pie-lib/config-ui": "^11.9.25-next.0",
     "@pie-lib/editable-html": "^11.1.2-next.0",

package/controller/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.10.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/complex-rubric-controller@2.9.6...@pie-element/complex-rubric-controller@2.10.0) (2024-05-27)
+
+
+### Features
+
+* update pie-lib/pie-toolbox PD-3736, PD-3734, PD-2488 ([3c44f06](https://github.com/pie-framework/pie-elements/commit/3c44f06d96e609246acde257a8223dc16192c2c4))
+
+
+
+
+
 ## [2.9.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/complex-rubric-controller@2.9.5...@pie-element/complex-rubric-controller@2.9.6) (2024-05-27)
 
 

package/controller/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pie-element/complex-rubric-controller",
   "private": true,
-  "version": "2.9.6",
+  "version": "2.10.0",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@pie-lib/pie-toolbox": "1.19.1",
+    "@pie-lib/pie-toolbox": "1.20.0",
     "lodash": "^4.17.15"
   },
   "author": "",

package/module/configure.js

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.12.0/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.12.1/module/index.js";
 import RubricConfigure from '@pie-element/rubric/configure/lib';
 import {_dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_config_ui} from "../../../@pie-lib/pie-toolbox-module@4.12.0/module/index.js";
 function _mergeNamespaces(n, m) {
@@ -43834,7 +43834,7 @@ var _interopRequireDefault$3t = interopRequireDefault.exports;
 Object.defineProperty(color, "__esModule", {
   value: true
 });
-color.v = color.text = color.secondaryText = color.secondaryLight = color.secondaryDark = color.secondaryBackground = color.secondary = color.primaryText = color.primaryLight = color.primaryDark = color.primary = color.missing = color.incorrectSecondary = color.incorrect = color.disabled = color.defaults = color.correctSecondary = color.correct = color.background = void 0;
+color.v = color.text = color.secondaryText = color.secondaryLight = color.secondaryDark = color.secondaryBackground = color.secondary = color.primaryText = color.primaryLight = color.primaryDark = color.primary = color.missing = color.incorrectSecondary = color.incorrect = color.disabledSecondary = color.disabled = color.defaults = color.correctSecondary = color.correct = color.background = void 0;
 var _green = _interopRequireDefault$3t(green$1);
 var _orange = _interopRequireDefault$3t(orange$1);
 var _pink = _interopRequireDefault$3t(pink$1);
@@ -43843,6 +43843,7 @@ var _red = _interopRequireDefault$3t(red$1);
 var defaults$2 = {
   TEXT: 'black',
   DISABLED: 'grey',
+  DISABLED_SECONDARY: '#ABABAB',
   CORRECT: _green["default"][500],
   CORRECT_SECONDARY: _green["default"][50],
   INCORRECT: _orange["default"][500],
@@ -43881,6 +43882,10 @@ var disabled = function disabled() {
   return pv('disabled', defaults$2.DISABLED);
 };
 color.disabled = disabled;
+var disabledSecondary = function disabledSecondary() {
+  return pv('disabled-secondary', defaults$2.DISABLED_SECONDARY);
+};
+color.disabledSecondary = disabledSecondary;
 var correct = function correct() {
   return pv('correct', defaults$2.CORRECT);
 };
@@ -136945,16 +136950,160 @@ const require$$11$v = _dll_pie_framework__mathquill;
     var string = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     return string.replace(WHITESPACE_REGEX, '');
   }
+  function countBraces(latex) {
+    var count = 0;
+    for (var i = 0; i < (latex || '').length; i++) {
+      if (latex[i] === '{') {
+        count++;
+      }
+    }
+    return count;
+  }
   var Static = (function (_React$Component) {
     (0, _inherits2["default"])(Static, _React$Component);
     var _super = _createSuper(Static);
-    function Static() {
+    function Static(props) {
       var _this;
       (0, _classCallCheck2["default"])(this, Static);
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      _this = _super.call.apply(_super, [this].concat(args));
+      _this = _super.call(this, props);
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createLiveRegion", function () {
+        _this.liveRegion = document.createElement('div');
+        _this.liveRegion.style.position = 'absolute';
+        _this.liveRegion.style.width = '1px';
+        _this.liveRegion.style.height = '1px';
+        _this.liveRegion.style.marginTop = '-1px';
+        _this.liveRegion.style.clip = 'rect(1px, 1px, 1px, 1px)';
+        _this.liveRegion.style.overflow = 'hidden';
+        _this.liveRegion.setAttribute('aria-live', 'polite');
+        _this.liveRegion.setAttribute('aria-atomic', 'true');
+        document.body.appendChild(_this.liveRegion);
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addEventListeners", function () {
+        var input = _this.inputRef.current;
+        if (input) {
+          input.addEventListener('keydown', _this.handleKeyDown);
+          input.addEventListener('click', _this.handleMathKeyboardClick);
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "removeEventListeners", function () {
+        var input = _this.inputRef.current;
+        if (input) {
+          input.removeEventListener('keydown', _this.handleKeyDown);
+          input.removeEventListener('click', _this.handleMathKeyboardClick);
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "removeLiveRegion", function () {
+        if (_this.liveRegion) {
+          document.body.removeChild(_this.liveRegion);
+          _this.liveRegion = null;
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (event) {
+        if ((event === null || event === void 0 ? void 0 : event.key) === 'Backspace' || (event === null || event === void 0 ? void 0 : event.key) === 'Delete') {
+          _this.setState({
+            isDeleteKeyPressed: true
+          });
+        }
+        _this.setState({
+          inputSource: 'keyboard'
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMathKeyboardClick", function () {
+        _this.setState({
+          inputSource: 'mathKeyboard'
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onInputEdit", function (field) {
+        if (!_this.mathField) {
+          return;
+        }
+        var name = _this.props.getFieldName(field, _this.mathField.innerFields);
+        if (_this.props.onSubFieldChange) {
+          var _this$inputRef;
+          var regexMatch = field.latex().match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
+          if ((_this$inputRef = _this.inputRef) !== null && _this$inputRef !== void 0 && _this$inputRef.current && regexMatch && regexMatch !== null && regexMatch !== void 0 && regexMatch.length) {
+            try {
+              field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);
+              field.el().dispatchEvent(new KeyboardEvent('keydown', {
+                keyCode: 8
+              }));
+            } catch (e) {
+              console.error(e.toString());
+            }
+          } else {
+            _this.props.onSubFieldChange(name, field.latex());
+          }
+        }
+        _this.announceLatexConversion(field.latex());
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "announceLatexConversion", function (newLatex) {
+        if (!_this.state) {
+          console.error('State is not initialized');
+          return;
+        }
+        var _this$state = _this.state, previousLatex = _this$state.previousLatex, inputSource = _this$state.inputSource, isDeleteKeyPressed = _this$state.isDeleteKeyPressed;
+        var announcement = 'Converted to math symbol';
+        if (inputSource === 'keyboard' && !isDeleteKeyPressed) {
+          var newBraces = countBraces(newLatex);
+          var oldBraces = countBraces(previousLatex);
+          if (newBraces > oldBraces) {
+            _this.announceMessage(announcement);
+          } else {
+            try {
+              _this.mathField.parseLatex(previousLatex);
+              _this.mathField.parseLatex(newLatex);
+              if (newLatex == previousLatex) {
+                _this.announceMessage(announcement);
+              }
+            } catch (e) {
+              console.warn('Error parsing latex:', e.message);
+              console.warn(e);
+            }
+          }
+        }
+        _this.setState({
+          previousLatex: newLatex,
+          isDeleteKeyPressed: false
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "announceMessage", function (message) {
+        _this.setState({
+          previousLatex: ''
+        });
+        if (_this.liveRegion) {
+          _this.liveRegion.textContent = message;
+          setTimeout(function () {
+            _this.liveRegion.textContent = '';
+          }, 500);
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "update", function () {
+        if (!MQ) {
+          throw new Error('MQ is not defined - but component has mounted?');
+        }
+        if (!_this.mathField) {
+          var _this$inputRef2;
+          _this.mathField = MQ.StaticMath((_this$inputRef2 = _this.inputRef) === null || _this$inputRef2 === void 0 ? void 0 : _this$inputRef2.current, {
+            handlers: {
+              edit: _this.onInputEdit.bind((0, _assertThisInitialized2["default"])(_this))
+            }
+          });
+        }
+        try {
+          _this.mathField.parseLatex(_this.props.latex);
+          _this.mathField.latex(_this.props.latex);
+        } catch (e) {
+          _this.mathField.latex('\\MathQuillMathField[r1]{}');
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "blur", function () {
+        log('blur mathfield');
+        _this.mathField.blur();
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focus", function () {
+        log('focus mathfield...');
+        _this.mathField.focus();
+      });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFocus", function (e) {
         try {
           var rootBlock = e.target.parentElement.nextSibling;
@@ -136977,6 +137126,13 @@ const require$$11$v = _dll_pie_framework__mathquill;
           console.error('error finding root block', err.message);
         }
       });
+      _this.state = {
+        announcement: '',
+        previousLatex: '',
+        inputSource: null,
+        isDeleteKeyPressed: false
+      };
+      _this.inputRef = _react["default"].createRef();
       return _this;
     }
     (0, _createClass2["default"])(Static, [{
@@ -136984,6 +137140,8 @@ const require$$11$v = _dll_pie_framework__mathquill;
       value: function componentDidMount() {
         this.update();
         (0, _updateSpans.updateSpans)();
+        this.createLiveRegion();
+        this.addEventListeners();
       }
     }, {
       key: "componentDidUpdate",
@@ -136992,59 +137150,10 @@ const require$$11$v = _dll_pie_framework__mathquill;
         (0, _updateSpans.updateSpans)();
       }
     }, {
-      key: "onInputEdit",
-      value: function onInputEdit(field) {
-        if (!this.mathField) {
-          return;
-        }
-        var name = this.props.getFieldName(field, this.mathField.innerFields);
-        if (this.props.onSubFieldChange) {
-          var regexMatch = field.latex().match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
-          if (this.input && regexMatch && regexMatch !== null && regexMatch !== void 0 && regexMatch.length) {
-            try {
-              field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);
-              field.el().dispatchEvent(new KeyboardEvent('keydown', {
-                keyCode: 8
-              }));
-            } catch (e) {
-              console.error(e.toString());
-            }
-          } else {
-            this.props.onSubFieldChange(name, field.latex());
-          }
-        }
-      }
-    }, {
-      key: "update",
-      value: function update() {
-        if (!MQ) {
-          throw new Error('MQ is not defined - but component has mounted?');
-        }
-        if (!this.mathField) {
-          this.mathField = MQ.StaticMath(this.input, {
-            handlers: {
-              edit: this.onInputEdit.bind(this)
-            }
-          });
-        }
-        try {
-          this.mathField.parseLatex(this.props.latex);
-          this.mathField.latex(this.props.latex);
-        } catch (e) {
-          this.mathField.latex('\\MathQuillMathField[r1]{}');
-        }
-      }
-    }, {
-      key: "blur",
-      value: function blur() {
-        log('blur mathfield');
-        this.mathField.blur();
-      }
-    }, {
-      key: "focus",
-      value: function focus() {
-        log('focus mathfield...');
-        this.mathField.focus();
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.removeLiveRegion();
+        this.removeEventListeners();
       }
     }, {
       key: "shouldComponentUpdate",
@@ -137065,15 +137174,12 @@ const require$$11$v = _dll_pie_framework__mathquill;
     }, {
       key: "render",
       value: function render() {
-        var _this2 = this;
         var _this$props = this.props, onBlur = _this$props.onBlur, className = _this$props.className;
         return _react["default"].createElement("span", {
           className: className,
           onFocus: this.onFocus,
           onBlur: onBlur,
-          ref: function ref(r) {
-            return _this2.input = r;
-          }
+          ref: this.inputRef
         });
       }
     }]);

package/module/element.js

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.12.0/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.12.1/module/index.js";
 import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.12.0/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
@@ -37774,16 +37774,160 @@ const require$$11$x = _dll_pie_framework__mathquill;
     var string = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     return string.replace(WHITESPACE_REGEX, '');
   }
+  function countBraces(latex) {
+    var count = 0;
+    for (var i = 0; i < (latex || '').length; i++) {
+      if (latex[i] === '{') {
+        count++;
+      }
+    }
+    return count;
+  }
   var Static = (function (_React$Component) {
     (0, _inherits2["default"])(Static, _React$Component);
     var _super = _createSuper(Static);
-    function Static() {
+    function Static(props) {
       var _this;
       (0, _classCallCheck2["default"])(this, Static);
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      _this = _super.call.apply(_super, [this].concat(args));
+      _this = _super.call(this, props);
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createLiveRegion", function () {
+        _this.liveRegion = document.createElement('div');
+        _this.liveRegion.style.position = 'absolute';
+        _this.liveRegion.style.width = '1px';
+        _this.liveRegion.style.height = '1px';
+        _this.liveRegion.style.marginTop = '-1px';
+        _this.liveRegion.style.clip = 'rect(1px, 1px, 1px, 1px)';
+        _this.liveRegion.style.overflow = 'hidden';
+        _this.liveRegion.setAttribute('aria-live', 'polite');
+        _this.liveRegion.setAttribute('aria-atomic', 'true');
+        document.body.appendChild(_this.liveRegion);
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addEventListeners", function () {
+        var input = _this.inputRef.current;
+        if (input) {
+          input.addEventListener('keydown', _this.handleKeyDown);
+          input.addEventListener('click', _this.handleMathKeyboardClick);
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "removeEventListeners", function () {
+        var input = _this.inputRef.current;
+        if (input) {
+          input.removeEventListener('keydown', _this.handleKeyDown);
+          input.removeEventListener('click', _this.handleMathKeyboardClick);
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "removeLiveRegion", function () {
+        if (_this.liveRegion) {
+          document.body.removeChild(_this.liveRegion);
+          _this.liveRegion = null;
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (event) {
+        if ((event === null || event === void 0 ? void 0 : event.key) === 'Backspace' || (event === null || event === void 0 ? void 0 : event.key) === 'Delete') {
+          _this.setState({
+            isDeleteKeyPressed: true
+          });
+        }
+        _this.setState({
+          inputSource: 'keyboard'
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMathKeyboardClick", function () {
+        _this.setState({
+          inputSource: 'mathKeyboard'
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onInputEdit", function (field) {
+        if (!_this.mathField) {
+          return;
+        }
+        var name = _this.props.getFieldName(field, _this.mathField.innerFields);
+        if (_this.props.onSubFieldChange) {
+          var _this$inputRef;
+          var regexMatch = field.latex().match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
+          if ((_this$inputRef = _this.inputRef) !== null && _this$inputRef !== void 0 && _this$inputRef.current && regexMatch && regexMatch !== null && regexMatch !== void 0 && regexMatch.length) {
+            try {
+              field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);
+              field.el().dispatchEvent(new KeyboardEvent('keydown', {
+                keyCode: 8
+              }));
+            } catch (e) {
+              console.error(e.toString());
+            }
+          } else {
+            _this.props.onSubFieldChange(name, field.latex());
+          }
+        }
+        _this.announceLatexConversion(field.latex());
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "announceLatexConversion", function (newLatex) {
+        if (!_this.state) {
+          console.error('State is not initialized');
+          return;
+        }
+        var _this$state = _this.state, previousLatex = _this$state.previousLatex, inputSource = _this$state.inputSource, isDeleteKeyPressed = _this$state.isDeleteKeyPressed;
+        var announcement = 'Converted to math symbol';
+        if (inputSource === 'keyboard' && !isDeleteKeyPressed) {
+          var newBraces = countBraces(newLatex);
+          var oldBraces = countBraces(previousLatex);
+          if (newBraces > oldBraces) {
+            _this.announceMessage(announcement);
+          } else {
+            try {
+              _this.mathField.parseLatex(previousLatex);
+              _this.mathField.parseLatex(newLatex);
+              if (newLatex == previousLatex) {
+                _this.announceMessage(announcement);
+              }
+            } catch (e) {
+              console.warn('Error parsing latex:', e.message);
+              console.warn(e);
+            }
+          }
+        }
+        _this.setState({
+          previousLatex: newLatex,
+          isDeleteKeyPressed: false
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "announceMessage", function (message) {
+        _this.setState({
+          previousLatex: ''
+        });
+        if (_this.liveRegion) {
+          _this.liveRegion.textContent = message;
+          setTimeout(function () {
+            _this.liveRegion.textContent = '';
+          }, 500);
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "update", function () {
+        if (!MQ) {
+          throw new Error('MQ is not defined - but component has mounted?');
+        }
+        if (!_this.mathField) {
+          var _this$inputRef2;
+          _this.mathField = MQ.StaticMath((_this$inputRef2 = _this.inputRef) === null || _this$inputRef2 === void 0 ? void 0 : _this$inputRef2.current, {
+            handlers: {
+              edit: _this.onInputEdit.bind((0, _assertThisInitialized2["default"])(_this))
+            }
+          });
+        }
+        try {
+          _this.mathField.parseLatex(_this.props.latex);
+          _this.mathField.latex(_this.props.latex);
+        } catch (e) {
+          _this.mathField.latex('\\MathQuillMathField[r1]{}');
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "blur", function () {
+        log('blur mathfield');
+        _this.mathField.blur();
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focus", function () {
+        log('focus mathfield...');
+        _this.mathField.focus();
+      });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFocus", function (e) {
         try {
           var rootBlock = e.target.parentElement.nextSibling;
@@ -37806,6 +37950,13 @@ const require$$11$x = _dll_pie_framework__mathquill;
           console.error('error finding root block', err.message);
         }
       });
+      _this.state = {
+        announcement: '',
+        previousLatex: '',
+        inputSource: null,
+        isDeleteKeyPressed: false
+      };
+      _this.inputRef = _react["default"].createRef();
       return _this;
     }
     (0, _createClass2["default"])(Static, [{
@@ -37813,6 +37964,8 @@ const require$$11$x = _dll_pie_framework__mathquill;
       value: function componentDidMount() {
         this.update();
         (0, _updateSpans.updateSpans)();
+        this.createLiveRegion();
+        this.addEventListeners();
       }
     }, {
       key: "componentDidUpdate",
@@ -37821,59 +37974,10 @@ const require$$11$x = _dll_pie_framework__mathquill;
         (0, _updateSpans.updateSpans)();
       }
     }, {
-      key: "onInputEdit",
-      value: function onInputEdit(field) {
-        if (!this.mathField) {
-          return;
-        }
-        var name = this.props.getFieldName(field, this.mathField.innerFields);
-        if (this.props.onSubFieldChange) {
-          var regexMatch = field.latex().match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
-          if (this.input && regexMatch && regexMatch !== null && regexMatch !== void 0 && regexMatch.length) {
-            try {
-              field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);
-              field.el().dispatchEvent(new KeyboardEvent('keydown', {
-                keyCode: 8
-              }));
-            } catch (e) {
-              console.error(e.toString());
-            }
-          } else {
-            this.props.onSubFieldChange(name, field.latex());
-          }
-        }
-      }
-    }, {
-      key: "update",
-      value: function update() {
-        if (!MQ) {
-          throw new Error('MQ is not defined - but component has mounted?');
-        }
-        if (!this.mathField) {
-          this.mathField = MQ.StaticMath(this.input, {
-            handlers: {
-              edit: this.onInputEdit.bind(this)
-            }
-          });
-        }
-        try {
-          this.mathField.parseLatex(this.props.latex);
-          this.mathField.latex(this.props.latex);
-        } catch (e) {
-          this.mathField.latex('\\MathQuillMathField[r1]{}');
-        }
-      }
-    }, {
-      key: "blur",
-      value: function blur() {
-        log('blur mathfield');
-        this.mathField.blur();
-      }
-    }, {
-      key: "focus",
-      value: function focus() {
-        log('focus mathfield...');
-        this.mathField.focus();
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.removeLiveRegion();
+        this.removeEventListeners();
       }
     }, {
       key: "shouldComponentUpdate",
@@ -37894,15 +37998,12 @@ const require$$11$x = _dll_pie_framework__mathquill;
     }, {
       key: "render",
       value: function render() {
-        var _this2 = this;
         var _this$props = this.props, onBlur = _this$props.onBlur, className = _this$props.className;
         return _react["default"].createElement("span", {
           className: className,
           onFocus: this.onFocus,
           onBlur: onBlur,
-          ref: function ref(r) {
-            return _this2.input = r;
-          }
+          ref: this.inputRef
         });
       }
     }]);
@@ -66377,7 +66478,7 @@ var _interopRequireDefault$2p = interopRequireDefault.exports;
 Object.defineProperty(color, "__esModule", {
   value: true
 });
-color.v = color.text = color.secondaryText = color.secondaryLight = color.secondaryDark = color.secondaryBackground = color.secondary = color.primaryText = color.primaryLight = color.primaryDark = color.primary = color.missing = color.incorrectSecondary = color.incorrect = color.disabled = color.defaults = color.correctSecondary = color.correct = color.background = void 0;
+color.v = color.text = color.secondaryText = color.secondaryLight = color.secondaryDark = color.secondaryBackground = color.secondary = color.primaryText = color.primaryLight = color.primaryDark = color.primary = color.missing = color.incorrectSecondary = color.incorrect = color.disabledSecondary = color.disabled = color.defaults = color.correctSecondary = color.correct = color.background = void 0;
 var _green = _interopRequireDefault$2p(green$1);
 var _orange = _interopRequireDefault$2p(orange$1);
 var _pink = _interopRequireDefault$2p(pink$1);
@@ -66386,6 +66487,7 @@ var _red = _interopRequireDefault$2p(red$1);
 var defaults = {
   TEXT: 'black',
   DISABLED: 'grey',
+  DISABLED_SECONDARY: '#ABABAB',
   CORRECT: _green["default"][500],
   CORRECT_SECONDARY: _green["default"][50],
   INCORRECT: _orange["default"][500],
@@ -66424,6 +66526,10 @@ var disabled = function disabled() {
   return pv('disabled', defaults.DISABLED);
 };
 color.disabled = disabled;
+var disabledSecondary = function disabledSecondary() {
+  return pv('disabled-secondary', defaults.DISABLED_SECONDARY);
+};
+color.disabledSecondary = disabledSecondary;
 var correct = function correct() {
   return pv('correct', defaults.CORRECT);
 };

package/module/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/complex-rubric@2.10.5</title>
+      <title>@pie-element/complex-rubric@2.10.6</title>
       <script
         type="module"
         src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>

package/module/manifest.json

@@ -1,10 +1,10 @@
 {
   "name": "@pie-element/complex-rubric",
-  "version": "2.10.5",
+  "version": "2.10.6",
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",
-      "version": "1.12.0"
+      "version": "1.12.1"
     },
     {
       "name": "@pie-lib/pie-toolbox-module",

package/module/print.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/complex-rubric@2.10.5</title>
+      <title>@pie-element/complex-rubric@2.10.6</title>
       <link
         href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
         rel="stylesheet"

package/module/print.js

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.12.0/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_lodash, _dll_react_dom_server, _dll_pie_framework__mathquill} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.12.1/module/index.js";
 import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.12.0/module/index.js";
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {
@@ -37774,16 +37774,160 @@ const require$$11$x = _dll_pie_framework__mathquill;
     var string = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     return string.replace(WHITESPACE_REGEX, '');
   }
+  function countBraces(latex) {
+    var count = 0;
+    for (var i = 0; i < (latex || '').length; i++) {
+      if (latex[i] === '{') {
+        count++;
+      }
+    }
+    return count;
+  }
   var Static = (function (_React$Component) {
     (0, _inherits2["default"])(Static, _React$Component);
     var _super = _createSuper(Static);
-    function Static() {
+    function Static(props) {
       var _this;
       (0, _classCallCheck2["default"])(this, Static);
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      _this = _super.call.apply(_super, [this].concat(args));
+      _this = _super.call(this, props);
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "createLiveRegion", function () {
+        _this.liveRegion = document.createElement('div');
+        _this.liveRegion.style.position = 'absolute';
+        _this.liveRegion.style.width = '1px';
+        _this.liveRegion.style.height = '1px';
+        _this.liveRegion.style.marginTop = '-1px';
+        _this.liveRegion.style.clip = 'rect(1px, 1px, 1px, 1px)';
+        _this.liveRegion.style.overflow = 'hidden';
+        _this.liveRegion.setAttribute('aria-live', 'polite');
+        _this.liveRegion.setAttribute('aria-atomic', 'true');
+        document.body.appendChild(_this.liveRegion);
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addEventListeners", function () {
+        var input = _this.inputRef.current;
+        if (input) {
+          input.addEventListener('keydown', _this.handleKeyDown);
+          input.addEventListener('click', _this.handleMathKeyboardClick);
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "removeEventListeners", function () {
+        var input = _this.inputRef.current;
+        if (input) {
+          input.removeEventListener('keydown', _this.handleKeyDown);
+          input.removeEventListener('click', _this.handleMathKeyboardClick);
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "removeLiveRegion", function () {
+        if (_this.liveRegion) {
+          document.body.removeChild(_this.liveRegion);
+          _this.liveRegion = null;
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (event) {
+        if ((event === null || event === void 0 ? void 0 : event.key) === 'Backspace' || (event === null || event === void 0 ? void 0 : event.key) === 'Delete') {
+          _this.setState({
+            isDeleteKeyPressed: true
+          });
+        }
+        _this.setState({
+          inputSource: 'keyboard'
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMathKeyboardClick", function () {
+        _this.setState({
+          inputSource: 'mathKeyboard'
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onInputEdit", function (field) {
+        if (!_this.mathField) {
+          return;
+        }
+        var name = _this.props.getFieldName(field, _this.mathField.innerFields);
+        if (_this.props.onSubFieldChange) {
+          var _this$inputRef;
+          var regexMatch = field.latex().match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
+          if ((_this$inputRef = _this.inputRef) !== null && _this$inputRef !== void 0 && _this$inputRef.current && regexMatch && regexMatch !== null && regexMatch !== void 0 && regexMatch.length) {
+            try {
+              field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);
+              field.el().dispatchEvent(new KeyboardEvent('keydown', {
+                keyCode: 8
+              }));
+            } catch (e) {
+              console.error(e.toString());
+            }
+          } else {
+            _this.props.onSubFieldChange(name, field.latex());
+          }
+        }
+        _this.announceLatexConversion(field.latex());
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "announceLatexConversion", function (newLatex) {
+        if (!_this.state) {
+          console.error('State is not initialized');
+          return;
+        }
+        var _this$state = _this.state, previousLatex = _this$state.previousLatex, inputSource = _this$state.inputSource, isDeleteKeyPressed = _this$state.isDeleteKeyPressed;
+        var announcement = 'Converted to math symbol';
+        if (inputSource === 'keyboard' && !isDeleteKeyPressed) {
+          var newBraces = countBraces(newLatex);
+          var oldBraces = countBraces(previousLatex);
+          if (newBraces > oldBraces) {
+            _this.announceMessage(announcement);
+          } else {
+            try {
+              _this.mathField.parseLatex(previousLatex);
+              _this.mathField.parseLatex(newLatex);
+              if (newLatex == previousLatex) {
+                _this.announceMessage(announcement);
+              }
+            } catch (e) {
+              console.warn('Error parsing latex:', e.message);
+              console.warn(e);
+            }
+          }
+        }
+        _this.setState({
+          previousLatex: newLatex,
+          isDeleteKeyPressed: false
+        });
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "announceMessage", function (message) {
+        _this.setState({
+          previousLatex: ''
+        });
+        if (_this.liveRegion) {
+          _this.liveRegion.textContent = message;
+          setTimeout(function () {
+            _this.liveRegion.textContent = '';
+          }, 500);
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "update", function () {
+        if (!MQ) {
+          throw new Error('MQ is not defined - but component has mounted?');
+        }
+        if (!_this.mathField) {
+          var _this$inputRef2;
+          _this.mathField = MQ.StaticMath((_this$inputRef2 = _this.inputRef) === null || _this$inputRef2 === void 0 ? void 0 : _this$inputRef2.current, {
+            handlers: {
+              edit: _this.onInputEdit.bind((0, _assertThisInitialized2["default"])(_this))
+            }
+          });
+        }
+        try {
+          _this.mathField.parseLatex(_this.props.latex);
+          _this.mathField.latex(_this.props.latex);
+        } catch (e) {
+          _this.mathField.latex('\\MathQuillMathField[r1]{}');
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "blur", function () {
+        log('blur mathfield');
+        _this.mathField.blur();
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focus", function () {
+        log('focus mathfield...');
+        _this.mathField.focus();
+      });
       (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFocus", function (e) {
         try {
           var rootBlock = e.target.parentElement.nextSibling;
@@ -37806,6 +37950,13 @@ const require$$11$x = _dll_pie_framework__mathquill;
           console.error('error finding root block', err.message);
         }
       });
+      _this.state = {
+        announcement: '',
+        previousLatex: '',
+        inputSource: null,
+        isDeleteKeyPressed: false
+      };
+      _this.inputRef = _react["default"].createRef();
       return _this;
     }
     (0, _createClass2["default"])(Static, [{
@@ -37813,6 +37964,8 @@ const require$$11$x = _dll_pie_framework__mathquill;
       value: function componentDidMount() {
         this.update();
         (0, _updateSpans.updateSpans)();
+        this.createLiveRegion();
+        this.addEventListeners();
       }
     }, {
       key: "componentDidUpdate",
@@ -37821,59 +37974,10 @@ const require$$11$x = _dll_pie_framework__mathquill;
         (0, _updateSpans.updateSpans)();
       }
     }, {
-      key: "onInputEdit",
-      value: function onInputEdit(field) {
-        if (!this.mathField) {
-          return;
-        }
-        var name = this.props.getFieldName(field, this.mathField.innerFields);
-        if (this.props.onSubFieldChange) {
-          var regexMatch = field.latex().match(/[0-9]\\ \\frac\{[^\{]*\}\{ \}/);
-          if (this.input && regexMatch && regexMatch !== null && regexMatch !== void 0 && regexMatch.length) {
-            try {
-              field.__controller.cursor.insLeftOf(field.__controller.cursor.parent[-1].parent);
-              field.el().dispatchEvent(new KeyboardEvent('keydown', {
-                keyCode: 8
-              }));
-            } catch (e) {
-              console.error(e.toString());
-            }
-          } else {
-            this.props.onSubFieldChange(name, field.latex());
-          }
-        }
-      }
-    }, {
-      key: "update",
-      value: function update() {
-        if (!MQ) {
-          throw new Error('MQ is not defined - but component has mounted?');
-        }
-        if (!this.mathField) {
-          this.mathField = MQ.StaticMath(this.input, {
-            handlers: {
-              edit: this.onInputEdit.bind(this)
-            }
-          });
-        }
-        try {
-          this.mathField.parseLatex(this.props.latex);
-          this.mathField.latex(this.props.latex);
-        } catch (e) {
-          this.mathField.latex('\\MathQuillMathField[r1]{}');
-        }
-      }
-    }, {
-      key: "blur",
-      value: function blur() {
-        log('blur mathfield');
-        this.mathField.blur();
-      }
-    }, {
-      key: "focus",
-      value: function focus() {
-        log('focus mathfield...');
-        this.mathField.focus();
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.removeLiveRegion();
+        this.removeEventListeners();
       }
     }, {
       key: "shouldComponentUpdate",
@@ -37894,15 +37998,12 @@ const require$$11$x = _dll_pie_framework__mathquill;
     }, {
       key: "render",
       value: function render() {
-        var _this2 = this;
         var _this$props = this.props, onBlur = _this$props.onBlur, className = _this$props.className;
         return _react["default"].createElement("span", {
           className: className,
           onFocus: this.onFocus,
           onBlur: onBlur,
-          ref: function ref(r) {
-            return _this2.input = r;
-          }
+          ref: this.inputRef
         });
       }
     }]);
@@ -66377,7 +66478,7 @@ var _interopRequireDefault$2p = interopRequireDefault.exports;
 Object.defineProperty(color, "__esModule", {
   value: true
 });
-color.v = color.text = color.secondaryText = color.secondaryLight = color.secondaryDark = color.secondaryBackground = color.secondary = color.primaryText = color.primaryLight = color.primaryDark = color.primary = color.missing = color.incorrectSecondary = color.incorrect = color.disabled = color.defaults = color.correctSecondary = color.correct = color.background = void 0;
+color.v = color.text = color.secondaryText = color.secondaryLight = color.secondaryDark = color.secondaryBackground = color.secondary = color.primaryText = color.primaryLight = color.primaryDark = color.primary = color.missing = color.incorrectSecondary = color.incorrect = color.disabledSecondary = color.disabled = color.defaults = color.correctSecondary = color.correct = color.background = void 0;
 var _green = _interopRequireDefault$2p(green$1);
 var _orange = _interopRequireDefault$2p(orange$1);
 var _pink = _interopRequireDefault$2p(pink$1);
@@ -66386,6 +66487,7 @@ var _red = _interopRequireDefault$2p(red$1);
 var defaults = {
   TEXT: 'black',
   DISABLED: 'grey',
+  DISABLED_SECONDARY: '#ABABAB',
   CORRECT: _green["default"][500],
   CORRECT_SECONDARY: _green["default"][50],
   INCORRECT: _orange["default"][500],
@@ -66424,6 +66526,10 @@ var disabled = function disabled() {
   return pv('disabled', defaults.DISABLED);
 };
 color.disabled = disabled;
+var disabledSecondary = function disabledSecondary() {
+  return pv('disabled-secondary', defaults.DISABLED_SECONDARY);
+};
+color.disabledSecondary = disabledSecondary;
 var correct = function correct() {
   return pv('correct', defaults.CORRECT);
 };

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@pie-element/complex-rubric",
   "repository": "pie-framework/pie-elements",
-  "version": "2.10.6",
+  "version": "2.11.0",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-element/multi-trait-rubric": "^3.10.6",
-    "@pie-element/rubric": "^3.10.6",
+    "@pie-element/multi-trait-rubric": "^3.11.0",
+    "@pie-element/rubric": "^3.11.0",
     "@pie-framework/pie-player-events": "^0.1.0",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2"
   },
-  "gitHead": "03c6ec6ef5b3ce2df9dd0b4cb42fdfd0eea9b06b",
+  "gitHead": "f5691f1d898d9b51f79a269bce973b35cfe99ced",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },