@instructure/quiz-core 20.36.2 → 20.38.0

package/es/building/components/resources/quizEntry/QuizEntryEdit/Header/index.js

@@ -10,9 +10,9 @@ import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import partial from 'lodash/partial';
+import { Text } from '@instructure/ui-text';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { CondensedButton } from '@instructure/ui-buttons';
-import { TextInput } from '@instructure/ui-text-input';
 import { jsx, Global } from '@instructure/emotion';
 import { FillBlankInteractionType } from '@instructure/quiz-interactions';
 import { IconBankLine } from '@instructure/ui-icons';
@@ -21,9 +21,10 @@ import { convertFITBtoRich } from "../../../../../../common/util/fitbCopyHelper.
 import PositionBox from "../../../../../../common/components/resources/positionBox/PositionBox.js";
 import Item from "../../../../../../common/records/Item.js";
 import ActionButtons from "../../../ActionButtons/index.js";
-import { DELETED_QUIZ_ENTRY, API_INPUT_VALIDATION_ERROR, BUILD_TRAY_OPEN, withStyleOverrides } from '@instructure/quiz-common';
+import { DELETED_QUIZ_ENTRY, API_INPUT_VALIDATION_ERROR, BUILD_TRAY_OPEN, Flex, TextInput, withStyleOverrides } from '@instructure/quiz-common';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
+import { View } from '@instructure/ui-view';
 var _ref2 = jsx(IconBankLine, null);
 var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_QuizEntryHeader = /*#__PURE__*/function (_Component) {
   _inherits(QuizEntryHeader, _Component);
@@ -182,16 +183,19 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
   }, {
     key: "renderName",
     value: function renderName() {
-      if (this.props.quizEntry.isBank && this.props.newActiveBank) {
-        return jsx(CondensedButton, {
+      var isBank = this.props.quizEntry.isBank && this.props.newActiveBank;
+      var dataAutomation = 'sdk-quiz-entry-interaction-type';
+      if (!isBank) {
+        return jsx(Text, {
           size: "small",
-          margin: "0 0 0 x-small",
-          onClick: this.handleBankClick,
-          "data-automation": "sdk-quiz-entry-interaction-type"
+          weight: "normal",
+          "data-automation": dataAutomation
         }, this.props.name);
       }
-      return jsx("div", {
-        css: this.props.styles.interactionType,
+      return jsx(CondensedButton, {
+        size: "small",
+        margin: "0 0 0 x-small",
+        onClick: this.handleBankClick,
         "data-automation": "sdk-quiz-entry-interaction-type"
       }, this.props.name);
     }
@@ -211,20 +215,22 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
         questionNumber: displayPosition,
         interactionType: entry.getInteractionType().name
       });
-      return jsx("div", {
-        css: this.props.styles.titleHolder
-      }, jsx("span", {
-        css: this.props.styles.titleInput
-      }, jsx(TextInput, {
+      return jsx(TextInput, {
         ref: this.storeTitleRef,
-        renderLabel: jsx(ScreenReaderContent, null, titleLabelText),
+        renderLabel: jsx(Flex, {
+          direction: "column",
+          gap: "small"
+        }, jsx(Flex.Item, {
+          "aria-hidden": true
+        }, this.renderName()), jsx(Flex.Item, {
+          "aria-hidden": true
+        }, t('Question Title')), jsx(ScreenReaderContent, null, titleLabelText)),
         type: "text",
-        placeholder: t('Question Title'),
         onChange: this.handleTitleChange,
         value: workingEntry.title || '',
         interaction: disabled ? 'disabled' : 'enabled',
         "data-automation": "sdk-question-title-textinput"
-      })));
+      });
     }
   }, {
     key: "renderLeftHeader",
@@ -233,14 +239,16 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
         position: this.props.displayPosition
       });
       var position = this.props.disabledForRegrade ? this.props.displayPosition : this.props.quizEntry.positionToDisplay(this.props.displayPosition);
-      return jsx("div", {
+      return jsx(Flex, {
         className: "leftHeader",
-        css: this.props.styles.leftHeader
+        direction: "row",
+        justifyItems: "center",
+        "data-automation": "sdk-quiz-entry-left-header"
       }, jsx(PositionBox, {
         position: position,
         headingText: positionText,
         "data-automation": "sdk-quiz-entry-positionbox"
-      }), this.renderBankedContent(), this.renderName(), jsx("div", {
+      }), this.renderBankedContent(), jsx("div", {
         css: this.props.styles.dividingLine
       }), this.renderTitleHolder());
     }
@@ -260,12 +268,21 @@ var QuizEntryHeader = (_dec = withStyleOverrides(generateStyle, generateComponen
         shouldDisableDeleteButton: this.props.disabledForRegrade,
         shouldRenderEdit: false
       };
-      return jsx("div", {
+      return jsx(View, {
+        as: "div",
         className: "header",
-        css: this.props.styles.header
+        background: "secondary",
+        padding: "small"
       }, jsx(Global, {
         styles: this.props.styles.globalStyles
-      }), this.renderLeftHeader(), jsx(ActionButtons, actionButtonProps));
+      }), jsx(Flex, {
+        className: "header",
+        direction: "row",
+        gap: "small"
+      }, jsx(Flex.Item, {
+        shouldShrink: false,
+        shouldGrow: true
+      }, this.renderLeftHeader()), jsx(Flex.Item, null, jsx(ActionButtons, actionButtonProps))));
     }
   }]);
   QuizEntryHeader.displayName = "QuizEntryHeader";

package/es/building/components/resources/quizEntry/QuizEntryEdit/Header/styles.js

@@ -8,39 +8,11 @@ var generateStyle = function generateStyle(componentTheme) {
     },
     header: {
       backgroundColor: componentTheme.headerBackgroundColor,
-      color: componentTheme.headerColor,
-      padding: componentTheme.headerPadding,
-      display: 'flex',
-      justifyContent: 'space-between',
-      verticalAlign: 'middle',
-      alignItems: 'center'
-    },
-    leftHeader: {
-      flex: '8 0 0',
-      display: 'inline-flex',
-      flexWrap: 'nowrap',
-      alignItems: 'center',
-      /* fix for ie11 */
-      width: '100%'
-    },
-    interactionType: {
-      fontSize: componentTheme.interactionTypeFontSize,
-      marginLeft: componentTheme.interactionTypeLeftMargin,
-      marginRight: componentTheme.interactionTypeRightMargin
+      color: componentTheme.headerColor
     },
     dividingLine: {
       width: '0',
       borderLeft: componentTheme.dividingLineLeftBorder
-    },
-    titleHolder: {
-      display: 'flex',
-      flex: '1 1 auto'
-    },
-    titleInput: {
-      flex: '1 1 auto',
-      fontSize: componentTheme.titleInputFontSize,
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
     }
   };
 };

package/es/building/components/resources/quizEntry/QuizEntryEdit/Header/theme.js

@@ -5,11 +5,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     headerBackgroundColor: colors.porcelain,
     headerColor: colors.oxford,
-    headerPadding: "".concat(spacing.xSmall, " ").concat(spacing.small),
-    interactionTypeFontSize: typography.fontSizeSmall,
-    interactionTypeLeftMargin: spacing.xSmall,
-    interactionTypeRightMargin: spacing.xSmall,
-    titleInputFontSize: typography.fontSizeMedium
+    headerPadding: "".concat(spacing.xSmall, " ").concat(spacing.small)
   };
 };
 export default generateComponentTheme;

package/es/common/actions/modifications.js

@@ -474,13 +474,14 @@ export function clearTemporaryBankItem(bankId) {
 // =====================
 // =====================
 
-export function createStimulus(quizId, position) {
+export function createStimulus(quizId, position, isPassage) {
   return function (dispatch, getState) {
     dispatch({
       type: CREATE_TEMPORARY_STIMULUS,
       payload: {
         quizId: quizId,
-        position: position
+        position: position,
+        isPassage: isPassage
       }
     });
   };

package/es/common/components/AccessCodeTextInput/AccessCodeTextInput.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { AccessCodeTextInput } from "./index.js";
+export default {
+  title: AccessCodeTextInput.name
+};
+var _ref = /*#__PURE__*/React.createElement(AccessCodeTextInput, {
+  value: "Is it secret? Is it safe?"
+});
+export var whenRendered = function whenRendered() {
+  return _ref;
+};

package/es/common/components/AccessCodeTextInput/index.js

@@ -0,0 +1,47 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import MaskedTextInput from "../MaskedTextInput/index.js";
+import { ScreenReaderContent } from '@instructure/ui-a11y-content';
+import t from '@instructure/quiz-i18n/es/format-message';
+export var AccessCodeTextInput = /*#__PURE__*/function (_Component) {
+  _inherits(AccessCodeTextInput, _Component);
+  var _super = _createSuper(AccessCodeTextInput);
+  function AccessCodeTextInput() {
+    var _this;
+    _classCallCheck(this, AccessCodeTextInput);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.state = {
+      masked: true
+    };
+    _this.handleMaskedChange = function () {
+      _this.setState(function (state) {
+        return {
+          masked: !state.masked
+        };
+      });
+    };
+    return _this;
+  }
+  _createClass(AccessCodeTextInput, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(MaskedTextInput, Object.assign({
+        renderLabel: /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Access Code')),
+        display: "inline-block",
+        type: "text",
+        onMaskedChange: this.handleMaskedChange,
+        masked: this.state.masked,
+        checkboxLabel: t('Show access code')
+      }, this.props));
+    }
+  }]);
+  AccessCodeTextInput.displayName = "AccessCodeTextInput";
+  return AccessCodeTextInput;
+}(Component);
+export default AccessCodeTextInput;

package/es/common/components/ImportModal/presenter.js

@@ -14,9 +14,8 @@ import { ProgressBar } from '@instructure/ui-progress';
 import { Heading } from '@instructure/ui-heading';
 import { Tabs } from '@instructure/ui-tabs';
 import { ToggleDetails } from '@instructure/ui-toggle-details';
-import { TextInput } from '@instructure/ui-text-input';
 import { jsx } from '@instructure/emotion';
-import { ImportantModal, ModalHeader, ModalBody, ModalFooter, FILE_UPLOAD_SELECT, FILE_UPLOAD_IMPORTING, FILE_UPLOAD_SUCCESS, FILE_UPLOAD_FAILURE, FILE_UPLOAD_ERROR, XSMALL_SIDE_MARGIN, withStyleOverrides } from '@instructure/quiz-common';
+import { ImportantModal, ModalHeader, ModalBody, ModalFooter, FILE_UPLOAD_SELECT, FILE_UPLOAD_IMPORTING, FILE_UPLOAD_SUCCESS, FILE_UPLOAD_FAILURE, FILE_UPLOAD_ERROR, TextInput, XSMALL_SIDE_MARGIN, withStyleOverrides } from '@instructure/quiz-common';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
 import ImportFileSelector from "./ImportFileSelector/index.js";

package/es/common/components/MaskedTextInput/MaskedTextInput.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { MaskedTextInput } from "./index.js";
+var props = {
+  renderLabel: 'Example of a masked text input',
+  checkboxLabel: 'Select to show the current value',
+  value: 'Is it secret? Is it safe?',
+  onMaskedChange: Function.prototype
+};
+export default {
+  title: MaskedTextInput.name
+};
+export var whenMasked = function whenMasked() {
+  return /*#__PURE__*/React.createElement(MaskedTextInput, props);
+};
+export var whenUnmasked = function whenUnmasked() {
+  return /*#__PURE__*/React.createElement(MaskedTextInput, Object.assign({}, props, {
+    masked: false
+  }));
+};

package/es/common/components/MaskedTextInput/index.js

@@ -0,0 +1,64 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { View } from '@instructure/ui-view';
+import { Checkbox } from '@instructure/ui-checkbox';
+import { omitProps } from '@instructure/ui-react-utils';
+import { TextInput } from '@instructure/quiz-common';
+var maskedTextInputPropTypes = {
+  /**
+   * The label to be used for the checkbox that controls whether the input is masked
+   */
+  checkboxLabel: PropTypes.string.isRequired,
+  /**
+   * Whether or not the input text is masked
+   */
+  masked: PropTypes.bool,
+  /**
+   * The function to call when the user clicks the checkbox to either mask or unmask the input
+   */
+  onMaskedChange: PropTypes.func
+};
+export var MaskedTextInput = /*#__PURE__*/function (_Component) {
+  _inherits(MaskedTextInput, _Component);
+  var _super = _createSuper(MaskedTextInput);
+  function MaskedTextInput() {
+    _classCallCheck(this, MaskedTextInput);
+    return _super.apply(this, arguments);
+  }
+  _createClass(MaskedTextInput, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        checkboxLabel = _this$props.checkboxLabel,
+        masked = _this$props.masked,
+        onMaskedChange = _this$props.onMaskedChange,
+        type = _this$props.type;
+      var textInputProps = _objectSpread(_objectSpread({}, omitProps(this.props, maskedTextInputPropTypes)), {}, {
+        type: masked ? 'password' : type
+      });
+      return /*#__PURE__*/React.createElement(View, {
+        as: "div"
+      }, /*#__PURE__*/React.createElement(TextInput, textInputProps), /*#__PURE__*/React.createElement(View, {
+        as: "div",
+        margin: "small 0"
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        label: checkboxLabel,
+        checked: !masked,
+        onChange: onMaskedChange
+      })));
+    }
+  }]);
+  MaskedTextInput.displayName = "MaskedTextInput";
+  return MaskedTextInput;
+}(Component);
+MaskedTextInput.propTypes = _objectSpread(_objectSpread({}, maskedTextInputPropTypes), TextInput.propTypes);
+MaskedTextInput.defaultProps = _objectSpread(_objectSpread({}, TextInput.defaultProps), {}, {
+  masked: true,
+  onMaskedChange: Function.prototype
+});
+export default MaskedTextInput;

package/es/common/components/layout/Page/styles.js

@@ -19,12 +19,15 @@ var generateStyle = function generateStyle(componentTheme, props) {
       transition: componentTheme.contentTransition,
       width: '100%',
       '.user_content p': {
-        margin: componentTheme.userContentMargin,
+        margin: "".concat(componentTheme.userContentMargin, " 0"),
         '&:first-of-type': {
-          marginTop: componentTheme.userContentZeroMargin
+          margin: "0 0 ".concat(componentTheme.userContentMargin)
         },
-        '&:last-child': {
-          marginBottom: componentTheme.userContentZeroMargin
+        '&:last-of-type': {
+          margin: "".concat(componentTheme.userContentMargin, " 0 0")
+        },
+        '&:only-child': {
+          margin: 0
         }
       }
     })

package/es/common/components/layout/Page/theme.js

@@ -6,8 +6,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
   return {
     fontFamily: typography.fontFamily,
     contentTransition: "transform ".concat(transitions.duration),
-    userContentMargin: spacing.mediumSmall,
-    userContentZeroMargin: 0
+    userContentMargin: spacing.mediumSmall
   };
 };
 export default generateComponentTheme;

package/es/common/components/layout/header/Calculator/presenter.js

@@ -22,8 +22,8 @@ var CalculatorButton = function CalculatorButton(_ref) {
       variant: "icon",
       renderIcon: _ref2,
       disabled: !enabled,
-      tooltip: t('Calculator')
-    }, t('Calculator'));
+      tooltip: t('This calculator has accessibility limitations.')
+    }, t('Calculator'), /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Use the arrow keys to move the calculator after selecting "Move". Screen readers may not announce the launch clearly.')));
   }
   return /*#__PURE__*/React.createElement(Button, {
     renderIcon: IconCalculatorLine,

package/es/common/components/layout/navbar/externalStyles.js

@@ -0,0 +1,7 @@
+export var generateExternalStyle = function generateExternalStyle() {
+  return {
+    showBrandIcon: true,
+    desktopBottomBorder: true,
+    desktopBottomBorderInverse: true
+  };
+};

package/es/common/components/layout/navbar/styles.js

@@ -1,10 +1,9 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { generateExternalStyle } from "./externalStyles.js";
 var generateStyle = function generateStyle(componentTheme) {
-  return {
-    showBrandIcon: true,
-    desktopBottomBorder: true,
-    desktopBottomBorderInverse: true,
+  return _objectSpread({
     backgroundColor: componentTheme.backgroundColor,
     phoneBreakPoint: componentTheme.phoneBreakPoint
-  };
+  }, generateExternalStyle());
 };
 export default generateStyle;

package/es/common/components/layout/sidebar/Sidebar/externalStyles.js

@@ -0,0 +1,10 @@
+export var generateExternalStyle = function generateExternalStyle(componentTheme) {
+  return {
+    sidebar: {
+      borderTop: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
+      borderRight: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
+      borderBottom: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
+      borderLeft: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor)
+    }
+  };
+};

package/es/common/components/layout/sidebar/Sidebar/index.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconMoveStartLine, IconMoveEndLine, IconPinSolid, IconQuizInstructionsLine, IconQuizTitleLine } from '@instructure/ui-icons';
-import { AccessibleContent, ScreenReaderContent, PresentationContent } from '@instructure/ui-a11y-content';
+import { AccessibleContent, PresentationContent, ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { IconButton } from '@instructure/ui-buttons';
 import { Link } from '@instructure/ui-link';
 import { Text } from '@instructure/ui-text';
@@ -19,6 +19,7 @@ import { View } from '@instructure/ui-view';
 import { jsx, Global } from '@instructure/emotion';
 import { Heading } from '@instructure/ui-heading';
 import t from '@instructure/quiz-i18n/es/format-message';
+import { Tooltip } from '@instructure/ui-tooltip';
 import { INSTRUCTIONS_SCROLL_KEY, RESULTS_SCROLL_KEY, SIDEBAR_NAV_ID, TITLE_SCROLL_KEY, END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
 import { onPhone } from "../../../../util/windowChecks.js";
 import CustomPropTypes from "../../../../util/CustomPropTypes.js";
@@ -101,12 +102,19 @@ export var Sidebar = (_dec = withStyleOverrides(generateStyle, generateComponent
   }, {
     key: "renderTitle",
     value: function renderTitle() {
+      var navigationText = t('Navigate to title');
       if (this.props.grading) {
         return;
       }
       return jsx("div", {
         css: this.props.styles.sidebar.actionableInfo,
         className: END_EDITING_TRIGGER_CLASSNAME
+      }, jsx(Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : jsx("span", {
+          "aria-hidden": "true"
+        }, navigationText),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['focus', 'hover']
       }, jsx(Link, {
         href: "#",
         margin: "small",
@@ -114,7 +122,7 @@ export var Sidebar = (_dec = withStyleOverrides(generateStyle, generateComponent
         onClick: this.scrollToTitle,
         renderIcon: _ref,
         "data-automation": "sidebar-title-button"
-      }, jsx(ScreenReaderContent, null, t('Navigate to title'))), jsx(PresentationContent, null, jsx("span", {
+      }, jsx(ScreenReaderContent, null, navigationText))), jsx(PresentationContent, null, jsx("span", {
         css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-title-text",
         onClick: this.scrollToTitle,
@@ -124,12 +132,19 @@ export var Sidebar = (_dec = withStyleOverrides(generateStyle, generateComponent
   }, {
     key: "renderInstructions",
     value: function renderInstructions() {
+      var navigationText = t('Navigate to instructions');
       if (this.props.grading) {
         return;
       }
       return jsx("div", {
         css: this.props.styles.sidebar.actionableInfo,
         className: END_EDITING_TRIGGER_CLASSNAME
+      }, jsx(Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : jsx("span", {
+          "aria-hidden": "true"
+        }, navigationText),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['focus', 'hover']
       }, jsx(Link, {
         href: "#",
         margin: "small",
@@ -137,7 +152,7 @@ export var Sidebar = (_dec = withStyleOverrides(generateStyle, generateComponent
         onClick: this.scrollToInfo,
         renderIcon: _ref2,
         "data-automation": "sidebar-instructions-button"
-      }, jsx(ScreenReaderContent, null, t('Navigate to instructions'))), jsx(PresentationContent, null, jsx("span", {
+      }, jsx(ScreenReaderContent, null, navigationText))), jsx(PresentationContent, null, jsx("span", {
         css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-instructions-text",
         onClick: this.scrollToInfo,
@@ -147,11 +162,18 @@ export var Sidebar = (_dec = withStyleOverrides(generateStyle, generateComponent
   }, {
     key: "renderResults",
     value: function renderResults() {
+      var navigationText = t('Navigate to results');
       if (!this.props.grading) {
         return;
       }
       return jsx("div", {
         css: this.props.styles.sidebar.actionableInfo
+      }, jsx(Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : jsx("span", {
+          "aria-hidden": "true"
+        }, navigationText),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['focus', 'hover']
       }, jsx(Link, {
         href: "#",
         margin: "small",
@@ -159,7 +181,7 @@ export var Sidebar = (_dec = withStyleOverrides(generateStyle, generateComponent
         onClick: this.scrollToResults,
         renderIcon: _ref3,
         "data-automation": "sidebar-results-button"
-      }, jsx(ScreenReaderContent, null, t('Navigate to results'))), jsx(PresentationContent, null, jsx("span", {
+      }, jsx(ScreenReaderContent, null, navigationText))), jsx(PresentationContent, null, jsx("span", {
         css: this.props.styles.sidebar.description,
         "data-automation": "sidebar-results-text",
         onClick: this.scrollToResults,

package/es/common/components/layout/sidebar/Sidebar/styles.js

@@ -1,18 +1,16 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import merge from 'lodash/merge';
+import { generateExternalStyle } from "./externalStyles.js";
 var generateStyle = function generateStyle(componentTheme, props) {
   var _commonContainer;
   var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
   var mp = '@media print';
-  return {
+  return merge({
     sidebar: _objectSpread(_objectSpread(_defineProperty({
       boxSizing: 'border-box',
       width: componentTheme.sidebarWidthClosed,
       backgroundColor: componentTheme.sidebarBackgroundColor,
-      borderTop: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
-      borderRight: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
-      borderBottom: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
-      borderLeft: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
       color: componentTheme.sidebarColor,
       height: '100%',
       overflow: 'hidden',
@@ -111,6 +109,6 @@ var generateStyle = function generateStyle(componentTheme, props) {
     }), _defineProperty(_commonContainer, mp, {
       display: 'none'
     }), _commonContainer)
-  };
+  }, generateExternalStyle(componentTheme));
 };
 export default generateStyle;

package/es/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -7,16 +7,16 @@ var _dec, _class, _SidebarItem;
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { Link } from '@instructure/ui-link';
-import { Flex } from '@instructure/ui-flex';
 import { jsx } from '@instructure/emotion';
 import PositionSummary from "../PositionSummary/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { RichContentRenderer } from '@instructure/quiz-rce';
 import generateStyle from "./styles.js";
 import generateComponentTheme from "./theme.js";
-import { END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
+import { Flex, END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
+import { Tooltip } from '@instructure/ui-tooltip';
+import { AccessibleContent } from '@instructure/ui-a11y-content';
 export var SidebarItem = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_SidebarItem = /*#__PURE__*/function (_Component) {
   _inherits(SidebarItem, _Component);
   var _super = _createSuper(SidebarItem);
@@ -89,12 +89,18 @@ export var SidebarItem = (_dec = withStyleOverrides(generateStyle, generateCompo
         displayPosition = _this$props2.displayPosition,
         itemId = _this$props2.itemId,
         isAnswered = _this$props2.isAnswered;
-      var screenReaderContent = !isAnswered && isAnswered !== null ? t('Navigate to question at position {displayPosition}, unanswered', {
+      var content = !isAnswered && isAnswered !== null ? t('Navigate to question at position {displayPosition}, unanswered', {
         displayPosition: displayPosition
       }) : t('Navigate to question at position {displayPosition}', {
         displayPosition: displayPosition
       });
-      return jsx(Link, {
+      return jsx(Tooltip, {
+        renderTip: this.props.sidebarOpen ? '' : jsx("span", {
+          "aria-hidden": "true"
+        }, content),
+        placement: "start",
+        on: this.props.sidebarOpen ? [] : ['hover', 'focus']
+      }, jsx(Link, {
         href: "#",
         size: "small",
         margin: "0 small",
@@ -104,8 +110,8 @@ export var SidebarItem = (_dec = withStyleOverrides(generateStyle, generateCompo
         "data-automation-item-id": itemId,
         "data-automation": "sdk-sidebar-item-button"
       }, jsx(AccessibleContent, {
-        alt: screenReaderContent
-      }, this.renderPosition()));
+        alt: content
+      }, this.renderPosition())));
     }
   }, {
     key: "renderClosed",