fix issues where textarea was repeating

Author: lexi-taylor

__tests__/html2/feedbackForm/feedback.form.activity.html

@@ -85,8 +85,8 @@
         const feedbackFormSendBox = pageElements.byTestId('feedback sendbox');
         const ariaLabelledBy = feedbackFormSendBox.getAttribute('aria-labelledby');
         expect(ariaLabelledBy).toContain('feedback-form__form-header__id');
-        expect(ariaLabelledBy).toContain('feedback-form__form-footer__id');
-        expect(ariaLabelledBy).toContain('feedback-form__text-area__id');
+        const ariaDescribedBy = feedbackFormSendBox.getAttribute('aria-describedby');
+        expect(ariaDescribedBy).toContain('feedback-form__disclaimer__id');
         await pageObjects.verifyDOMIntegrity();
 
         // WHEN: The cancel button is clicked.

packages/component/src/ActivityFeedback/private/FeedbackForm.tsx

@@ -17,7 +17,6 @@ function FeedbackForm() {
   const { useFeedbackText, useSelectedAction } = useActivityFeedbackHooks();
   const feedbackFormHeaderId = useUniqueId('feedback-form__form-header__id');
   const disclaimerId = useUniqueId('feedback-form__form-footer__id');
-  const textAreaId = useUniqueId('feedback-form__text-area__id');
 
   const [selectedAction] = useSelectedAction();
   const [hasFocus, setHasFocus] = useState(false);
@@ -43,8 +42,6 @@ function FeedbackForm() {
     }
   }, [feedbackTextAreaRef, hasFocus, setHasFocus]);
 
-  const textAreaAriaLabelledBy = `${feedbackFormHeaderId} ${textAreaId}${disclaimer ? ` ${disclaimerId}` : ''}`;
-
   return (
     <div className={classNames['feedback-form__form']}>
       <span
@@ -57,11 +54,10 @@ function FeedbackForm() {
       </span>
       <div className={classNames['feedback-form__text-box']}>
         <TextArea
-          aria-label={localize('FEEDBACK_FORM_PLACEHOLDER')}
-          aria-labelledby={textAreaAriaLabelledBy}
+          aria-describedby={disclaimer ? disclaimerId : undefined}
+          aria-labelledby={feedbackFormHeaderId}
           className={classNames['feedback-form__text-area']}
           data-testid={testIds.feedbackSendBox}
-          id={textAreaId}
           onInput={handleMessageChange}
           placeholder={localize('FEEDBACK_FORM_PLACEHOLDER')}
           ref={feedbackTextAreaRef}

packages/component/src/TextArea/TextArea.tsx

@@ -18,7 +18,7 @@ const { useUIState } = hooks;
 const TextArea = forwardRef<
   HTMLTextAreaElement,
   Readonly<{
-    'aria-label'?: string | undefined;
+    'aria-describedby'?: string | undefined;
     'aria-labelledby'?: string | undefined;
     className?: string | undefined;
     completion?: ReactNode | undefined;
@@ -33,7 +33,6 @@ const TextArea = forwardRef<
      *   This ensures the flow of focus did not sent to document body
      */
     hidden?: boolean | undefined;
-    id?: string | undefined;
     onInput?: FormEventHandler<HTMLTextAreaElement> | undefined;
     placeholder?: string | undefined;
     startRows?: number | undefined;
@@ -85,14 +84,11 @@ const TextArea = forwardRef<
             {props.completion ? props.completion : props.value || props.placeholder}{' '}
           </div>
           <textarea
+            aria-describedby={props['aria-describedby']}
             aria-disabled={disabled}
-            aria-label={props['aria-label']}
             aria-labelledby={props['aria-labelledby']}
             className={cx(classNames['text-area-input'], classNames['text-area-shared'])}
             data-testid={props['data-testid']}
-            // "id" is required for "aria-labelledby"
-            // eslint-disable-next-line react/forbid-dom-props
-            id={props['id']}
             onCompositionEnd={handleCompositionEnd}
             onCompositionStart={handleCompositionStart}
             onInput={props.onInput}