update to work with instucture-ui 3

closes CNVS-39843 test plan: - no visible change in demo - should work in canvas Change-Id: Id172c0185d149911d56f2e8c6dc37770b05eee86 Reviewed-on: https://gerrit.instructure.com/128934 Tested-by: Jenkins Reviewed-by: brian kirkby <bkirkby@instructure.com> Product-Review: brian kirkby <bkirkby@instructure.com> QA-Review: Brent Burgoyne <bburgoyne@instructure.com>
AgileVentures · Mar 10, 2023 · d7ae063 · d7ae063
1 parent 95c3e63
commit d7ae063
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 72 deletions.
diff --git a/packages/canvas-rce/src/tinymce-a11y-checker/package-lock.json b/packages/canvas-rce/src/tinymce-a11y-checker/package-lock.json
diff --git a/packages/canvas-rce/src/tinymce-a11y-checker/package.json b/packages/canvas-rce/src/tinymce-a11y-checker/package.json
@@ -23,7 +23,7 @@
     "babel-loader": "^7.1.1",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "babel-polyfill": "^6.23.0",
-    "canvas-rce": "^2.2.1",
+    "canvas-rce": "^2.5.4",
     "enzyme": "^3.0.0",
     "enzyme-adapter-react-15": "^1.0.0",
     "enzyme-to-json": "^3.0.1",
@@ -40,8 +40,8 @@
     "webpack-dev-server": "^2.6.1"
   },
   "dependencies": {
-    "instructure-icons": "3 || 4",
-    "instructure-ui": "^2.1.0 || 3",
+    "instructure-icons": "4.x",
+    "instructure-ui": "3.x",
     "react": "^0.14.8 || ^15.0.0",
     "react-aria-live": "^1.0.4",
     "react-color": "^2.13.4",

diff --git a/...anvas-rce/src/tinymce-a11y-checker/src/components/__tests__/__snapshots__/checker.js.snap b/...anvas-rce/src/tinymce-a11y-checker/src/components/__tests__/__snapshots__/checker.js.snap
@@ -3,18 +3,33 @@
 exports[`render matches snapshot with errors 1`] = `
 <LiveAnnouncer>
   <Tray
+    applicationElement={[Function]}
     border={false}
     closeButtonLabel="Close Accessibility Checker"
     closeButtonRef={[Function]}
     closeButtonVariant="icon"
     contentRef={[Function]}
+    defaultFocusElement={null}
+    insertAt="bottom"
     isDismissable={true}
-    isOpen={true}
     label="Accessibility Checker"
-    onRequestClose={[Function]}
+    mountNode={null}
+    onClose={[Function]}
+    onDismiss={[Function]}
+    onEnter={[Function]}
+    onEntered={[Function]}
+    onEntering={[Function]}
+    onExit={[Function]}
+    onExited={[Function]}
+    onExiting={[Function]}
+    onOpen={[Function]}
+    open={true}
     placement="end"
     shadow={true}
-    trapFocus={true}
+    shouldCloseOnDocumentClick={false}
+    shouldContainFocus={true}
+    shouldReturnFocus={true}
+    size="small"
   >
     <Container
       as="div"
@@ -130,14 +145,10 @@ exports[`render matches snapshot with errors 1`] = `
             </Grid>
           </Container>
           <Alert
-            closeButtonLabel=""
-            dismissable={false}
-            isOpen={true}
-            liveRegion={null}
             margin="x-small 0"
-            onClose={null}
+            open={true}
             timeout={0}
-            transitionType="fade"
+            transition="fade"
             variant="warning"
           >
             Error Message
@@ -257,6 +268,7 @@ exports[`render matches snapshot with errors 1`] = `
               href="http://some-url"
               linkRef={[Function]}
               target="_blank"
+              variant="default"
             >
               Learn more
             </Link>
@@ -271,18 +283,33 @@ exports[`render matches snapshot with errors 1`] = `
 exports[`render matches snapshot without errors 1`] = `
 <LiveAnnouncer>
   <Tray
+    applicationElement={[Function]}
     border={false}
     closeButtonLabel="Close Accessibility Checker"
     closeButtonRef={[Function]}
     closeButtonVariant="icon"
     contentRef={[Function]}
+    defaultFocusElement={null}
+    insertAt="bottom"
     isDismissable={true}
-    isOpen={false}
     label="Accessibility Checker"
-    onRequestClose={[Function]}
+    mountNode={null}
+    onClose={[Function]}
+    onDismiss={[Function]}
+    onEnter={[Function]}
+    onEntered={[Function]}
+    onEntering={[Function]}
+    onExit={[Function]}
+    onExited={[Function]}
+    onExiting={[Function]}
+    onOpen={[Function]}
+    open={false}
     placement="end"
     shadow={true}
-    trapFocus={true}
+    shouldCloseOnDocumentClick={false}
+    shouldContainFocus={true}
+    shouldReturnFocus={true}
+    size="small"
   >
     <Container
       as="div"
@@ -313,14 +340,10 @@ exports[`render matches snapshot without errors 1`] = `
          Accessibility Checker
       </Heading>
       <Alert
-        closeButtonLabel=""
-        dismissable={false}
-        isOpen={true}
-        liveRegion={null}
         margin="x-small 0"
-        onClose={null}
+        open={true}
         timeout={0}
-        transitionType="fade"
+        transition="fade"
         variant="success"
       >
         No accessibility issues were detected.

diff --git a/packages/canvas-rce/src/tinymce-a11y-checker/src/components/checker.js b/packages/canvas-rce/src/tinymce-a11y-checker/src/components/checker.js
@@ -271,6 +271,16 @@ export default class Checker extends React.Component {
     this.setState({ open: false })
   }
 
+  applicationElements() {
+    const _filter = Array.prototype.filter
+    return _filter.call(
+      document.body.childNodes,
+      node =>
+        node.nodeType == 1 &&
+        node.className !== "tinymce-a11y-checker-container"
+    )
+  }
+
   render() {
     const rule = this.errorRule()
     const issueNumberMessage = formatMessage("Issue { num } of { total }", {
@@ -283,11 +293,12 @@ export default class Checker extends React.Component {
         <Tray
           label={formatMessage("Accessibility Checker")}
           isDismissable
-          trapFocus
-          isOpen={this.state.open}
-          onRequestClose={this.handleClose}
+          shouldContainFocus
+          open={this.state.open}
+          onDismiss={this.handleClose}
           placement="end"
           closeButtonLabel={formatMessage("Close Accessibility Checker")}
+          applicationElement={this.applicationElements}
         >
           <Container as="div" style={{ width: "20rem" }} padding="medium">
             <Heading level="h3" as="h2" margin="medium 0" color="brand">

diff --git a/packages/canvas-rce/src/tinymce-a11y-checker/src/plugin.js b/packages/canvas-rce/src/tinymce-a11y-checker/src/plugin.js
@@ -6,6 +6,7 @@ import formatMessage from "format-message"
 tinymce.create("tinymce.plugins.AccessibilityChecker", {
   init: function(ed) {
     const container = document.createElement("div")
+    container.className = "tinymce-a11y-checker-container"
     document.body.appendChild(container)
     const checker = ReactDOM.render(
       <Checker getBody={ed.getBody.bind(ed)} />,