@instructure/canvas-rce 5.14.0 → 5.14.2

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

@@ -15,8 +15,10 @@
  * 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.
@@ -40,106 +42,81 @@ const isHtag = elem => {
     H6: true
   };
   return elem && allHTags[elem.tagName] === true;
-}; // gets the H tag that is furthest down in the tree from elem(inclusive)
-
+};
 
+// 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
-
+};
 
+// 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
-
+};
 
+// 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 => {
@@ -150,18 +127,14 @@ export default {
       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 => {
@@ -178,7 +151,6 @@ export default {
     if (!data || !data.action || data.action === 'nothing') {
       return elem;
     }
-
     switch (data.action) {
       case 'elem':
         {
@@ -186,7 +158,6 @@ export default {
           const hIdx = priorH ? +priorH.tagName.substring(1) : 0;
           return changeTag(elem, `H${hIdx + 1}`);
         }
-
       case 'modify':
         {
           return changeTag(elem, 'p');

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

@@ -15,17 +15,16 @@
  * 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 => {
@@ -48,14 +47,11 @@ export default {
     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');
     }

package/es/rce/plugins/tinymce-a11y-checker/rules/img-alt-filename.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 formatMessage from '../../../../format-message';
 const FILENAMELIKE = /[^\s]+(.*?).(jpg|jpeg|png|gif|svg|bmp|webp)$/i;
 export default {
@@ -23,7 +24,6 @@ export default {
     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;
@@ -53,7 +53,6 @@ export default {
       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.'),

package/es/rce/plugins/tinymce-a11y-checker/rules/img-alt-length.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 formatMessage from '../../../../format-message';
 const MAX_ALT_LENGTH = 120;
 export default {
@@ -24,7 +25,6 @@ export default {
     if (elem.tagName !== 'IMG') {
       return true;
     }
-
     const alt = elem.getAttribute('alt');
     return alt == null || alt.length <= MAX_ALT_LENGTH;
   },

package/es/rce/plugins/tinymce-a11y-checker/rules/img-alt.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 formatMessage from '../../../../format-message';
 export default {
   id: 'img-alt',
@@ -22,7 +23,6 @@ export default {
     if (elem.tagName !== 'IMG') {
       return true;
     }
-
     const alt = elem.hasAttribute('alt') ? elem.getAttribute('alt') : null;
     return alt !== null;
   },
@@ -51,7 +51,6 @@ export default {
       elem.setAttribute('alt', data.alt);
       elem.removeAttribute('role');
     }
-
     return elem;
   },
   message: () => formatMessage('Images should include an alt attribute describing the image content.'),

package/es/rce/plugins/tinymce-a11y-checker/rules/index.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 imgAlt from './img-alt';
 import imgAltFilename from './img-alt-filename';
 import tableCaption from './table-caption';

package/es/rce/plugins/tinymce-a11y-checker/rules/large-text-contrast.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 formatMessage from '../../../../format-message';
 import contrast from 'wcag-element-contrast';
 import smallTextContrast from './small-text-contrast';
@@ -25,20 +26,16 @@ export default {
     let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const disabled = config.disableContrastCheck == true;
     const noText = !hasTextNode(elem);
-
     if (disabled || noText || onlyContainsLink(elem) || !contrast.isLargeText(elem)) {
       return true;
     }
-
     for (let e = elem; e; e = e.parentElement) {
       const bgimage = window.getComputedStyle(e).getPropertyValue('background-image');
-
       if (bgimage !== 'none' && bgimage !== '') {
         // ignore background images and gradients
         return true;
       }
     }
-
     return contrast(elem);
   },
   data: smallTextContrast.data,

package/es/rce/plugins/tinymce-a11y-checker/rules/list-structure.js

@@ -15,7 +15,9 @@
  * 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';
+
 /**
  * Handles:
  * * list item
@@ -30,59 +32,46 @@ const orderedChars = ['[A-Z]', '[a-z]', '[0-9]'].map(pattern => pattern + '{1,4}
 const bulletMarkers = ['*', '-'].map(c => '\\' + c).join('|');
 const orderedMarkers = ['.', ')'].map(c => '\\' + c).join('|');
 const listLikeRegex = new RegExp(`^\\s*(?:(?:[${bulletMarkers}])|(?:(${orderedChars})[${orderedMarkers}]))\\s+`);
-
 const isTextList = elem => elem.tagName === 'P' && listLikeRegex.test(elem.textContent);
-
 const cleanListItem = elem => {
   if (elem.nodeType === Node.TEXT_NODE) {
     elem.textContent = elem.textContent.replace(listLikeRegex, '');
     return true;
   }
-
   for (const childElement of elem.childNodes) {
     const found = cleanListItem(childElement);
     if (found) return true;
   }
-
   return false;
 };
-
 const moveContents = (from, to) => {
   while (from.firstChild) to.appendChild(from.firstChild);
 };
-
 const splitParagraphsByBreak = paragraph => {
   const appended = [];
   let child = paragraph.firstChild;
-
   while (child) {
     const currentParent = appended[appended.length - 1];
-
     if (child.tagName === 'BR') {
       appended.push(document.createElement('p'));
       child = child.nextSibling;
       continue;
     }
-
     if (currentParent) currentParent.appendChild(child);
     child = child.nextSibling;
   }
-
   const nextNode = paragraph.nextSibling;
   appended.forEach(newParagraph => {
     paragraph.parentNode.insertBefore(newParagraph, nextNode);
   });
 };
-
 export default {
   id: 'list-structure',
-
   test(elem) {
     const isList = isTextList(elem);
     const isFirst = elem.previousElementSibling ? !isTextList(elem.previousElementSibling) : true;
     return !(isList && isFirst);
   },
-
   data: elem => {
     const match = elem.textContent.match(listLikeRegex);
     return {
@@ -95,21 +84,16 @@ export default {
     checkbox: true,
     dataKey: 'formatAsList'
   }],
-
   update(elem, data) {
     const rootElem = elem.parentNode;
-
     if (data.formatAsList) {
       const isOrdered = Boolean(data.orderedStart);
       const listContainer = document.createElement(isOrdered ? 'ol' : 'ul');
-
       if (isOrdered) {
         listContainer.setAttribute('type', data.orderedStart);
         listContainer.setAttribute('start', data.orderedStart);
       }
-
       let cursor = elem;
-
       while (cursor) {
         if (!isTextList(cursor)) break;
         const nextIsOrdered = Boolean(cursor.textContent.match(listLikeRegex)[1]);
@@ -118,25 +102,22 @@ export default {
         const li = document.createElement('li');
         listContainer.appendChild(li);
         moveContents(cursor, li);
-        const nextSibling = cursor.nextElementSibling; // Remove the now empty siblings
-        // Skip elem because elem is replaced later.
+        const nextSibling = cursor.nextElementSibling;
 
+        // Remove the now empty siblings
+        // Skip elem because elem is replaced later.
         if (cursor !== elem) cursor.parentNode.removeChild(cursor);
         cursor = nextSibling;
         cleanListItem(li);
       }
-
       rootElem.replaceChild(listContainer, elem);
       return listContainer;
     }
-
     return elem;
   },
-
   rootNode(elem) {
     return elem.parentNode;
   },
-
   message: () => formatMessage('Lists should be formatted as lists.'),
   why: () => formatMessage('When markup is used that visually formats items as a list but does not indicate the list relationship, users may have difficulty in navigating the information.'),
   link: 'https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/H48',

package/es/rce/plugins/tinymce-a11y-checker/rules/paragraphs-for-headings.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 formatMessage from '../../../../format-message';
 import { changeTag } from '../utils/dom';
 const MAX_HEADING_LENGTH = 120;
@@ -33,7 +34,6 @@ export default {
     if (!IS_HEADING[elem.tagName]) {
       return true;
     }
-
     return elem.textContent.length <= MAX_HEADING_LENGTH;
   },
   data: _elem => {
@@ -48,11 +48,9 @@ export default {
   }],
   update: (elem, data) => {
     let ret = elem;
-
     if (data.change) {
       ret = changeTag(elem, 'p');
     }
-
     return ret;
   },
   message: () => formatMessage('Headings should not contain more than 120 characters.'),

package/es/rce/plugins/tinymce-a11y-checker/rules/small-text-contrast.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 formatMessage from '../../../../format-message';
 import contrast from 'wcag-element-contrast';
 import { onlyContainsLink, createStyleString, splitStyleAttribute, hasTextNode } from '../utils/dom';
@@ -27,20 +28,16 @@ export default {
     let config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     const disabled = config.disableContrastCheck == true;
     const noText = !hasTextNode(elem);
-
     if (disabled || noText || onlyContainsLink(elem) || contrast.isLargeText(elem)) {
       return true;
     }
-
     for (let e = elem; e; e = e.parentElement) {
       const bgimage = window.getComputedStyle(e).getPropertyValue('background-image');
-
       if (bgimage !== 'none' && bgimage !== '') {
         // ignore background images and gradients
         return true;
       }
     }
-
     return contrast(elem);
   },
   data: elem => {
@@ -58,13 +55,11 @@ export default {
   update: (elem, data) => {
     elem.style.color = data.color;
     const styles = splitStyleAttribute(elem.getAttribute('data-mce-style') || '');
-
     if (data && data.color && data.color.indexOf('#') < 0) {
       styles.color = `#${rgbHex(data.color)}`;
     } else {
       styles.color = data.color;
     }
-
     elem.setAttribute('data-mce-style', createStyleString(styles));
     return elem;
   },

package/es/rce/plugins/tinymce-a11y-checker/rules/table-caption.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 formatMessage from '../../../../format-message';
 import { prepend } from '../utils/dom';
 export default {
@@ -23,7 +24,6 @@ export default {
     if (elem.tagName !== 'TABLE') {
       return true;
     }
-
     const caption = elem.querySelector('caption');
     return !!caption && caption.textContent.replace(/\s/g, '') !== '';
   },
@@ -38,12 +38,10 @@ export default {
   }],
   update: (elem, data) => {
     let caption = elem.querySelector('caption');
-
     if (!caption) {
       caption = elem.ownerDocument.createElement('caption');
       prepend(elem, caption);
     }
-
     caption.textContent = data.caption;
     return elem;
   },

package/es/rce/plugins/tinymce-a11y-checker/rules/table-header-scope.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 formatMessage from '../../../../format-message';
 const VALID_SCOPES = ['row', 'col', 'rowgroup', 'colgroup'];
 export default {
@@ -23,7 +24,6 @@ export default {
     if (elem.tagName !== 'TH') {
       return true;
     }
-
     return VALID_SCOPES.indexOf(elem.getAttribute('scope')) !== -1;
   },
   data: elem => {
@@ -42,7 +42,6 @@ export default {
     } else {
       elem.setAttribute('scope', data.scope);
     }
-
     return elem;
   },
   message: () => formatMessage('Tables headers should specify scope.'),

package/es/rce/plugins/tinymce-a11y-checker/rules/table-header.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 formatMessage from '../../../../format-message';
 import { changeTag } from '../utils/dom';
 const _forEach = Array.prototype.forEach;
@@ -24,7 +25,6 @@ export default {
     if (elem.tagName !== 'TABLE') {
       return true;
     }
-
     return elem.querySelector('th');
   },
   data: _elem => {
@@ -41,37 +41,29 @@ export default {
     _forEach.call(elem.querySelectorAll('th'), th => {
       changeTag(th, 'td');
     });
-
     if (data.header === 'none') {
       return elem;
     }
-
     const row = data.header === 'row' || data.header === 'both';
     const col = data.header === 'col' || data.header === 'both';
     const tableRows = elem.querySelectorAll('tr');
-
     for (let i = 0; i < tableRows.length; ++i) {
       if (i === 0 && row) {
         _forEach.call(tableRows[i].querySelectorAll('td'), td => {
           const th = changeTag(td, 'th');
           th.setAttribute('scope', 'col');
         });
-
         continue;
       }
-
       if (!col) {
         break;
       }
-
       const td = tableRows[i].querySelector('td');
-
       if (td) {
         const th = changeTag(td, 'th');
         th.setAttribute('scope', 'row');
       }
     }
-
     return elem;
   },
   message: () => formatMessage('Tables should include at least one header.'),

package/es/rce/plugins/tinymce-a11y-checker/utils/colors.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/>.
  */
+
 export function stringifyRGBA(rgba) {
   return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
 }

package/es/rce/plugins/tinymce-a11y-checker/utils/describe.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 formatMessage from '../../../../format-message';
 import * as strings from './strings';
 const WORD_COUNT = 4;
@@ -22,33 +23,27 @@ export default function describe(elem) {
   if (!elem || !elem.tagName) {
     return null;
   }
-
   switch (elem.tagName) {
     case 'IMG':
       return formatMessage('Image with filename {file}', {
         file: strings.filename(elem.src)
       });
-
     case 'TABLE':
       return formatMessage('Table starting with {start}', {
         start: strings.firstWords(elem.textContent, WORD_COUNT)
       });
-
     case 'A':
       return formatMessage('Link with text starting with {start}', {
         start: strings.firstWords(elem.textContent, WORD_COUNT)
       });
-
     case 'P':
       return formatMessage('Paragraph starting with {start}', {
         start: strings.firstWords(elem.textContent, WORD_COUNT)
       });
-
     case 'TH':
       return formatMessage('Table header starting with {start}', {
         start: strings.firstWords(elem.textContent, WORD_COUNT)
       });
-
     case 'H1':
     case 'H2':
     case 'H3':
@@ -57,7 +52,6 @@ export default function describe(elem) {
       return formatMessage('Heading starting with {start}', {
         start: strings.firstWords(elem.textContent, WORD_COUNT)
       });
-
     default:
       return formatMessage('Element starting with {start}', {
         start: strings.firstWords(elem.textContent, WORD_COUNT)