[MA-12]: Update aria attributes and tests

Brightscout · Dec 17, 2024 · 8ac7d8e · 8ac7d8e
1 parent a889b4e
commit 8ac7d8e
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 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
@@ -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
@@ -227,15 +227,15 @@ 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
                 {...baseProps}
                 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
@@ -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/...omponents/edit_channel_header_modal/__snapshots__/edit_channel_header_modal.test.tsx.snap b/...omponents/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
@@ -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
@@ -57,6 +57,11 @@
     .edit-modal-body {
         overflow: visible;
 
+        .textarea-label {
+            margin-bottom: 10px;
+            font-weight: 400;
+        }
+
         .custom-textarea {
             height: auto;
             min-height: 8em;