diff --git a/e2e-tests/cypress/tests/integration/channels/channel/channel_header_modal_spec.js b/e2e-tests/cypress/tests/integration/channels/channel/channel_header_modal_spec.js
index 484882717231..63c1fb2a32ad 100644
--- a/e2e-tests/cypress/tests/integration/channels/channel/channel_header_modal_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/channel/channel_header_modal_spec.js
@@ -36,13 +36,13 @@ describe('Channel Settings - Channel Header', () => {
             cy.findByText('Edit Channel Header').click();
 
             // # Type something in the header edit box
-            cy.get('[aria-label="edit the channel header..."]').clear().type('This is the new header content');
+            cy.get('textarea[placeholder="Edit the channel header..."]').clear().type('This is the new header content');
 
             // * Verify the "Preview" button exists
             cy.findByText('Preview').should('be.visible');
 
             // * Verify that before hitting the preview button, the style on the textbox is `display: block`
-            cy.get('[aria-label="edit the channel header..."]').should('have.css', 'display', 'block');
+            cy.get('textarea[placeholder="Edit the channel header..."]').should('have.css', 'display', 'block');
 
             // # Click the "Preview" button
             cy.findByText('Preview').click();
@@ -51,7 +51,7 @@ describe('Channel Settings - Channel Header', () => {
             cy.findByText('Edit').should('be.visible');
 
             // * Verify that the display is now none on the textbox element
-            cy.get('[aria-label="edit the channel header..."]').should('have.css', 'display', 'none');
+            cy.get('textarea[placeholder="Edit the channel header..."]').should('have.css', 'display', 'none');
         });
     });
 });
diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts b/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts
index 3ea9f5acd562..4cef7d149dd1 100644
--- a/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts
@@ -122,7 +122,7 @@ describe('Verify Accessibility Support in different input fields', () => {
             cy.apiAddUserToTeam(testTeam.id, user.id).then(() => {
                 cy.apiAddUserToChannel(testChannel.id, user.id).then(() => {
                     // * Verify Accessibility support in post input field
-                    cy.uiGetPostTextBox().should('have.attr', 'aria-label', `write to ${testChannel.display_name}`).clear().focus();
+                    cy.uiGetPostTextBox().should('have.attr', 'placeholder', `Write to ${testChannel.display_name}`).clear().focus();
 
                     // # Ensure User list is cached once in UI
                     cy.uiGetPostTextBox().type('@').wait(TIMEOUTS.FIVE_SEC);
@@ -168,7 +168,7 @@ describe('Verify Accessibility Support in different input fields', () => {
     it('MM-T1458 Verify Accessibility Support in Main Post Input', () => {
         cy.get('#advancedTextEditorCell').within(() => {
             // * Verify Accessibility Support in Main Post input
-            cy.uiGetPostTextBox().should('have.attr', 'aria-label', `write to ${testChannel.display_name}`).and('have.attr', 'role', 'textbox').clear().focus().type('test');
+            cy.uiGetPostTextBox().should('have.attr', 'placeholder', `Write to ${testChannel.display_name}`).and('have.attr', 'role', 'textbox').clear().focus().type('test');
 
             // # Set a11y focus on the textbox
             cy.get('#FormattingControl_bold').focus().tab({shift: true});
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 9ba53896432d..6d20a8a716bd 100644
--- a/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
+++ b/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}
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 58ba8888df39..f7d177222f0e 100644
--- a/webapp/channels/src/components/autosize_textarea.tsx
+++ b/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}
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 617d24e61b81..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
@@ -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"
       >
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 8dbb2b02f41c..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
@@ -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!}
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;
diff --git a/webapp/channels/src/sass/components/_post.scss b/webapp/channels/src/sass/components/_post.scss
index 24bce23364ed..22b8931b2bd8 100644
--- a/webapp/channels/src/sass/components/_post.scss
+++ b/webapp/channels/src/sass/components/_post.scss
@@ -26,6 +26,11 @@
             background: #ffffac !important;
             color: #d04444 !important;
         }
+
+        &::placeholder {
+            text-overflow: ellipsis;
+            white-space: pre;
+        }
     }
 }
 
diff --git a/webapp/channels/src/utils/performance_telemetry/element_identification.test.tsx b/webapp/channels/src/utils/performance_telemetry/element_identification.test.tsx
index 29ae19874558..27aa17e91ecf 100644
--- a/webapp/channels/src/utils/performance_telemetry/element_identification.test.tsx
+++ b/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');
     });
 });