fix(a11y): for "Type a comment…" dialog (#700)

* fix(a11y): add aria multiline for draft editor modal * fix(a11y): dialog role and properties * fix(a11y): keyboard focus for comment dialog * fix(a11y): resolve comments
box · Jul 17, 2023 · 2389c85 · 2389c85
1 parent 499b635
commit 2389c85
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 9 deletions.
diff --git a/i18n/en-US.properties b/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

diff --git a/package.json b/package.json
@@ -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",

diff --git a/src/components/Popups/PopupHighlight.tsx b/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}

diff --git a/src/components/Popups/PopupReply.tsx b/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>
     );
 }
diff --git a/src/components/Popups/messages.ts b/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',

diff --git a/src/components/ReplyField/ReplyField.tsx b/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"
                 />
 

diff --git a/yarn.lock b/yarn.lock
@@ -12984,6 +12984,11 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+tabbable@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-1.1.3.tgz#0e4ee376f3631e42d7977a074dbd2b3827843081"
+  integrity sha512-nOWwx35/JuDI4ONuF0ZTo6lYvI0fY0tZCH1ErzY2EXfu4az50ZyiUX8X073FLiZtmWUVlkRnuXsehjJgCw9tYg==
+
 table@^5.0.0, table@^5.2.3, table@^5.4.6:
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"