@instructure/canvas-rce 5.6.0-beta.0 → 5.6.1

package/es/rce/plugins/instructure_icon_maker/utils/IconMakerFormHasChanges.js

@@ -0,0 +1,83 @@
+/*
+ * Copyright (C) 2022 - 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 _ from 'lodash';
+export class IconMakerFormHasChanges {
+  constructor(initSettings, currSettings) {
+    this.initialSettings = void 0;
+    this.currentSettings = void 0;
+    this.initialSettings = initSettings;
+    this.currentSettings = currSettings;
+  }
+
+  hasNameChange() {
+    return 'name' in this.currentSettings && this.initialSettings.name !== this.currentSettings.name;
+  }
+
+  hasAltChange() {
+    return 'alt' in this.currentSettings && this.initialSettings.alt !== this.currentSettings.alt;
+  }
+
+  hasShapeNameChange() {
+    return 'shape' in this.currentSettings && this.initialSettings.shape !== this.currentSettings.shape;
+  }
+
+  hasShapeSizeChange() {
+    return 'size' in this.currentSettings && this.initialSettings.size !== this.currentSettings.size;
+  }
+
+  hasColorNameChange() {
+    return 'color' in this.currentSettings && this.initialSettings.color !== this.currentSettings.color;
+  }
+
+  hasOutlineSizeChange() {
+    return 'outlineSize' in this.currentSettings && this.initialSettings.outlineSize !== this.currentSettings.outlineSize;
+  }
+
+  hasOutlineColorChange() {
+    return 'outlineColor' in this.currentSettings && this.initialSettings.outlineColor !== this.currentSettings.outlineColor;
+  }
+
+  hasTextChange() {
+    return 'text' in this.currentSettings && this.initialSettings.text !== this.currentSettings.text;
+  }
+
+  hasTextSizeChange() {
+    return 'textSize' in this.currentSettings && this.initialSettings.textSize !== this.currentSettings.textSize;
+  }
+
+  hasTextColorChange() {
+    return 'textColor' in this.currentSettings && this.initialSettings.textColor !== this.currentSettings.textColor;
+  }
+
+  hasTextBackgroundColorChange() {
+    return 'textBackgroundColor' in this.currentSettings && this.initialSettings.textBackgroundColor !== this.currentSettings.textBackgroundColor;
+  }
+
+  hasTextPositionChange() {
+    return 'textPosition' in this.currentSettings && this.initialSettings.textPosition !== this.currentSettings.textPosition;
+  }
+
+  hasImageSettingsChange() {
+    return 'imageSettings' in this.currentSettings && !_.isEqual(this.initialSettings.imageSettings, this.currentSettings.imageSettings);
+  }
+
+  hasChanges() {
+    return this.hasNameChange() || this.hasAltChange() || this.hasShapeNameChange() || this.hasShapeSizeChange() || this.hasColorNameChange() || this.hasOutlineColorChange() || this.hasOutlineSizeChange() || this.hasTextChange() || this.hasTextSizeChange() || this.hasTextColorChange() || this.hasTextBackgroundColorChange() || this.hasTextPositionChange() || this.hasImageSettingsChange();
+  }
+
+}

package/es/rce/plugins/instructure_icon_maker/utils/round.js

@@ -0,0 +1,25 @@
+/*
+ * Copyright (C) 2022 - 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 function round(number) {
+  let decimalDigits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
+  if (decimalDigits < 0) throw new Error('decimal digits must be >= 0');
+  if (decimalDigits % 1 !== 0) throw new Error('decimal digits must be a whole number');
+  const val = Math.round(number * 10 ** decimalDigits) / 10 ** decimalDigits;
+  if (Number.isNaN(val)) throw new Error('the first arguments must be a number');
+  return val === 0 ? 0 : val; // prevent round(-0) from returning -0
+}

package/es/rce/plugins/instructure_image/ImageList/Image.js

@@ -72,7 +72,7 @@ export default function Image(_ref) {
     constrain: "cover",
     draggable: true,
     height: "6rem",
-    inline: false,
+    display: "block",
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd,
     src: image.thumbnail_url,

package/es/rce/plugins/instructure_image/ImageList/index.js

@@ -30,7 +30,7 @@ export default function ImageList(_ref) {
     height: "100%",
     margin: "xx-small",
     padding: "small",
-    wrapItems: true
+    wrap: "wrap"
   }, images.map((image, index) => {
     let focusRef = null;
 

package/es/rce/plugins/instructure_image/ImageOptionsTray/index.js

@@ -126,7 +126,7 @@ export default function ImageOptionsTray(props) {
     } finally {
       setShowUrlField(isValidURL ? isExternalUrl(url) : true);
     }
-  }, []);
+  }, [url]);
   const messagesForSize = [];
 
   if (imageSize !== CUSTOM) {
@@ -160,19 +160,19 @@ export default function ImageOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "row"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, formatMessage('Image Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placemet: "static",
-    variant: "icon",
-    onClick: onRequestClose
-  }, formatMessage('Close'))))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: onRequestClose,
+    screenReaderLabel: formatMessage('Close')
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
-    grow: true,
+    shouldGrow: true,
     margin: "none",
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     justifyItems: "space-between",
     direction: "column",

package/es/rce/plugins/instructure_image/Images/index.js

@@ -68,7 +68,7 @@ export default function Images(props) {
     onImageClick: props.onImageEmbed
   })), loader.isLoading && /*#__PURE__*/React.createElement(Flex.Item, {
     as: "div",
-    grow: true
+    shouldGrow: true
   }, /*#__PURE__*/React.createElement(LoadingIndicator, {
     loader: loader
   })), !loader.isLoading && loader.hasMore && /*#__PURE__*/React.createElement(Flex.Item, {

package/es/rce/plugins/instructure_links/components/CollectionPanel.js

@@ -50,7 +50,9 @@ export default function CollectionPanel(props) {
     onLinkClick: props.onLinkClick,
     suppressRenderEmpty: props.suppressRenderEmpty,
     contextType: props.contextType,
-    searchString: props.searchString
+    searchString: props.searchString,
+    editing: props.editing,
+    onEditClick: props.onEditClick
   })));
 }
 CollectionPanel.propTypes = {
@@ -68,9 +70,12 @@ CollectionPanel.propTypes = {
   newPageLinkExpanded: bool,
   toggleNewPageForm: func,
   onChangeAccordion: func.isRequired,
-  selectedAccordionIndex: string
+  selectedAccordionIndex: string,
+  editing: bool,
+  onEditClick: func
 };
 CollectionPanel.defaultProps = {
   renderNewPageLink: false,
-  suppressRenderEmpty: false
+  suppressRenderEmpty: false,
+  editing: false
 };

package/es/rce/plugins/instructure_links/components/Link.js

@@ -1,3 +1,5 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+
 /*
  * Copyright (C) 2019 - present Instructure, Inc.
  *
@@ -16,7 +18,7 @@
  * with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 import React, { useState } from 'react';
-import { func, oneOf, string } from 'prop-types';
+import { bool, func, oneOf, string } from 'prop-types';
 import { linkShape } from './propTypes';
 import formatMessage from '../../../../format-message';
 import { renderLink as renderLinkHtml } from '../../../contentRendering';
@@ -27,47 +29,14 @@ import { Flex } from '@instructure/ui-flex';
 import { View } from '@instructure/ui-view';
 import { Text } from '@instructure/ui-text';
 import { Focusable } from '@instructure/ui-focusable';
-import { SVGIcon } from '@instructure/ui-svg-images';
-import { IconDragHandleLine, IconAssignmentLine, IconDiscussionLine, IconModuleLine, IconQuizLine, IconAnnouncementLine, IconPublishSolid, IconUnpublishedSolid, IconDocumentLine } from '@instructure/ui-icons';
-
-function IconBlank() {
-  return /*#__PURE__*/React.createElement(SVGIcon, {
-    name: "IconBlank",
-    viewBox: "0 0 1920 1920"
-  }, /*#__PURE__*/React.createElement("g", {
-    role: "presentation"
-  }));
-}
-
-function getIcon(type) {
-  switch (type) {
-    case 'assignments':
-      return IconAssignmentLine;
-
-    case 'discussions':
-      return IconDiscussionLine;
-
-    case 'modules':
-      return IconModuleLine;
-
-    case 'quizzes':
-      return IconQuizLine;
-
-    case 'announcements':
-      return IconAnnouncementLine;
-
-    case 'wikiPages':
-      return IconDocumentLine;
-
-    case 'navigation':
-      return IconBlank;
-
-    default:
-      return IconDocumentLine;
-  }
-}
-
+import { IconDragHandleLine, IconPublishSolid, IconUnpublishedSolid } from '@instructure/ui-icons';
+import RCEGlobals from '../../../RCEGlobals';
+import { getIcon } from '../../shared/linkUtils';
 export default function Link(props) {
+  var _RCEGlobals$getFeatur;
+
+  const internalLink = { ...props.link
+  };
   const [isHovering, setIsHovering] = useState(false);
   const {
     title,
@@ -75,7 +44,18 @@ export default function Link(props) {
     date,
     date_type
   } = props.link;
-  const Icon = getIcon(props.type);
+  const type = props.type === 'quizzes' && props.link.quiz_type === 'quizzes.next' ? 'quizzes.next' : props.type;
+
+  if ((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.rce_ux_improvements) {
+    var _context;
+
+    internalLink['data-course-type'] = type; // Only included published attr if it makes sense for the link type
+
+    const publishable = !_includesInstanceProperty(_context = ['navigation', 'announcements']).call(_context, type);
+    internalLink['data-published'] = publishable ? published : null;
+  }
+
+  const Icon = getIcon(type);
   const color = published ? 'success' : 'primary';
   let dateString = null;
 
@@ -83,8 +63,11 @@ export default function Link(props) {
     if (date === 'multiple') {
       dateString = formatMessage('Due: Multiple Dates');
     } else {
+      var _RCEGlobals$getConfig;
+
       // Uses user locale and timezone
-      const when = formatMessage.date(applyTimezoneOffsetToDate(date, ENV.TIMEZONE), 'long');
+      const configuredTimezone = (_RCEGlobals$getConfig = RCEGlobals.getConfig()) === null || _RCEGlobals$getConfig === void 0 ? void 0 : _RCEGlobals$getConfig.timezone;
+      const when = formatMessage.date(applyTimezoneOffsetToDate(date, configuredTimezone), 'long');
 
       switch (date_type) {
         case 'todo':
@@ -125,7 +108,14 @@ export default function Link(props) {
 
   function handleLinkClick(e) {
     e.preventDefault();
-    props.onClick(props.link);
+
+    if (props.editing) {
+      props.onEditClick({ ...internalLink,
+        type
+      });
+    } else {
+      props.onClick(internalLink);
+    }
   }
 
   function handleLinkKey(e) {
@@ -136,7 +126,7 @@ export default function Link(props) {
   }
 
   function handleDragStart(e) {
-    dragHtml(e, renderLinkHtml(props.link, props.link.title));
+    dragHtml(e, renderLinkHtml(internalLink, internalLink.title));
   }
 
   function handleDragEnd(_e) {
@@ -149,7 +139,7 @@ export default function Link(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": "instructure_links-Link",
-    draggable: true,
+    draggable: !props.editing,
     onDragStart: handleDragStart,
     onDragEnd: handleDragEnd,
     onMouseEnter: handleHover,
@@ -162,7 +152,7 @@ export default function Link(props) {
       focused
     } = _ref;
     return /*#__PURE__*/React.createElement(View, {
-      focused: focused,
+      withFocusOutline: focused,
       focusPosition: "inset",
       position: "relative",
       as: "div",
@@ -184,23 +174,24 @@ export default function Link(props) {
     }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
       margin: "0 xx-small 0 0",
       size: "1.125rem"
-    }, isHovering ? /*#__PURE__*/React.createElement(IconDragHandleLine, {
+    }, isHovering && !props.editing ? /*#__PURE__*/React.createElement(IconDragHandleLine, {
       size: "x-small",
       inline: false
     }) : null), /*#__PURE__*/React.createElement(Flex.Item, {
-      grow: true,
-      shrink: true
+      shouldGrow: true,
+      shouldShrink: true
     }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Flex.Item, {
       padding: "0 x-small 0 0"
     }, /*#__PURE__*/React.createElement(Text, {
       color: color
     }, /*#__PURE__*/React.createElement(Icon, {
       size: "x-small",
-      inline: false
+      inline: false,
+      "data-type": type
     }))), /*#__PURE__*/React.createElement(Flex.Item, {
       padding: "0 x-small 0 0",
-      grow: true,
-      shrink: true,
+      shouldGrow: true,
+      shouldShrink: true,
       textAlign: "start"
     }, /*#__PURE__*/React.createElement(View, {
       as: "div",
@@ -223,5 +214,7 @@ Link.propTypes = {
   type: oneOf(['assignments', 'discussions', 'modules', 'quizzes', 'announcements', 'wikiPages', 'navigation']).isRequired,
   onClick: func.isRequired,
   describedByID: string.isRequired,
-  elementRef: func
+  elementRef: func,
+  editing: bool,
+  onEditClick: func
 };

package/es/rce/plugins/instructure_links/components/LinkOptionsTray/index.js

@@ -155,28 +155,28 @@ export default function LinkOptionsTray(props) {
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "row"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, formatMessage('Link Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
-    placement: "static",
-    variant: "icon",
-    onClick: props.onRequestClose
-  }, formatMessage('Close'))))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: props.onRequestClose,
+    screenReaderLabel: formatMessage('Close')
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
-    grow: true,
+    shouldGrow: true,
     margin: "none",
-    shrink: true,
+    shouldShrink: true,
     onSubmit: handleSave
   }, /*#__PURE__*/React.createElement(Flex, {
     justifyItems: "space-between",
     direction: "column",
     height: "100%"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
+    shouldGrow: true,
     padding: "small",
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement("input", {
     type: "submit",
     style: {

package/es/rce/plugins/instructure_links/components/LinkSet.js

@@ -116,7 +116,9 @@ class LinkSet extends Component {
       type: this.props.type,
       onClick: this.props.onLinkClick,
       describedByID: this.describedByID,
-      elementRef: refFor(index, array)
+      elementRef: refFor(index, array),
+      editing: this.props.editing,
+      onEditClick: this.props.onEditClick
     })))));
   }
 
@@ -166,6 +168,8 @@ LinkSet.propTypes = {
   fetchInitialPage: func,
   fetchNextPage: func,
   suppressRenderEmpty: bool,
-  searchString: string
+  searchString: string,
+  editing: bool,
+  onEditClick: func
 };
 export default LinkSet;

package/es/rce/plugins/instructure_links/components/LinksPanel.js

@@ -32,21 +32,33 @@ function LinksPanel(props) {
     as: "div",
     "data-testid": "instructure_links-LinksPanel"
   }, (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "wikiPages",
     label: formatMessage('Pages')
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "assignments",
     label: formatMessage('Assignments')
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "quizzes",
     label: formatMessage('Quizzes')
   })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "announcements",
     label: formatMessage('Announcements')
   })), (isCourse || isGroup) && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "discussions",
     label: formatMessage('Discussions')
   })), isCourse && /*#__PURE__*/React.createElement(CollectionPanel, Object.assign({}, collectionProps, {
+    editing: props.editing,
+    onEditClick: props.onEditClick,
     collection: "modules",
     label: formatMessage('Modules')
   })), /*#__PURE__*/React.createElement(NavigationPanel, {
@@ -54,7 +66,9 @@ function LinksPanel(props) {
     contextId: props.contextId,
     onLinkClick: props.onLinkClick,
     onChangeAccordion: props.onChangeAccordion,
-    selectedAccordionIndex: props.selectedAccordionIndex
+    selectedAccordionIndex: props.selectedAccordionIndex,
+    editing: props.editing,
+    onEditClick: props.onEditClick
   }));
 }
 
@@ -68,9 +82,12 @@ LinksPanel.propTypes = {
   fetchInitialPage: func,
   fetchNextPage: func,
   onLinkClick: func,
-  canCreatePages: bool
+  canCreatePages: bool,
+  editing: bool,
+  onEditClick: func
 };
 LinksPanel.defaultProps = {
-  selectedAccordionIndex: ''
+  selectedAccordionIndex: '',
+  editing: false
 };
 export default LinksPanel;

package/es/rce/plugins/instructure_links/components/NavigationPanel.js

@@ -15,7 +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 { func, string } from 'prop-types';
+import { bool, func, string } from 'prop-types';
 import React from 'react';
 import LinkSet from './LinkSet';
 import formatMessage from '../../../../format-message';
@@ -124,7 +124,9 @@ export default function NavigationPanel(props) {
     type: "navigation",
     collection: collection,
     onLinkClick: props.onLinkClick,
-    contextType: props.contextType
+    contextType: props.contextType,
+    editing: props.editing,
+    onEditClick: props.onEditClick
   })));
 }
 NavigationPanel.propTypes = {
@@ -132,5 +134,7 @@ NavigationPanel.propTypes = {
   contextId: string.isRequired,
   onChangeAccordion: func.isRequired,
   selectedAccordionIndex: string,
-  onLinkClick: func
+  onLinkClick: func,
+  editing: bool,
+  onEditClick: func
 };

package/es/rce/plugins/instructure_links/plugin.js

@@ -66,10 +66,21 @@ import bridge from '../../../bridge';
 import { getAnchorElement, isOKToLink } from '../../contentInsertionUtils';
 import LinkOptionsTrayController from './components/LinkOptionsTray/LinkOptionsTrayController';
 import { CREATE_LINK, EDIT_LINK } from './components/LinkOptionsDialog/LinkOptionsDialogController';
+import RCEGlobals from '../../RCEGlobals';
 const trayController = new LinkOptionsTrayController();
 const COURSE_PLUGIN_KEY = 'course_links';
 const GROUP_PLUGIN_KEY = 'group_links';
 
+function getCommandName(selectedNode) {
+  var _RCEGlobals$getFeatur;
+
+  // show the Course Tray if it's a course link and the ux improvement flag is on,
+  // otherwise show the default Link Tray
+  const showCourseLinkTray = !!((_RCEGlobals$getFeatur = RCEGlobals.getFeatures()) !== null && _RCEGlobals$getFeatur !== void 0 && _RCEGlobals$getFeatur.rce_ux_improvements);
+  const isCourseLink = selectedNode.getAttribute('data-course-type');
+  return showCourseLinkTray && isCourseLink ? 'instructureTrayForCourseLinks' : 'instructureTrayToEditLink';
+}
+
 function selectedAnchorCount(ed) {
   return ed.selection.getRng().cloneContents().querySelectorAll('a').length;
 }
@@ -85,7 +96,7 @@ function getMenuItems(ed) {
     // cursor is on an anchor, edit or remove it
     items = [{
       text: formatMessage('Edit Link'),
-      value: 'instructureTrayToEditLink'
+      value: getCommandName(ed.selection.getNode())
     }, {
       text: formatMessage('Remove Link'),
       value: 'instructureUnlink'
@@ -134,6 +145,7 @@ function removeAnchorFromSelectedElement(ed) {
 function doMenuItem(ed, value) {
   switch (value) {
     case 'instructureTrayToEditLink':
+    case 'instructureTrayForCourseLinks':
     case 'instructureLinkCreate':
       ed.execCommand(value);
       break;
@@ -171,6 +183,10 @@ tinymce.create('tinymce.plugins.InstructureLinksPlugin', {
     });
     ed.addCommand('instructureTrayToEditLink', _ui => {
       trayController.showTrayForEditor(ed);
+    });
+    ed.addCommand('instructureTrayForCourseLinks', () => {
+      ed.selection.select(ed.selection.getNode());
+      return bridge.showTrayForPlugin('course_link_edit', ed.id);
     }); // Register shortcuts
 
     ed.addShortcut('Meta+K', '', 'instructureLinkCreate'); // Register menu item
@@ -274,8 +290,7 @@ tinymce.create('tinymce.plugins.InstructureLinksPlugin', {
 
     ed.ui.registry.addButton('instructure-link-options', {
       onAction() {
-        // show the tray
-        ed.execCommand('instructureTrayToEditLink', false, ed);
+        ed.execCommand(getCommandName(ed.selection.getNode()), false, ed);
       },
 
       text: formatMessage('Link Options'),

package/es/rce/plugins/instructure_media_embed/components/Embed.js

@@ -38,8 +38,9 @@ export function Embed(_ref) {
   }, /*#__PURE__*/React.createElement(Modal.Header, null, /*#__PURE__*/React.createElement(CloseButton, {
     onClick: onDismiss,
     offset: "medium",
-    placement: "end"
-  }, formatMessage('Close')), /*#__PURE__*/React.createElement(Heading, null, formatMessage('Embed'))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(TextArea, {
+    placement: "end",
+    screenReaderLabel: formatMessage('Close')
+  }), /*#__PURE__*/React.createElement(Heading, null, formatMessage('Embed'))), /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement(TextArea, {
     maxHeight: "10rem",
     label: formatMessage('Embed Code'),
     value: embedCode,

package/es/rce/plugins/instructure_record/AudioOptionsTray/index.js

@@ -71,27 +71,28 @@ export default function AudioOptionsTray(_ref) {
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "row"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
-    shrink: true
+    shouldGrow: true,
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Heading, {
     as: "h2"
   }, formatMessage('Audio Options'))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement(CloseButton, {
     placement: "static",
-    variant: "icon",
-    onClick: onDismiss
-  }, formatMessage('Close'))))), /*#__PURE__*/React.createElement(Flex.Item, {
+    color: "primary",
+    onClick: onDismiss,
+    screenReaderLabel: formatMessage('Close')
+  })))), /*#__PURE__*/React.createElement(Flex.Item, {
     as: "form",
-    grow: true,
+    shouldGrow: true,
     margin: "none",
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     justifyItems: "space-between",
     direction: "column",
     height: "100%"
   }, /*#__PURE__*/React.createElement(Flex.Item, {
-    grow: true,
+    shouldGrow: true,
     padding: "small",
-    shrink: true
+    shouldShrink: true
   }, /*#__PURE__*/React.createElement(Flex, {
     direction: "column"
   }, /*#__PURE__*/React.createElement(Flex.Item, {