fix(accessibility): Add accessible name for ReplyField (#704)

* fix(accessibility): Add accessible name for ReplyField

* fix(tests): Fix unit tests

* fix(tests): Fix lint

i18n/en-US.properties

@@ -10,6 +10,8 @@ ba.annotationsPost = Post
 ba.annotationsSave = Save
 # Aria label description for reply popup
 ba.popup.reply.comment = Comment
+# Aria label description for annotation comment field
+ba.popup.reply.field = Type a 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

src/components/Popups/messages.ts

@@ -6,6 +6,11 @@ export default defineMessages({
         description: 'Aria label description for reply popup',
         defaultMessage: 'Comment',
     },
+    ariaLabelReplyField: {
+        id: 'ba.popup.reply.field',
+        description: 'Aria label description for annotation comment field',
+        defaultMessage: 'Type a comment',
+    },
     buttonCancel: {
         id: 'ba.popups.cancel',
         description: 'Button label for cancelling the creation of a description, comment, or reply',

src/components/ReplyField/ReplyField.tsx

@@ -6,8 +6,10 @@ import {
     getActiveMentionForEditorState,
 } from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector/utils';
 import { DraftHandleValue, Editor, EditorState } from 'draft-js';
+import { IntlShape } from 'react-intl';
 import PopupList from '../Popups/PopupList';
 import { Collaborator } from '../../@types';
+import messages from '../Popups/messages';
 import { VirtualElement } from '../Popups/Popper';
 import './ReplyField.scss';
 
@@ -29,6 +31,7 @@ export type Props = {
     onChange: (editorState: EditorState) => void;
     placeholder?: string;
     setCursorPosition: (cursorPosition: number) => void;
+    intl: IntlShape;
 };
 
 export type State = {
@@ -197,13 +200,14 @@ export default class ReplyField extends React.Component<Props, State> {
     handleMouseDown = (event: React.SyntheticEvent): void => event.preventDefault(); // prevent the blur event so that Editor can remain focus
 
     render(): JSX.Element {
-        const { className, collaborators, editorState, isDisabled, placeholder, ...rest } = this.props;
+        const { className, collaborators, intl, editorState, isDisabled, placeholder, ...rest } = this.props;
         const { activeItemIndex, popupAutoScroll, popupReference } = this.state;
 
         return (
             <div className={classnames(className, 'ba-ReplyField')}>
                 <Editor
                     {...rest}
+                    ariaLabel={intl.formatMessage(messages.ariaLabelReplyField)}
                     ariaMultiline
                     editorState={editorState}
                     handleReturn={this.handleReturn}

src/components/ReplyField/__tests__/ReplyField-test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { getActiveMentionForEditorState } from 'box-ui-elements/es/components/form-elements/draft-js-mention-selector/utils';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Editor, EditorState } from 'draft-js';
+import { IntlShape, MessageDescriptor } from 'react-intl';
 import PopupList from '../../Popups/PopupList';
 import ReplyField, { Props, State } from '../ReplyField';
 import { VirtualElement } from '../../Popups/Popper';
@@ -28,6 +29,9 @@ jest.mock('lodash/debounce', () => (func: Function) => func);
 describe('ReplyField', () => {
     const defaults: Props = {
         className: 'ba-Popup-field',
+        intl: {
+            formatMessage: (message: MessageDescriptor) => message,
+        } as IntlShape,
         collaborators: [
             { id: 'testid1', name: 'test1', item: { id: 'testid1', name: 'test1', type: 'user' } },
             { id: 'testid2', name: 'test2', item: { id: 'testid2', name: 'test2', type: 'user' } },

src/components/ReplyField/__tests__/ReplyFieldContainer-test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { EditorState } from 'draft-js';
 import { mount, ReactWrapper } from 'enzyme';
+import { IntlShape } from 'react-intl';
 import ReplyField from '../ReplyField';
 import ReplyFieldContainer, { Props } from '../ReplyFieldContainer';
 import { createStore } from '../../../store';
@@ -17,6 +18,7 @@ describe('ReplyFieldContainer', () => {
         editorState: EditorState.createEmpty(),
         onChange: jest.fn(),
         onClick: jest.fn(),
+        intl: {} as IntlShape,
         store,
     };
 

src/components/ReplyForm/ReplyForm.tsx

@@ -76,6 +76,7 @@ const ReplyForm = (props: Props): JSX.Element => {
                     className="ba-Popup-field"
                     data-testid="ba-Popup-field"
                     editorState={editorState}
+                    intl={intl}
                     isDisabled={isPending}
                     onChange={handleChange}
                     placeholder={intl.formatMessage(messages.fieldPlaceholder)}