add aria label to feedback form send box

Author: lexi-taylor

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

@@ -81,6 +81,14 @@
           1000
         );
 
+        // Validate aria labelledby is present for feedback form and matching elements are present
+        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');
+        await pageObjects.verifyDOMIntegrity();
+
         // WHEN: The cancel button is clicked.
         await host.sendTab(2);
         await host.sendKeys('ENTER');

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

@@ -1,7 +1,7 @@
 import { hooks } from 'botframework-webchat-api';
 import { useStyles } from '@msinternal/botframework-webchat-styles/react';
 import React, { memo, useCallback, useEffect, useRef, useState, type FormEventHandler } from 'react';
-
+import useUniqueId from '../../hooks/internal/useUniqueId';
 import Markdownable from '../../Attachment/Text/private/Markdownable';
 import testIds from '../../testIds';
 import { TextArea } from '../../TextArea';
@@ -15,6 +15,9 @@ const { useLocalizer } = hooks;
 function FeedbackForm() {
   const classNames = useStyles(styles);
   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);
@@ -40,21 +43,26 @@ function FeedbackForm() {
     }
   }, [feedbackTextAreaRef, hasFocus, setHasFocus]);
 
+  const textAreaAriaLabelledBy = `${feedbackFormHeaderId} ${textAreaId}${disclaimer ? ` ${disclaimerId}` : ''}`;
+
   return (
     <div className={classNames['feedback-form__form']}>
-      <span className={classNames['feedback-form__form-header']}>{localize('FEEDBACK_FORM_TITLE')}</span>
+      <span className={classNames['feedback-form__form-header']} id={feedbackFormHeaderId}>{localize('FEEDBACK_FORM_TITLE')}</span>
       <div className={classNames['feedback-form__text-box']}>
         <TextArea
+          aria-label={localize('FEEDBACK_FORM_PLACEHOLDER')}
+          aria-labelledby={textAreaAriaLabelledBy}
           className={classNames['feedback-form__text-area']}
           data-testid={testIds.feedbackSendBox}
+          id={textAreaId}
           onInput={handleMessageChange}
           placeholder={localize('FEEDBACK_FORM_PLACEHOLDER')}
           ref={feedbackTextAreaRef}
           startRows={3}
           value={userFeedback}
         />
       </div>
-      {disclaimer && <Markdownable className={classNames['feedback-form__form-footer']} text={disclaimer} />}
+      {disclaimer && <Markdownable id={disclaimerId} className={classNames['feedback-form__form-footer']} text={disclaimer} />}
       <div className={classNames['feedback-form__submission-button-bar']}>
         <button className={classNames['feedback-form__submit-button']} type="submit">
           {localize('FEEDBACK_FORM_SUBMIT_BUTTON_LABEL')}

packages/component/src/Attachment/Text/private/Markdownable.tsx

@@ -6,14 +6,15 @@ import { useRenderMarkdownAsHTML } from '../../../hooks';
 const markdownablePropsSchema = pipe(
   object({
     className: optional(string()),
+    id: optional(string()),
     text: string()
   }),
   readonly()
 );
 
 type MarkdownableProps = InferInput<typeof markdownablePropsSchema>;
 
-function Markdownable({ className, text }: MarkdownableProps) {
+function Markdownable({ className, text, id }: MarkdownableProps) {
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity');
 
   const innerHTML = useMemo<Readonly<{ __html: string }> | undefined>(
@@ -23,9 +24,9 @@ function Markdownable({ className, text }: MarkdownableProps) {
 
   return innerHTML ? (
     // eslint-disable-next-line react/no-danger
-    <span className={className} dangerouslySetInnerHTML={innerHTML} />
+    <span id={id} className={className} dangerouslySetInnerHTML={innerHTML} />
   ) : (
-    <span className={className}>{text}</span>
+    <span id={id} className={className}>{text}</span>
   );
 }
 

packages/component/src/TextArea/TextArea.tsx

@@ -19,6 +19,7 @@ const TextArea = forwardRef<
   HTMLTextAreaElement,
   Readonly<{
     'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
     className?: string | undefined;
     completion?: ReactNode | undefined;
     'data-testid'?: string | undefined;
@@ -32,6 +33,7 @@ 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,8 +87,10 @@ const TextArea = forwardRef<
           <textarea
             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={props['id']}
             onCompositionEnd={handleCompositionEnd}
             onCompositionStart={handleCompositionStart}
             onInput={props.onInput}