From 8ac7d8e6069a8ce1088a67d410d6ea1f2173b326 Mon Sep 17 00:00:00 2001
From: SaurabhSharma-884 <saurabh.sharma@brightscout.com>
Date: Tue, 17 Dec 2024 14:12:24 +0530
Subject: [PATCH] [MA-12]: Update aria attributes and tests

---
 .../autosize_textarea.test.tsx.snap           |  2 -
 .../advanced_text_editor.test.tsx             | 10 ++---
 .../src/components/autosize_textarea.tsx      |  4 +-
 .../edit_channel_header_modal.test.tsx.snap   | 40 +++----------------
 .../edit_channel_header_modal.tsx             |  6 +--
 .../channels/src/sass/components/_modal.scss  |  5 +++
 6 files changed, 17 insertions(+), 50 deletions(-)

diff --git a/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap b/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
index 6b906e8e04b0..24b1136778b4 100644
--- a/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
@@ -19,8 +19,6 @@ exports[`components/AutosizeTextarea should match snapshot, init 1`] = `
     }
   />
   <textarea
-    aria-label=""
-    aria-labelledby="autosize_textarea_label"
     data-testid="autosize_textarea"
     dir="auto"
     height={0}
diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.test.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.test.tsx
index 9ea50aa1c51d..a56893600cad 100644
--- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.test.tsx
+++ b/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();
diff --git a/webapp/channels/src/components/autosize_textarea.tsx b/webapp/channels/src/components/autosize_textarea.tsx
index 969c0d315a56..ad50cb890c4a 100644
--- a/webapp/channels/src/components/autosize_textarea.tsx
+++ b/webapp/channels/src/components/autosize_textarea.tsx
@@ -131,7 +131,6 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
     }
 
     let textareaPlaceholder = null;
-    const placeholderAriaLabel = placeholder ? placeholder.toLowerCase() : '';
     if (!value && !defaultValue) {
         textareaPlaceholder = (
             <div
@@ -166,9 +165,8 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
                 id={id}
                 {...heightProps}
                 {...otherProps}
+                placeholder={placeholder}
                 role='textbox'
-                aria-label={placeholderAriaLabel}
-                aria-labelledby={`${id}_label`}
                 dir='auto'
                 disabled={disabled}
                 onChange={onChange}
diff --git a/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap b/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap
index 7bc457084cbe..422c4afb2ac3 100644
--- a/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap
+++ b/webapp/channels/src/components/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap
@@ -54,14 +54,8 @@ exports[`components/EditChannelHeaderModal edit direct message channel 1`] = `
   >
     <div>
       <label
+        className="textarea-label"
         htmlFor="edit_textbox"
-        id="edit_textbox_label"
-        style={
-          Object {
-            "fontWeight": "400",
-            "marginBottom": "10px",
-          }
-        }
       >
         <MemoizedFormattedMessage
           defaultMessage="Edit the text appearing next to the channel name in the header."
@@ -193,14 +187,8 @@ exports[`components/EditChannelHeaderModal error with intl message 1`] = `
   >
     <div>
       <label
+        className="textarea-label"
         htmlFor="edit_textbox"
-        id="edit_textbox_label"
-        style={
-          Object {
-            "fontWeight": "400",
-            "marginBottom": "10px",
-          }
-        }
       >
         <MemoizedFormattedMessage
           defaultMessage="Edit the text appearing next to the channel name in the header."
@@ -350,14 +338,8 @@ exports[`components/EditChannelHeaderModal error without intl message 1`] = `
   >
     <div>
       <label
+        className="textarea-label"
         htmlFor="edit_textbox"
-        id="edit_textbox_label"
-        style={
-          Object {
-            "fontWeight": "400",
-            "marginBottom": "10px",
-          }
-        }
       >
         <MemoizedFormattedMessage
           defaultMessage="Edit the text appearing next to the channel name in the header."
@@ -499,14 +481,8 @@ exports[`components/EditChannelHeaderModal should match snapshot, init 1`] = `
   >
     <div>
       <label
+        className="textarea-label"
         htmlFor="edit_textbox"
-        id="edit_textbox_label"
-        style={
-          Object {
-            "fontWeight": "400",
-            "marginBottom": "10px",
-          }
-        }
       >
         <MemoizedFormattedMessage
           defaultMessage="Edit the text appearing next to the channel name in the header."
@@ -638,14 +614,8 @@ exports[`components/EditChannelHeaderModal submitted 1`] = `
   >
     <div>
       <label
+        className="textarea-label"
         htmlFor="edit_textbox"
-        id="edit_textbox_label"
-        style={
-          Object {
-            "fontWeight": "400",
-            "marginBottom": "10px",
-          }
-        }
       >
         <MemoizedFormattedMessage
           defaultMessage="Edit the text appearing next to the channel name in the header."
diff --git a/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx b/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx
index 01b91c445dbe..703f4b779423 100644
--- a/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx
+++ b/webapp/channels/src/components/edit_channel_header_modal/edit_channel_header_modal.tsx
@@ -229,11 +229,7 @@ export class EditChannelHeaderModal extends React.PureComponent<Props, State> {
                     <div>
                         <label
                             htmlFor='edit_textbox'
-                            id='edit_textbox_label'
-                            style={{
-                                fontWeight: '400',
-                                marginBottom: '10px',
-                            }}
+                            className='textarea-label'
                         >
                             <FormattedMessage
                                 id='edit_channel_header_modal.description'
diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index ecc4b9368eae..39289b73b5c5 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/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;