@instructure/canvas-rce 5.11.1 → 5.12.2

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

@@ -1,32 +0,0 @@
-/*
- * Copyright (C) 2018 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * 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 = {
-    width: '10px',
-    height: '10px',
-    border: '1px solid rgba(0, 0, 0, 0.6)',
-    borderRadius: '6px',
-    transform: 'translate(-6px, -1px)',
-    backgroundColor: 'rgb(248, 248, 248)',
-    boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)'
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    style: styles
-  });
-}

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

@@ -1,54 +0,0 @@
-/*
- * Copyright (C) 2018 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * 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 => {
-        if (!result) {
-          errors.push({
-            node: child,
-            rule
-          });
-        }
-      });
-    }
-  };
-
-  const checkDone = () => {
-    if (typeof done === 'function') {
-      done(errors);
-    }
-  };
-
-  dom.walk(node, childNodeCheck, checkDone);
-}

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

@@ -1,90 +0,0 @@
-/*
- * Copyright (C) 2018 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * 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';
-import formatMessage from '../../../format-message';
-import checkNode from './node-checker';
-let isCheckerOpen = false;
-let instance;
-const pendingInstanceCallbacks = [];
-const container = document.createElement('div');
-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,
-        onFixError
-      } = _ref;
-
-      if (!isCheckerOpen) {
-        ReactDOM.render( /*#__PURE__*/React.createElement(Checker, {
-          getBody: ed.getBody.bind(ed),
-          editor: ed,
-          additionalRules: additionalRules,
-          mountNode: mountNode,
-          onClose: () => isCheckerOpen = false,
-          onFixError: onFixError
-        }), container, function () {
-          // this is a workaround for react 16 since ReactDOM.render is not
-          // guaranteed to return the instance synchronously (especially if called
-          // within another component's lifecycle method eg: componentDidMount). see:
-          // https://github.com/facebook/react/issues/10309#issuecomment-318434635
-          instance = this;
-          if (config) getInstance(instance => instance.setConfig(config));
-          pendingInstanceCallbacks.forEach(cb => cb(instance));
-          instance.check(done);
-        });
-        isCheckerOpen = true;
-      }
-    });
-    ed.addCommand('checkAccessibility', function (ui, _ref2) {
-      let {
-        done,
-        config,
-        additionalRules
-      } = _ref2;
-      checkNode(ed.getBody(), done, config, additionalRules);
-    });
-    ed.ui.registry.addButton('check_a11y', {
-      title: formatMessage('Check Accessibility'),
-      onAction: _ => ed.execCommand('openAccessibilityChecker'),
-      icon: 'a11y'
-    });
-  }
-
-}); // 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) {
-  const options = formatMessage.setup();
-  options.locale = locale;
-  formatMessage.setup(options);
-}

package/lib/rce/plugins/tinymce-a11y-checker/rules/__mocks__/index.js

@@ -1,53 +0,0 @@
-/*
- * Copyright (C) 2023 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * 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/>.
- */
-export default [{
-  test: jest.fn().mockReturnValue(false),
-  data: jest.fn().mockReturnValue({
-    select: 'a',
-    checkbox: true,
-    color: 'rgba(40, 100, 200, 0.6)',
-    text: 'Text'
-  }),
-  form: jest.fn().mockReturnValue([{
-    label: 'Select Field',
-    dataKey: 'select',
-    options: [['a', 'A'], ['b', 'B']]
-  }, {
-    label: 'Select Field',
-    dataKey: 'checkbox',
-    checkbox: true
-  }, {
-    label: 'Select Field',
-    dataKey: 'color',
-    color: true
-  }, {
-    label: 'Text Field',
-    dataKey: 'text',
-    disabledIf: () => true
-  }, {
-    label: 'Text Area',
-    dataKey: 'textarea',
-    textarea: true
-  }]),
-  rootNode: jest.fn(),
-  update: jest.fn(),
-  message: jest.fn().mockReturnValue('Error Message'),
-  why: jest.fn().mockReturnValue('Why Text'),
-  link: 'http://some-url',
-  linkText: jest.fn().mockReturnValue('Link for learning more')
-}];

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

@@ -1,129 +0,0 @@
-/*
- * Copyright (C) 2018 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * 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';
-
-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)) {
-    return rightImage;
-  } else {
-    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
-    };
-  },
-  form: () => [{
-    label: formatMessage('Merge links'),
-    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 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',
-  linkText: () => formatMessage('Learn more about adjacent links')
-};

package/lib/rce/plugins/tinymce-a11y-checker/rules/headings-sequence.js

@@ -1,200 +0,0 @@
-/*
- * Copyright (C) 2018 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * 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 { changeTag } from '../utils/dom';
-/* Headings Sequence rule
- * this rule is ensuring that heading tags (H1-H6) are layed out in sequential
- * order for organizing your site.
- *
- * this rule only looks at H2-H6 headings. all other tags pass.
- * this rule will walk 'up-down' the dom to find the heading tag that is
- * laid out previous to the heading tag being checked.
- * this rule will see if the heading tag number of the previous heading is
- * one more than one less than it's own heading tag and will fail if so
- * this rule will check to see if there is no previous heading tag and will
- * fail the test if so
- */
-
-const isHtag = elem => {
-  const allHTags = {
-    H1: true,
-    H2: true,
-    H3: true,
-    H4: true,
-    H5: true,
-    H6: true
-  };
-  return elem && allHTags[elem.tagName] === true;
-}; // gets the H tag that is furthest down in the tree from elem(inclusive)
-
-
-const getHighestOrderHForElem = elem => {
-  const allHForElem = Array.prototype.slice.call(elem.querySelectorAll('H1,H2,H3,H4,H5,H6'));
-
-  if (allHForElem.length > 0) {
-    return allHForElem.reverse()[0];
-  }
-
-  if (isHtag(elem)) {
-    return elem;
-  }
-
-  return undefined;
-}; // gets all siblings of elem that come before the elem ordered by nearest to
-// elem
-
-
-const getPrevSiblings = elem => {
-  const ret = [];
-
-  if (!elem || !elem.parentElement || !elem.parentElement.children) {
-    return ret;
-  }
-
-  const sibs = elem.parentElement.children;
-
-  for (let i = 0; i < sibs.length; i++) {
-    if (sibs[i] === elem) {
-      break;
-    }
-
-    ret.unshift(sibs[i]);
-  }
-
-  return ret;
-};
-
-const searchPrevSiblings = elem => {
-  const sibs = getPrevSiblings(elem);
-  let ret;
-
-  for (let i = 0; i < sibs.length; i++) {
-    ret = getHighestOrderHForElem(sibs[i]);
-
-    if (ret) {
-      break;
-    }
-  }
-
-  return ret;
-};
-
-const _walkUpTree = elem => {
-  let ret;
-
-  if (!elem || elem.tagName === 'BODY') {
-    return undefined;
-  }
-
-  if (isHtag(elem)) {
-    return elem;
-  }
-
-  ret = searchPrevSiblings(elem);
-
-  if (!ret) {
-    ret = _walkUpTree(elem.parentElement);
-  }
-
-  return ret;
-};
-
-const walkUpTree = elem => {
-  let ret = searchPrevSiblings(elem);
-
-  if (!ret) {
-    ret = _walkUpTree(elem.parentElement);
-  }
-
-  return ret;
-};
-
-const getPriorHeading = elem => {
-  return walkUpTree(elem);
-}; // a valid prior H tag is greater or equal to one less than current
-
-
-const getValidHeadings = elem => {
-  const hNum = +elem.tagName.substring(1);
-  const ret = {};
-
-  for (let i = hNum - 1; i <= 6; i++) {
-    ret[`H${i}`] = true;
-  }
-
-  return ret;
-};
-
-export default {
-  id: 'headings-sequence',
-  test: elem => {
-    const testTags = {
-      H2: true,
-      H3: true,
-      H4: true,
-      H5: true,
-      H6: true
-    };
-
-    if (testTags[elem.tagName] !== true) {
-      return true;
-    }
-
-    const validHeadings = getValidHeadings(elem);
-    const priorHeading = getPriorHeading(elem);
-
-    if (priorHeading) {
-      return validHeadings[priorHeading.tagName];
-    }
-
-    return true;
-  },
-  data: _elem => {
-    return {
-      action: 'nothing'
-    };
-  },
-  form: () => [{
-    label: formatMessage('Action to take:'),
-    dataKey: 'action',
-    options: [['nothing', formatMessage('Leave as is')], ['elem', formatMessage('Fix heading hierarchy')], ['modify', formatMessage('Remove heading style')]]
-  }],
-  update: (elem, data) => {
-    if (!data || !data.action || data.action === 'nothing') {
-      return elem;
-    }
-
-    switch (data.action) {
-      case 'elem':
-        {
-          const priorH = getPriorHeading(elem);
-          const hIdx = priorH ? +priorH.tagName.substring(1) : 0;
-          return changeTag(elem, `H${hIdx + 1}`);
-        }
-
-      case 'modify':
-        {
-          return changeTag(elem, 'p');
-        }
-    }
-  },
-  message: () => formatMessage('Heading levels should not be skipped.'),
-  why: () => formatMessage('Sighted users browse web pages quickly, looking for large or bolded headings. Screen reader users rely on headers for contextual understanding. Headers should use the proper structure.'),
-  link: 'https://www.w3.org/TR/WCAG20-TECHS/G141.html',
-  linkText: () => formatMessage('Learn more about organizing page headings')
-};

package/lib/rce/plugins/tinymce-a11y-checker/rules/headings-start-at-h2.js

@@ -1,67 +0,0 @@
-/*
- * Copyright (C) 2018 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * 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 { changeTag } from '../utils/dom';
-import formatMessage from '../../../../format-message';
-export default {
-  id: 'headings-start-at-h2',
-  test: function (elem) {
-    let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-    if (config.disableHeadingsStartAtH2) {
-      return true;
-    }
-
-    return elem.tagName !== 'H1';
-  },
-  data: _elem => {
-    return {
-      action: 'nothing'
-    };
-  },
-  form: () => [{
-    label: formatMessage('Action to take:'),
-    dataKey: 'action',
-    options: [['nothing', formatMessage('Leave as is')], ['elem-only', formatMessage("Change only this heading's level")], ['modify', formatMessage('Remove heading style')]]
-  }, {
-    label: formatMessage('Additional considerations'),
-    alert: true,
-    dataKey: 'alert',
-    variant: 'warning',
-    message: formatMessage('You may need to adjust additional headings to maintain page hierarchy.')
-  }],
-  update: (elem, data) => {
-    if (!data || !data.action) {
-      return elem;
-    }
-
-    switch (data.action) {
-      case 'nothing':
-        return elem;
-
-      case 'elem-only':
-        return changeTag(elem, 'h2');
-
-      case 'modify':
-        return changeTag(elem, 'p');
-    }
-  },
-  message: () => formatMessage('The first heading on a page should be an H2.'),
-  why: () => formatMessage("Webpages should only have a single H1, which is automatically used by the page's Title. The first heading in your content should be an H2."),
-  link: 'https://www.w3.org/TR/WCAG20-TECHS/H42.html',
-  linkText: () => formatMessage('Learn more about proper page heading structure')
-};

package/lib/rce/plugins/tinymce-a11y-checker/rules/img-alt-filename.js

@@ -1,63 +0,0 @@
-/*
- * Copyright (C) 2018 - present Instructure, Inc.
- *
- * This file is part of Canvas.
- *
- * Canvas is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3 of the License.
- *
- * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
- * details.
- *
- * 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';
-const FILENAMELIKE = /[^\s]+(.*?).(jpg|jpeg|png|gif|svg|bmp|webp)$/i;
-export default {
-  id: 'img-alt-filename',
-  test: elem => {
-    if (elem.tagName !== 'IMG') {
-      return true;
-    }
-
-    const alt = elem.hasAttribute('alt') ? elem.getAttribute('alt') : null;
-    const isDecorative = alt !== null && alt.replace(/\s/g, '') === '';
-    return !FILENAMELIKE.test(alt) || isDecorative;
-  },
-  data: elem => {
-    const alt = elem.hasAttribute('alt') ? elem.getAttribute('alt') : null;
-    const decorative = alt !== null && alt.replace(/\s/g, '') === '';
-    return {
-      alt: alt || '',
-      decorative
-    };
-  },
-  form: () => [{
-    label: formatMessage('Change alt text'),
-    dataKey: 'alt',
-    disabledIf: data => data.decorative
-  }, {
-    label: formatMessage('Decorative image'),
-    dataKey: 'decorative',
-    checkbox: true
-  }],
-  update: (elem, data) => {
-    if (data.decorative) {
-      elem.setAttribute('alt', '');
-      elem.setAttribute('role', 'presentation');
-    } else {
-      elem.setAttribute('alt', data.alt);
-      elem.removeAttribute('role');
-    }
-
-    return elem;
-  },
-  message: () => formatMessage('Image filenames should not be used as the alt attribute describing the image content.'),
-  why: () => formatMessage('Screen readers cannot determine what is displayed in an image without alternative text, and filenames are often meaningless strings of numbers and letters that do not describe the context or meaning.'),
-  link: 'https://www.w3.org/TR/WCAG20-TECHS/F30.html',
-  linkText: () => formatMessage('Learn more about using filenames as alt text')
-};