@instructure/canvas-rce 5.14.1 → 5.15.0

package/es/rce/plugins/tinymce-a11y-checker/components/checker.js

@@ -15,9 +15,8 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-
-/* eslint-disable jest/valid-describe */
 // our own imported describe function confuses eslint
+
 import React from 'react';
 import { LiveAnnouncer, LiveMessage } from 'react-aria-live';
 import { Button, CloseButton, IconButton } from '@instructure/ui-buttons';
@@ -45,15 +44,14 @@ import checkNode from '../node-checker';
 import formatMessage from '../../../../format-message';
 import { clearIndicators } from '../utils/indicate';
 import { getTrayHeight } from '../../shared/trayUtils';
-import { instuiPopupMountNode } from '../../../../util/fullscreenHelpers'; // safari still doesn't support the standard api
+import { instuiPopupMountNodeFn } from '../../../../util/fullscreenHelpers';
 
+// safari still doesn't support the standard api
 const FS_CHANGEEVENT = document.exitFullscreen ? 'fullscreenchange' : 'webkitfullscreenchange';
-
 const noop = () => {};
-
 export default class Checker extends React.Component {
-  constructor() {
-    super(...arguments);
+  constructor(...args) {
+    super(...args);
     this.state = {
       open: false,
       checking: false,
@@ -64,25 +62,21 @@ export default class Checker extends React.Component {
       config: {},
       showWhyPopover: false
     };
-
     this.onFullscreenChange = _event => {
       this.selectCurrent();
     };
-
-    this.updateFormState = _ref => {
-      let {
-        target
-      } = _ref;
+    this.updateFormState = ({
+      target
+    }) => {
       this.setState(prevState => {
-        const formState = { ...prevState.formState
+        const formState = {
+          ...prevState.formState
         };
-
         if (target.type === 'checkbox') {
           formState[target.name] = target.checked;
         } else {
           formState[target.name] = target.value;
         }
-
         return {
           formState,
           formStateValid: this.formStateValid(formState)
@@ -90,7 +84,6 @@ export default class Checker extends React.Component {
       });
     };
   }
-
   componentDidMount() {
     this.props.editor.on('Remove', _editor => {
       this.setState({
@@ -100,7 +93,6 @@ export default class Checker extends React.Component {
       });
     });
   }
-
   componentDidUpdate(_prevProps, prevState) {
     if (prevState.open !== this.state.open) {
       if (this.state.open) {
@@ -110,13 +102,11 @@ export default class Checker extends React.Component {
       }
     }
   }
-
   setConfig(config) {
     this.setState({
       config
     });
   }
-
   check(done) {
     if (typeof done !== 'function') done = noop;
     this.setState({
@@ -144,10 +134,8 @@ export default class Checker extends React.Component {
       }
     });
   }
-
   _check(done) {
     const node = this.props.getBody();
-
     const checkDone = errors => {
       this.setState({
         errorIndex: 0,
@@ -158,43 +146,34 @@ export default class Checker extends React.Component {
         done();
       });
     };
-
     checkNode(node, checkDone, this.state.config, this.props.additionalRules);
   }
-
   firstError() {
     if (this.state.errors.length > 0) {
       this.setErrorIndex(0);
     }
   }
-
   nextError() {
     const next = (this.state.errorIndex + 1) % this.state.errors.length;
     this.setErrorIndex(next);
   }
-
   prevError() {
     const len = this.state.errors.length;
     const prev = (len + this.state.errorIndex - 1) % len;
     this.setErrorIndex(prev);
   }
-
   setErrorIndex(errorIndex) {
     this.onLeaveError();
-
     if (errorIndex >= this.state.errors.length) {
       errorIndex = 0;
     }
-
     this.setState({
       errorIndex
     }, () => this.selectCurrent());
   }
-
   selectCurrent() {
     clearIndicators(this.props.editor.dom.doc);
     const errorNode = this.errorNode();
-
     if (errorNode) {
       this.getFormState();
       dom.select(errorNode);
@@ -202,44 +181,35 @@ export default class Checker extends React.Component {
       this.firstError();
     }
   }
-
   error() {
     return this.state.errors[this.state.errorIndex];
   }
-
   errorNode() {
     const error = this.error();
     return error && error.node;
   }
-
   errorRootNode() {
     const rule = this.errorRule();
     const rootNode = rule && rule.rootNode && rule.rootNode(this.errorNode());
     return rootNode || this.errorNode();
   }
-
   updateErrorNode(elem) {
     const error = this.error();
-
     if (error) {
       error.node = elem;
     }
   }
-
   errorRule() {
     const error = this.error();
     return error && error.rule;
   }
-
   errorMessage() {
     const rule = this.errorRule();
     return rule && rule.message();
   }
-
   getFormState() {
     const rule = this.errorRule();
     const node = this.errorNode();
-
     if (rule && node) {
       this.setState({
         formState: rule.data(node),
@@ -247,39 +217,30 @@ export default class Checker extends React.Component {
       });
     }
   }
-
   formStateValid(formState) {
     formState = formState || this.state.formState;
     let node = this.tempNode(true);
     const rule = this.errorRule();
-
     if (!node || !rule) {
       return false;
     }
-
     node = rule.update(node, formState);
-
     if (this._tempNode === this._tempTestNode) {
       this._tempNode = node;
     }
-
     this._tempTestNode = node;
     return rule.test(node);
   }
-
   fixIssue() {
     const rule = this.errorRule();
     const node = this.errorNode();
-
     if (rule && node) {
       this.removeTempNode();
       rule.update(node, this.state.formState);
       this.updateErrorNode(node);
-
       if (this._closeButtonRef) {
         this._closeButtonRef.focus();
       }
-
       const errorIndex = this.state.errorIndex;
       this.check(() => {
         this.setErrorIndex(errorIndex);
@@ -287,23 +248,17 @@ export default class Checker extends React.Component {
       });
     }
   }
-
   newTempRootNode(rootNode) {
     const newTempRootNode = rootNode.cloneNode(true);
     const path = dom.pathForNode(rootNode, this.errorNode());
     this._tempTestNode = dom.nodeByPath(newTempRootNode, path);
     return newTempRootNode;
   }
-
-  tempNode() {
-    let refresh = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-
+  tempNode(refresh = false) {
     if (!this._tempNode || refresh) {
       const rootNode = this.errorRootNode();
-
       if (rootNode) {
         const newTempRtNode = this.newTempRootNode(rootNode);
-
         if (refresh && this._tempNode) {
           const parent = this._tempNode.parentNode;
           parent.insertBefore(newTempRtNode, this._tempNode);
@@ -313,17 +268,13 @@ export default class Checker extends React.Component {
           parent.insertBefore(newTempRtNode, rootNode);
           parent.removeChild(rootNode);
         }
-
         this._tempNode = newTempRtNode;
       }
     }
-
     return this._tempTestNode;
   }
-
   removeTempNode() {
     const node = this.errorRootNode();
-
     if (this._tempNode && node) {
       const parent = this._tempNode.parentNode;
       parent.insertBefore(node, this._tempNode);
@@ -332,11 +283,9 @@ export default class Checker extends React.Component {
       this._tempTestNode = null;
     }
   }
-
   onLeaveError() {
     this.removeTempNode();
   }
-
   handleClose() {
     this.onLeaveError();
     clearIndicators(this.props.editor.dom.doc);
@@ -346,7 +295,6 @@ export default class Checker extends React.Component {
       this.props.onClose();
     });
   }
-
   render() {
     const rule = this.errorRule();
     const issueNumberMessage = formatMessage('Issue { num }/{ total }', {
@@ -482,14 +430,12 @@ export default class Checker extends React.Component {
       margin: "medium auto"
     }))))));
   }
-
   renderField(f) {
     const disabled = !!f.disabledIf && f.disabledIf(this.state.formState);
-
     switch (true) {
       case !!f.options:
         return /*#__PURE__*/React.createElement(SimpleSelect, {
-          mountNode: instuiPopupMountNode,
+          mountNode: instuiPopupMountNodeFn(),
           disabled: disabled,
           onChange: (e, option) => {
             this.updateFormState({
@@ -506,7 +452,6 @@ export default class Checker extends React.Component {
           id: o[0],
           value: o[0]
         }, o[1])));
-
       case f.checkbox:
         return /*#__PURE__*/React.createElement(Checkbox, {
           label: f.label,
@@ -515,7 +460,6 @@ export default class Checker extends React.Component {
           onChange: this.updateFormState,
           disabled: disabled
         });
-
       case f.color:
         return /*#__PURE__*/React.createElement(ColorField, {
           label: f.label,
@@ -524,7 +468,6 @@ export default class Checker extends React.Component {
           onChange: this.updateFormState,
           key: this.state.formState.id
         });
-
       case f.textarea:
         return /*#__PURE__*/React.createElement(TextArea, {
           label: f.label,
@@ -533,13 +476,11 @@ export default class Checker extends React.Component {
           onChange: this.updateFormState,
           disabled: disabled
         });
-
       case f.alert:
         return this.state.formState.action === 'elem-only' && /*#__PURE__*/React.createElement(Alert, {
           name: f.dataKey,
           variant: f.variant
         }, f.message);
-
       default:
         return /*#__PURE__*/React.createElement(TextInput, {
           renderLabel: f.label,
@@ -550,7 +491,6 @@ export default class Checker extends React.Component {
         });
     }
   }
-
 }
 Checker.defaultProps = {
   additionalRules: [],

package/es/rce/plugins/tinymce-a11y-checker/components/color-picker.js

@@ -15,11 +15,11 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import { ColorWrap, Saturation, Hue, Alpha } from 'react-color/lib/components/common';
 import Pointer from './pointer';
 import PointerCircle from 'react-color/lib/components/photoshop/PhotoshopPointerCircle';
-
 function ColorPicker(props) {
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": props['data-testid']
@@ -55,5 +55,4 @@ function ColorPicker(props) {
     pointer: Pointer
   }))));
 }
-
 export default ColorWrap(ColorPicker);

package/es/rce/plugins/tinymce-a11y-checker/components/placeholder-svg.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 export default function PlaceholderSVG() {
   return /*#__PURE__*/React.createElement("svg", {

package/es/rce/plugins/tinymce-a11y-checker/components/pointer.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 export default function Pointer() {
   const styles = {

package/es/rce/plugins/tinymce-a11y-checker/node-checker.js

@@ -15,22 +15,17 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import * as dom from './utils/dom';
 import rules from './rules';
-export default function checkNode(node, done) {
-  let config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  let additionalRules = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
-
+export default function checkNode(node, done, config = {}, additionalRules = []) {
   if (!node) {
     return;
   }
-
   const errors = [];
-
   const childNodeCheck = child => {
     if (child.hasAttribute('data-ignore-a11y-check')) return;
     const composedRules = rules.concat(additionalRules);
-
     for (const rule of composedRules) {
       // eslint-disable-next-line promise/catch-or-return
       Promise.resolve(rule.test(child, config)).then(result => {
@@ -43,12 +38,10 @@ export default function checkNode(node, done) {
       });
     }
   };
-
   const checkDone = () => {
     if (typeof done === 'function') {
       done(errors);
     }
   };
-
   dom.walk(node, childNodeCheck, checkDone);
 }

package/es/rce/plugins/tinymce-a11y-checker/plugin.js

@@ -15,6 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Checker from './components/checker';
@@ -28,30 +29,25 @@ container.className = 'tinymce-a11y-checker-container';
 document.body.appendChild(container);
 tinymce.create('tinymce.plugins.AccessibilityChecker', {
   init(ed) {
-    ed.addCommand('openAccessibilityChecker', function (ui, _ref) {
-      let {
-        done,
-        config,
-        additionalRules,
-        mountNode,
-        triggerElementId,
-        onFixError
-      } = _ref;
-
+    ed.addCommand('openAccessibilityChecker', function (ui, {
+      done,
+      config,
+      additionalRules,
+      mountNode,
+      triggerElementId,
+      onFixError
+    }) {
       if (!isCheckerOpen) {
-        ReactDOM.render( /*#__PURE__*/React.createElement(Checker, {
+        ReactDOM.render(/*#__PURE__*/React.createElement(Checker, {
           getBody: ed.getBody.bind(ed),
           editor: ed,
           additionalRules: additionalRules,
           mountNode: mountNode,
           onClose: () => {
             isCheckerOpen = false;
-
             if (triggerElementId) {
-              var _button$;
-
               const button = document.querySelectorAll(`[data-btn-id=${triggerElementId}]`);
-              (_button$ = button[0]) === null || _button$ === void 0 ? void 0 : _button$.focus();
+              button[0]?.focus();
             }
           },
           onFixError: onFixError
@@ -68,12 +64,11 @@ tinymce.create('tinymce.plugins.AccessibilityChecker', {
         isCheckerOpen = true;
       }
     });
-    ed.addCommand('checkAccessibility', function (ui, _ref2) {
-      let {
-        done,
-        config,
-        additionalRules
-      } = _ref2;
+    ed.addCommand('checkAccessibility', function (ui, {
+      done,
+      config,
+      additionalRules
+    }) {
       checkNode(ed.getBody(), done, config, additionalRules);
     });
     ed.ui.registry.addButton('check_a11y', {
@@ -82,15 +77,14 @@ tinymce.create('tinymce.plugins.AccessibilityChecker', {
       icon: 'a11y'
     });
   }
+});
 
-}); // Register plugin
-
+// Register plugin
 tinymce.PluginManager.add('a11y_checker', tinymce.plugins.AccessibilityChecker);
 export function getInstance(cb) {
   if (instance != null) {
     return cb(instance);
   }
-
   pendingInstanceCallbacks.push(cb);
 }
 export function setLocale(locale) {

package/es/rce/plugins/tinymce-a11y-checker/rules/adjacent-links.js

@@ -15,59 +15,46 @@
  * You should have received a copy of the GNU Affero General Public License along
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import formatMessage from '../../../../format-message';
 
+import formatMessage from '../../../../format-message';
 const shouldMergeAnchors = (elem1, elem2) => {
   if (!elem1 || !elem2 || elem1.tagName !== 'A' || elem2.tagName !== 'A') {
     return false;
   }
-
   return elem1.getAttribute('href') === elem2.getAttribute('href');
 };
-
 const notWhitespace = node => {
   return node.nodeType !== Node.TEXT_NODE || node.textContent.match(/\S/);
 };
-
 const onlyChild = parent => {
   const child = parent.firstElementChild;
-
   if (!child) {
     return null;
   }
-
   if ([...parent.childNodes].filter(notWhitespace).length > 1) {
     return null;
   }
-
   return child;
 };
-
 const solitaryDescendantImage = link => {
   let parent = link;
   let child = onlyChild(parent);
-
   while (child) {
     if (child.tagName === 'IMG') {
       return child;
     }
-
     parent = child;
     child = onlyChild(parent);
   }
-
   return null;
 };
-
 const normalizeText = text => {
   // normalize whitespace and trim leading and trailing whitespace
   return text.replace(/\s+/g, ' ').trim();
 };
-
 const descendantImageWithRedundantAltText = (left, right) => {
   const leftImage = solitaryDescendantImage(left);
   const rightImage = solitaryDescendantImage(right);
-
   if (leftImage && !rightImage && normalizeText(leftImage.getAttribute('alt')) === normalizeText(right.textContent)) {
     return leftImage;
   } else if (rightImage && !leftImage && normalizeText(rightImage.getAttribute('alt')) === normalizeText(left.textContent)) {
@@ -76,18 +63,14 @@ const descendantImageWithRedundantAltText = (left, right) => {
     return null;
   }
 };
-
 export default {
   id: 'adjacent-links',
-
   test(elem) {
     if (elem.tagName != 'A') {
       return true;
     }
-
     return !shouldMergeAnchors(elem, elem.nextElementSibling);
   },
-
   data: _elem => {
     return {
       combine: false
@@ -98,30 +81,24 @@ export default {
     checkbox: true,
     dataKey: 'combine'
   }],
-
   update(elem, data) {
     const rootElem = elem.parentNode;
-
     if (data.combine) {
-      const next = elem.nextElementSibling; // https://www.w3.org/TR/WCAG20-TECHS/H2.html
+      const next = elem.nextElementSibling;
 
+      // https://www.w3.org/TR/WCAG20-TECHS/H2.html
       const image = descendantImageWithRedundantAltText(elem, next);
-
       if (image) {
         image.setAttribute('alt', '');
       }
-
       rootElem.removeChild(next);
       elem.innerHTML += ` ${next.innerHTML}`;
     }
-
     return elem;
   },
-
   rootNode(elem) {
     return elem.parentNode;
   },
-
   message: () => formatMessage('Adjacent links with the same URL should be a single link.'),
   why: () => formatMessage('Keyboards navigate to links using the Tab key. Two adjacent links that direct to the same destination can be confusing to keyboard users.'),
   link: 'https://www.w3.org/TR/WCAG20-TECHS/H2.html',