box-annotations 4.1.1-beta.2 → 4.1.1-beta.4

package/i18n/en-US.js

@@ -4,6 +4,7 @@ export default {
   "ba.annotationsLoadError": "We’re sorry, the annotations failed to load for this file.",
   "ba.annotationsPost": "Post",
   "ba.annotationsSave": "Save",
+  "ba.popup.reply.comment": "Comment",
   "ba.popups.cancel": "Cancel",
   "ba.popups.drawing.addComment": "Add Comment",
   "ba.popups.drawing.delete": "Delete",

package/i18n/en-US.properties

@@ -8,6 +8,8 @@ ba.annotationsLoadError = We’re sorry, the annotations failed to load for this
 ba.annotationsPost = Post
 # Label for the save button
 ba.annotationsSave = Save
+# Aria label description for reply popup
+ba.popup.reply.comment = Comment
 # Button label for cancelling the creation of a description, comment, or reply
 ba.popups.cancel = Cancel
 # Button label for adding a comment in the drawing toolbar

package/i18n/json/src/components/Popups/messages.json

@@ -1 +1 @@
-[{"id":"ba.popups.cancel","description":"Button label for cancelling the creation of a description, comment, or reply","defaultMessage":"Cancel"},{"id":"ba.popups.post","description":"Button label for creating a description, comment, or reply","defaultMessage":"Post"},{"id":"ba.popups.drawing.addComment","description":"Button label for adding a comment in the drawing toolbar","defaultMessage":"Add Comment"},{"id":"ba.popups.drawing.delete","description":"Button title for deleting a staged drawing","defaultMessage":"Delete"},{"id":"ba.popups.drawing.redo","description":"Button title for redoing a staged drawing","defaultMessage":"Redo"},{"id":"ba.popups.drawing.undo","description":"Button title for undoing a staged drawing","defaultMessage":"Undo"},{"id":"ba.popups.replyField.placeholder","description":"Placeholder for reply field editor","defaultMessage":"Type a comment..."},{"id":"ba.popups.popupHighlight.promoter","description":"Popup message for highlight promoter","defaultMessage":"Highlight and Comment"},{"id":"ba.popups.popupHighlight.restrictedPrompt","description":"Prompt message when selection crosses multiple pages","defaultMessage":"Comments restricted to single page"},{"id":"ba.popups.popupList.prompt","description":"Prompt message for empty popup list","defaultMessage":"Mention someone to notify them"},{"id":"ba.popups.popupCursor.regionPrompt","description":"Prompt message following cursor in region annotations mode","defaultMessage":"Draw a box to comment"}]
+[{"id":"ba.popup.reply.comment","description":"Aria label description for reply popup","defaultMessage":"Comment"},{"id":"ba.popups.cancel","description":"Button label for cancelling the creation of a description, comment, or reply","defaultMessage":"Cancel"},{"id":"ba.popups.post","description":"Button label for creating a description, comment, or reply","defaultMessage":"Post"},{"id":"ba.popups.drawing.addComment","description":"Button label for adding a comment in the drawing toolbar","defaultMessage":"Add Comment"},{"id":"ba.popups.drawing.delete","description":"Button title for deleting a staged drawing","defaultMessage":"Delete"},{"id":"ba.popups.drawing.redo","description":"Button title for redoing a staged drawing","defaultMessage":"Redo"},{"id":"ba.popups.drawing.undo","description":"Button title for undoing a staged drawing","defaultMessage":"Undo"},{"id":"ba.popups.replyField.placeholder","description":"Placeholder for reply field editor","defaultMessage":"Type a comment..."},{"id":"ba.popups.popupHighlight.promoter","description":"Popup message for highlight promoter","defaultMessage":"Highlight and Comment"},{"id":"ba.popups.popupHighlight.restrictedPrompt","description":"Prompt message when selection crosses multiple pages","defaultMessage":"Comments restricted to single page"},{"id":"ba.popups.popupList.prompt","description":"Prompt message for empty popup list","defaultMessage":"Mention someone to notify them"},{"id":"ba.popups.popupCursor.regionPrompt","description":"Prompt message following cursor in region annotations mode","defaultMessage":"Draw a box to comment"}]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "box-annotations",
-    "version": "4.1.1-beta.2",
+    "version": "4.1.1-beta.4",
     "description": "Box Annotations",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",
@@ -107,6 +107,7 @@
         "stylelint-config-rational-order": "^0.1.2",
         "stylelint-config-standard": "^19.0.0",
         "stylelint-order": "^3.1.1",
+        "tabbable": "^1.1.3",
         "typescript": "^3.8.3",
         "uglifyjs-webpack-plugin": "^2.2.0",
         "uuid": "^8.3.1",

package/src/common/BaseAnnotator.scss

@@ -30,3 +30,13 @@
     @include box-sizing;
     @include common-typography;
 }
+
+.ba-Layer--drawing,
+.ba-Layer--highlight,
+.ba-Layer--region {
+    z-index: 3;
+}
+
+.ba-Layer--popup {
+    z-index: 4;
+}

package/src/components/Popups/PopupHighlight.tsx

@@ -84,6 +84,7 @@ export default function PopupHighlight({ onCancel = noop, onSubmit = noop, shape
         >
             <button
                 ref={buttonRef}
+                aria-haspopup="dialog"
                 className="ba-PopupHighlight-button"
                 data-testid="ba-PopupHighlight-button"
                 onClick={onSubmit}

package/src/components/Popups/PopupReply.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import * as Popper from '@popperjs/core';
 import * as ReactRedux from 'react-redux';
+import { useIntl } from 'react-intl';
+import FocusTrap from 'box-ui-elements/es/components/focus-trap/FocusTrap';
+import messages from './messages';
 import PopupBase from './PopupBase';
 import ReplyForm from '../ReplyForm';
 import usePrevious from '../../common/usePrevious';
@@ -83,6 +86,7 @@ export default function PopupReply({
     value = '',
     ...rest
 }: Props): JSX.Element {
+    const intl = useIntl();
     const popupRef = React.useRef<PopupBase>(null);
     const popupOptions = React.useRef<Partial<Popper.Options>>(getOptions()); // Keep the options reference the same between renders
     const rotation = ReactRedux.useSelector(getRotation);
@@ -99,14 +103,23 @@ export default function PopupReply({
     }, [popupRef, prevRotation, prevScale, rotation, scale]);
 
     return (
-        <PopupBase ref={popupRef} data-resin-component="popupReply" options={popupOptions.current} {...rest}>
-            <ReplyForm
-                isPending={isPending}
-                onCancel={onCancel}
-                onChange={onChange}
-                onSubmit={onSubmit}
-                value={value}
-            />
-        </PopupBase>
+        <FocusTrap>
+            <PopupBase
+                ref={popupRef}
+                aria-label={intl.formatMessage(messages.ariaLabelComment)}
+                data-resin-component="popupReply"
+                options={popupOptions.current}
+                role="dialog"
+                {...rest}
+            >
+                <ReplyForm
+                    isPending={isPending}
+                    onCancel={onCancel}
+                    onChange={onChange}
+                    onSubmit={onSubmit}
+                    value={value}
+                />
+            </PopupBase>
+        </FocusTrap>
     );
 }

package/src/components/Popups/messages.ts

@@ -1,6 +1,11 @@
 import { defineMessages } from 'react-intl';
 
 export default defineMessages({
+    ariaLabelComment: {
+        id: 'ba.popup.reply.comment',
+        description: 'Aria label description for reply popup',
+        defaultMessage: 'Comment',
+    },
     buttonCancel: {
         id: 'ba.popups.cancel',
         description: 'Button label for cancelling the creation of a description, comment, or reply',

package/src/components/ReplyField/ReplyField.tsx

@@ -204,6 +204,7 @@ export default class ReplyField extends React.Component<Props, State> {
             <div className={classnames(className, 'ba-ReplyField')}>
                 <Editor
                     {...rest}
+                    ariaMultiline
                     editorState={editorState}
                     handleReturn={this.handleReturn}
                     onChange={this.handleChange}
@@ -212,6 +213,7 @@ export default class ReplyField extends React.Component<Props, State> {
                     placeholder={placeholder}
                     readOnly={isDisabled}
                     stripPastedStyles
+                    tabIndex={0}
                     webDriverTestID="ba-ReplyField-editor"
                 />
 

package/src/document/DocumentAnnotator.ts

@@ -60,14 +60,20 @@ export default class DocumentAnnotator extends BaseAnnotator {
         const pageReferenceEl = this.getPageReference(pageEl);
         const managers = this.managers.get(pageNumber) || new Set();
         const resinTags = { fileid: fileId, iscurrent: isCurrentFileVersion };
+        let destroyManagers = false;
 
-        // Destroy any managers that were attached to page elements that no longer exist
+        // If a referenced page element doesn't exist, destroy all managers to keep them in sync
         managers.forEach(manager => {
             if (!manager.exists(pageEl)) {
-                manager.destroy();
-                managers.delete(manager);
+                destroyManagers = true;
             }
         });
+        if (destroyManagers) {
+            managers.forEach(manager => {
+                manager.destroy();
+            });
+            managers.clear();
+        }
 
         // Lazily instantiate managers as pages are added or re-rendered
         if (managers.size === 0) {

package/src/image/ImageAnnotator.scss

@@ -15,6 +15,6 @@
     // transform applied to each of the managers' react mount element to account for
     // rotation
     .ba-Layer--popup {
-        z-index: 1;
+        z-index: 4;
     }
 }