[MM-61571]: Add label to form field in channel header (#29553)

* [MA-12]: Add label to form field in channel header

* [MA-12]: Update aria attributes and tests

* [MA-12]: Update snapshots, fix e2e test

* [MA-12]: Fix E2E tests

* [MA-12]: Fix type in test

webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap

@@ -2,24 +2,7 @@
 
 exports[`components/AutosizeTextarea should match snapshot, init 1`] = `
 <div>
-  <div
-    data-testid="autosize_textarea_placeholder"
-    id="autosize_textarea_placeholder"
-    style={
-      Object {
-        "background": "none",
-        "borderColor": "transparent",
-        "opacity": 0.75,
-        "overflow": "hidden",
-        "pointerEvents": "none",
-        "position": "absolute",
-        "textOverflow": "ellipsis",
-        "whiteSpace": "nowrap",
-      }
-    }
-  />
   <textarea
-    aria-label=""
     data-testid="autosize_textarea"
     dir="auto"
     height={0}

webapp/channels/src/components/advanced_text_editor/advanced_text_editor.test.tsx

@@ -227,7 +227,7 @@ describe('components/avanced_text_editor/advanced_text_editor', () => {
             }),
         );
 
-        expect(screen.getByLabelText('write to test channel')).toHaveValue('original draft');
+        expect(screen.getByPlaceholderText('Write to Test Channel')).toHaveValue('original draft');
 
         rerender(
             <AdvancedTextEditor
@@ -235,7 +235,7 @@ describe('components/avanced_text_editor/advanced_text_editor', () => {
                 channelId={otherChannelId}
             />,
         );
-        expect(screen.getByLabelText('write to other channel')).toHaveValue('a different draft');
+        expect(screen.getByPlaceholderText('Write to Other Channel')).toHaveValue('a different draft');
     });
 
     it('should save a new draft when changing channels', () => {
@@ -246,7 +246,7 @@ describe('components/avanced_text_editor/advanced_text_editor', () => {
             initialState,
         );
 
-        userEvent.type(screen.getByLabelText('write to test channel'), 'some text');
+        userEvent.type(screen.getByPlaceholderText('Write to Test Channel'), 'some text');
 
         expect(mockedUpdateDraft).not.toHaveBeenCalled();
 
@@ -312,7 +312,7 @@ describe('components/avanced_text_editor/advanced_text_editor', () => {
             }),
         );
 
-        userEvent.type(screen.getByLabelText('write to test channel'), ' plus some new text');
+        userEvent.type(screen.getByPlaceholderText('Write to Test Channel'), ' plus some new text');
 
         expect(mockedUpdateDraft).not.toHaveBeenCalled();
 
@@ -348,7 +348,7 @@ describe('components/avanced_text_editor/advanced_text_editor', () => {
             }),
         );
 
-        userEvent.clear(screen.getByLabelText('write to test channel'));
+        userEvent.clear(screen.getByPlaceholderText('Write to Test Channel'));
 
         expect(mockedRemoveDraft).not.toHaveBeenCalled();
         expect(mockedUpdateDraft).not.toHaveBeenCalled();

webapp/channels/src/components/autosize_textarea.tsx

@@ -130,21 +130,6 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
         heightProps.height = height.current;
     }
 
-    let textareaPlaceholder = null;
-    const placeholderAriaLabel = placeholder ? placeholder.toLowerCase() : '';
-    if (!value && !defaultValue) {
-        textareaPlaceholder = (
-            <div
-                {...otherProps}
-                id={`${id}_placeholder`}
-                data-testid={`${id}_placeholder`}
-                style={styles.placeholder}
-            >
-                {placeholder}
-            </div>
-        );
-    }
-
     let referenceValue = value || defaultValue;
     if (referenceValue?.endsWith('\n')) {
         // In a div, the browser doesn't always count characters at the end of a line when measuring the dimensions
@@ -158,16 +143,15 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
     }
 
     return (
-        <div>
-            {textareaPlaceholder}
+        <div >
             <textarea
                 ref={setTextareaRef}
                 data-testid={id}
                 id={id}
                 {...heightProps}
                 {...otherProps}
+                placeholder={placeholder}
                 role='textbox'
-                aria-label={placeholderAriaLabel}
                 dir='auto'
                 disabled={disabled}
                 onChange={onChange}

webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap

@@ -53,12 +53,15 @@ exports[`components/EditChannelHeaderModal edit direct message channel 1`] = `
     componentClass="div"
   >
     <div>
-      <p>
+      <label
+        className="textarea-label"
+        htmlFor="edit_textbox"
+      >
         <MemoizedFormattedMessage
           defaultMessage="Edit the text appearing next to the channel name in the header."
           id="edit_channel_header_modal.description"
         />
-      </p>
+      </label>
       <div
         className="textarea-wrapper"
       >
@@ -183,12 +186,15 @@ exports[`components/EditChannelHeaderModal error with intl message 1`] = `
     componentClass="div"
   >
     <div>
-      <p>
+      <label
+        className="textarea-label"
+        htmlFor="edit_textbox"
+      >
         <MemoizedFormattedMessage
           defaultMessage="Edit the text appearing next to the channel name in the header."
           id="edit_channel_header_modal.description"
         />
-      </p>
+      </label>
       <div
         className="textarea-wrapper"
       >
@@ -331,12 +337,15 @@ exports[`components/EditChannelHeaderModal error without intl message 1`] = `
     componentClass="div"
   >
     <div>
-      <p>
+      <label
+        className="textarea-label"
+        htmlFor="edit_textbox"
+      >
         <MemoizedFormattedMessage
           defaultMessage="Edit the text appearing next to the channel name in the header."
           id="edit_channel_header_modal.description"
         />
-      </p>
+      </label>
       <div
         className="textarea-wrapper"
       >
@@ -471,12 +480,15 @@ exports[`components/EditChannelHeaderModal should match snapshot, init 1`] = `
     componentClass="div"
   >
     <div>
-      <p>
+      <label
+        className="textarea-label"
+        htmlFor="edit_textbox"
+      >
         <MemoizedFormattedMessage
           defaultMessage="Edit the text appearing next to the channel name in the header."
           id="edit_channel_header_modal.description"
         />
-      </p>
+      </label>
       <div
         className="textarea-wrapper"
       >
@@ -601,12 +613,15 @@ exports[`components/EditChannelHeaderModal submitted 1`] = `
     componentClass="div"
   >
     <div>
-      <p>
+      <label
+        className="textarea-label"
+        htmlFor="edit_textbox"
+      >
         <MemoizedFormattedMessage
           defaultMessage="Edit the text appearing next to the channel name in the header."
           id="edit_channel_header_modal.description"
         />
-      </p>
+      </label>
       <div
         className="textarea-wrapper"
       >

webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx

@@ -227,12 +227,15 @@ export class EditChannelHeaderModal extends React.PureComponent<Props, State> {
                 </Modal.Header>
                 <Modal.Body bsClass='modal-body edit-modal-body'>
                     <div>
-                        <p>
+                        <label
+                            htmlFor='edit_textbox'
+                            className='textarea-label'
+                        >
                             <FormattedMessage
                                 id='edit_channel_header_modal.description'
                                 defaultMessage='Edit the text appearing next to the channel name in the header.'
                             />
-                        </p>
+                        </label>
                         <div className='textarea-wrapper'>
                             <Textbox
                                 value={this.state.header!}

webapp/channels/src/sass/components/_modal.scss

@@ -57,6 +57,11 @@
     .edit-modal-body {
         overflow: visible;
 
+        .textarea-label {
+            margin-bottom: 10px;
+            font-weight: 400;
+        }
+
         .custom-textarea {
             height: auto;
             min-height: 8em;

webapp/channels/src/sass/components/_post.scss

@@ -26,6 +26,11 @@
             background: #ffffac !important;
             color: #d04444 !important;
         }
+
+        &::placeholder {
+            text-overflow: ellipsis;
+            white-space: pre;
+        }
     }
 }
 

webapp/channels/src/utils/performance_telemetry/element_identification.test.tsx

@@ -148,6 +148,6 @@ describe('identifyElementRegion', () => {
             expect(identifyElementRegion(screen.getByText(post.message))).toEqual('post');
         });
 
-        expect(identifyElementRegion(screen.getByText('Write to ' + channel.display_name))).toEqual('post_textbox');
+        expect(identifyElementRegion(screen.getByPlaceholderText('Write to ' + channel.display_name))).toEqual('post_textbox');
     });
 });