@instructure/canvas-rce 5.14.1 → 5.14.2

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,12 +44,11 @@ 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 { instuiPopupMountNode } 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);
@@ -64,25 +62,22 @@ export default class Checker extends React.Component {
       config: {},
       showWhyPopover: false
     };
-
     this.onFullscreenChange = _event => {
       this.selectCurrent();
     };
-
     this.updateFormState = _ref => {
       let {
         target
       } = _ref;
       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 +85,6 @@ export default class Checker extends React.Component {
       });
     };
   }
-
   componentDidMount() {
     this.props.editor.on('Remove', _editor => {
       this.setState({
@@ -100,7 +94,6 @@ export default class Checker extends React.Component {
       });
     });
   }
-
   componentDidUpdate(_prevProps, prevState) {
     if (prevState.open !== this.state.open) {
       if (this.state.open) {
@@ -110,13 +103,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 +135,8 @@ export default class Checker extends React.Component {
       }
     });
   }
-
   _check(done) {
     const node = this.props.getBody();
-
     const checkDone = errors => {
       this.setState({
         errorIndex: 0,
@@ -158,43 +147,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 +182,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 +218,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 +249,18 @@ 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;
-
     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 +270,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 +285,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 +297,6 @@ export default class Checker extends React.Component {
       this.props.onClose();
     });
   }
-
   render() {
     const rule = this.errorRule();
     const issueNumberMessage = formatMessage('Issue { num }/{ total }', {
@@ -482,10 +432,8 @@ 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, {
@@ -506,7 +454,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 +462,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 +470,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 +478,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 +493,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,19 @@
  * 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] : [];
-
   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 +40,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';
@@ -37,19 +38,16 @@ tinymce.create('tinymce.plugins.AccessibilityChecker', {
         triggerElementId,
         onFixError
       } = _ref;
-
       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();
             }
@@ -82,15 +80,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',