From a889b4e8a0d39eb61e08350ffdbfff9d350e8ab8 Mon Sep 17 00:00:00 2001
From: SaurabhSharma-884 <saurabh.sharma@brightscout.com>
Date: Mon, 9 Dec 2024 12:57:35 +0530
Subject: [PATCH 1/3] [MA-12]: Add label to form field in channel header

---
 .../autosize_textarea.test.tsx.snap           |  1 +
 .../src/components/autosize_textarea.tsx      |  1 +
 .../edit_channel_header_modal.test.tsx.snap   | 65 ++++++++++++++++---
 .../edit_channel_header_modal.tsx             | 11 +++-
 4 files changed, 66 insertions(+), 12 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 9ba53896432..6b906e8e04b 100644
--- a/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
@@ -20,6 +20,7 @@ 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/autosize_textarea.tsx b/webapp/channels/src/components/autosize_textarea.tsx
index 58ba8888df3..969c0d315a5 100644
--- a/webapp/channels/src/components/autosize_textarea.tsx
+++ b/webapp/channels/src/components/autosize_textarea.tsx
@@ -168,6 +168,7 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
                 {...otherProps}
                 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 617d24e61b8..7bc457084cb 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,21 @@ exports[`components/EditChannelHeaderModal edit direct message channel 1`] = `
     componentClass="div"
   >
     <div>
-      <p>
+      <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."
           id="edit_channel_header_modal.description"
         />
-      </p>
+      </label>
       <div
         className="textarea-wrapper"
       >
@@ -183,12 +192,21 @@ exports[`components/EditChannelHeaderModal error with intl message 1`] = `
     componentClass="div"
   >
     <div>
-      <p>
+      <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."
           id="edit_channel_header_modal.description"
         />
-      </p>
+      </label>
       <div
         className="textarea-wrapper"
       >
@@ -331,12 +349,21 @@ exports[`components/EditChannelHeaderModal error without intl message 1`] = `
     componentClass="div"
   >
     <div>
-      <p>
+      <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."
           id="edit_channel_header_modal.description"
         />
-      </p>
+      </label>
       <div
         className="textarea-wrapper"
       >
@@ -471,12 +498,21 @@ exports[`components/EditChannelHeaderModal should match snapshot, init 1`] = `
     componentClass="div"
   >
     <div>
-      <p>
+      <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."
           id="edit_channel_header_modal.description"
         />
-      </p>
+      </label>
       <div
         className="textarea-wrapper"
       >
@@ -601,12 +637,21 @@ exports[`components/EditChannelHeaderModal submitted 1`] = `
     componentClass="div"
   >
     <div>
-      <p>
+      <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."
           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 8dbb2b02f41..01b91c445db 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,19 @@ export class EditChannelHeaderModal extends React.PureComponent<Props, State> {
                 </Modal.Header>
                 <Modal.Body bsClass='modal-body edit-modal-body'>
                     <div>
-                        <p>
+                        <label
+                            htmlFor='edit_textbox'
+                            id='edit_textbox_label'
+                            style={{
+                                fontWeight: '400',
+                                marginBottom: '10px',
+                            }}
+                        >
                             <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!}

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 2/3] [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 6b906e8e04b..24b1136778b 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 9ea50aa1c51..a56893600ca 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 969c0d315a5..ad50cb890c4 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 7bc457084cb..422c4afb2ac 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 01b91c445db..703f4b77942 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 ecc4b9368ea..39289b73b5c 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;

From 10c4a4fca8866da0f2714dcb4e97adf3febfd1dd Mon Sep 17 00:00:00 2001
From: SaurabhSharma-884 <saurabh.sharma@brightscout.com>
Date: Fri, 20 Dec 2024 13:12:59 +0530
Subject: [PATCH 3/3] [MA-12]: Update snapshots, fix e2e test

---
 .../channel/channel_header_modal_spec.js        |  6 +++---
 .../accessibility_input_fields_spec.ts          |  4 ++--
 .../autosize_textarea.test.tsx.snap             | 16 ----------------
 .../src/components/autosize_textarea.tsx        | 17 +----------------
 webapp/channels/src/sass/components/_post.scss  |  5 +++++
 .../element_identification.test.tsx             |  2 +-
 6 files changed, 12 insertions(+), 38 deletions(-)

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 48488271723..63c1fb2a32a 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 3ea9f5acd56..4cef7d149dd 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 24b1136778b..6d20a8a716b 100644
--- a/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/autosize_textarea.test.tsx.snap
@@ -2,22 +2,6 @@
 
 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
     data-testid="autosize_textarea"
     dir="auto"
diff --git a/webapp/channels/src/components/autosize_textarea.tsx b/webapp/channels/src/components/autosize_textarea.tsx
index ad50cb890c4..f7d177222f0 100644
--- a/webapp/channels/src/components/autosize_textarea.tsx
+++ b/webapp/channels/src/components/autosize_textarea.tsx
@@ -130,20 +130,6 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
         heightProps.height = height.current;
     }
 
-    let textareaPlaceholder = null;
-    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
@@ -157,8 +143,7 @@ const AutosizeTextarea = React.forwardRef<HTMLTextAreaElement, Props>(({
     }
 
     return (
-        <div>
-            {textareaPlaceholder}
+        <div >
             <textarea
                 ref={setTextareaRef}
                 data-testid={id}
diff --git a/webapp/channels/src/sass/components/_post.scss b/webapp/channels/src/sass/components/_post.scss
index 24bce23364e..22b8931b2bd 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 29ae1987455..27aa17e91ec 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');
     });
 });