upgrade a11y checker, fix placeholders / contrast

set new config option to ignore contrast checks if the the user does
not have high contrast enabled. this is a temporary fix to prevent
the checker from failing some default canvas styles that would pass
with high contrast enabled.

closes CORE-364, closes CORE-354, closes CORE-341, closes CORE-218,
closes CORE-217

test plan:
- the first heading should not have a heading sequence error
- default link styles should not fail contrast checks
- links that only contain a link should not have contrast issues
  - must test with high contrast flag for now
- test haveing an h2 then an h4 with more than 125 characters
  - run the checker, and correct the heading order on the first
    issue
  - you should still be able to convert the long heading to a
    paragraph on the second issue

Change-Id: Iaec77c7fb1bdcc8d512eb35e20ce8c45ecc0b99f
Reviewed-on: https://gerrit.instructure.com/130650
Tested-by: Jenkins
Reviewed-by: Clay Diffrient <[email protected]>
QA-Review: Tucker McKnight <[email protected]>
QA-Review: Jeremy Putnam <[email protected]>
Product-Review: Brent Burgoyne <[email protected]>

app/jsx/shared/rce/RichContentEditor.js

@@ -45,7 +45,7 @@ function loadLegacyTinyMCE (callback) {
     legacyTinyMCELoaded = true
     require('tinymce.editor_box')
     require('compiled/tinymce')
-    require('tinymce-a11y-checker')
+    require('./initA11yChecker')
     callback()
   }, 'legacyTinymceAsyncChunk')
 }

app/jsx/shared/rce/initA11yChecker.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (C) 2017 - 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 { getInstance } from 'tinymce-a11y-checker'
+
+// disable contrast checking unless in high contrast mode
+// this is only temporary, until the checker supports forcing high contrast
+// styles durring the check.
+if (ENV.use_high_contrast !== true) {
+  getInstance(c => c.setConfig({ disableContrastCheck: true }))
+}

app/jsx/shared/rce/serviceRCELoader.js

@@ -89,7 +89,7 @@ function getSidebarSource(source_name) {
       require.ensure([], (require) => {
         const first = !this.RCE
         this.RCE = require('canvas-rce/lib/async')
-        require('tinymce-a11y-checker')
+        require('./initA11yChecker')
         if (first) {
           this.loadEventListeners()
           this.loadingFlag = false

package.json

@@ -60,7 +60,7 @@
     "timezone": "1.0.6",
     "tinycolor2": "1.4.1",
     "tinymce": "4.5.7",
-    "tinymce-a11y-checker": "1.0.2",
+    "tinymce-a11y-checker": "1.0.5",
     "tinymce-light-skin": "1.3.1"
   },
   "devDependencies": {

public/javascripts/tinymce_plugins/instructure_links/links.js

@@ -356,6 +356,7 @@ import YouTubeApi from './youtube_api'
       $link.addClass('iframe_placeholder');
       $link.attr('rel', $frame.attr('src'));
       $link.attr('style', $frame.attr('style') || $parent.attr('style'));
+      $link[0].setAttribute("data-ignore-a11y-check", "")
       $link.css('display', 'block');
       $link.attr('_iframe_style', $frame.attr('style') || $parent.attr('style'));
       var width = ($frame.attr('width') || $frame.css('width'));

yarn.lock

@@ -4443,25 +4443,7 @@ [email protected], [email protected], instructure-icons@^4.1.0, "instr
     shortid "^2.2.8"
     svg-to-jsx "^0.0.20"
 
-[email protected]:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/instructure-ui/-/instructure-ui-2.3.0.tgz#bb08d3cb1b8d77b374b649f95ff652cba8a7e9d5"
-  dependencies:
-    classnames "2.2.5"
-    decimal.js "7.2.1"
-    deep-equal "1.0.1"
-    glamor "2.20.24"
-    invariant "2.2.2"
-    keycode "2.1.8"
-    moment-timezone "0.5.13"
-    numeral "2.0.6"
-    object.omit "2.0.1"
-    object.pick "1.2.0"
-    prop-types "15.5.8"
-    shortid "2.2.8"
-    tinycolor2 "1.4.1"
-
-[email protected], [email protected], "instructure-ui@^2.1.0 || 3":
+[email protected], "[email protected] - 3.4.0", [email protected], "instructure-ui@^2.1.0 || 3":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/instructure-ui/-/instructure-ui-3.3.1.tgz#28351c0e6c5f8499ad51575f3a6ae5676a70dd04"
   dependencies:
@@ -8411,9 +8393,9 @@ [email protected], tinycolor2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
 
-[email protected].2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/tinymce-a11y-checker/-/tinymce-a11y-checker-1.0.2.tgz#4ea3c6e2aa0bbb0f3d244e38515fd84cc6358a9a"
+[email protected].5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tinymce-a11y-checker/-/tinymce-a11y-checker-1.0.5.tgz#ff75c42e32b41101e28417c1d9b1c7433fba1d63"
   dependencies:
     instructure-icons "4.x"
     instructure-ui "3.x"