Feedback form aria-label computed value does not match on screen text (#5567)

* add aria label to feedback form send box

* add changelog entry

* add eslint disables

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

Co-authored-by: Eugene <EOlonov@gmail.com>

* fix issues where textarea was repeating

* fix test

* fix duplication in narrator

* fix tests

* update changelog

---------

Co-authored-by: Eugene <EOlonov@gmail.com>

Author: lexi-taylor

CHANGELOG.md

@@ -98,7 +98,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Added support of [contentless activity in livestream](https://github.com/microsoft/BotFramework-WebChat/blob/main/docs/LIVESTREAMING.md#scenario-3-interim-activities-with-no-content), in PR [#5430](https://github.com/microsoft/BotFramework-WebChat/pull/5430), by [@compulim](https://github.com/compulim)
 - Added sliding dots typing indicator in Fluent theme, in PR [#5447](https://github.com/microsoft/BotFramework-WebChat/pull/5447) and PR [#5448](https://github.com/microsoft/BotFramework-WebChat/pull/5448), by [@compulim](https://github.com/compulim)
 - (Experimental) Add an ability to pass `completion` prop into Fluent send box and expose the component, in PR [#5466](https://github.com/microsoft/BotFramework-WebChat/pull/5466), by [@OEvgeny](https://github.com/OEvgeny)
-- Added feedback form for like/dislike button when `feedbackActionsPlacement` is `"activity-actions"`, in PR [#5460](https://github.com/microsoft/BotFramework-WebChat/pull/5460), PR [#5469](https://github.com/microsoft/BotFramework-WebChat/pull/5469), PR [5470](https://github.com/microsoft/BotFramework-WebChat/pull/5470) and PR [#5501](https://github.com/microsoft/BotFramework-WebChat/pull/5501) by [@lexi-taylor](https://github.com/lexi-taylor) and [@OEvgeny](https://github.com/OEvgeny)
+- Added feedback form for like/dislike button when `feedbackActionsPlacement` is `"activity-actions"`, in PR [#5460](https://github.com/microsoft/BotFramework-WebChat/pull/5460), PR [#5469](https://github.com/microsoft/BotFramework-WebChat/pull/5469), PR [5470](https://github.com/microsoft/BotFramework-WebChat/pull/5470), PR [#5501](https://github.com/microsoft/BotFramework-WebChat/pull/5501) by [@lexi-taylor](https://github.com/lexi-taylor), and [@OEvgeny](https://github.com/OEvgeny)
    - <kbd>ESCAPE</kbd> key should reset the feedback form, in PR [#5480](https://github.com/microsoft/BotFramework-WebChat/pull/5480), by [@compulim](https://github.com/compulim), in PR [#5493](https://github.com/microsoft/BotFramework-WebChat/pull/5493) by [@lexi-taylor](https://github.com/lexi-taylor)
 - Added multi-dimensional grouping, `styleOptions.groupActivitiesBy`, and `useGroupActivitiesByName` hook, in PR [#5471](https://github.com/microsoft/BotFramework-WebChat/pull/5471), by [@compulim](https://github.com/compulim)
    - Existing behavior will be kept and activities will be grouped by `sender` followed by `status`
@@ -299,6 +299,7 @@ Notes: web developers are advised to use [`~` (tilde range)](https://github.com/
 - Updated file-based import with `.js` extension and removed the file extension from build config, by [@compulim](https://github.com/compulim), in PR [#5516](https://github.com/microsoft/BotFramework-WebChat/pull/5516)
 - Fixed [#5518](https://github.com/microsoft/BotFramework-WebChat/issues/5518). Minimal bundled build should work properly, in PR [#5507](https://github.com/microsoft/BotFramework-WebChat/pull/5507), by [@compulim](https://github.com/compulim)
 - Fixed [#5520](https://github.com/microsoft/BotFramework-WebChat/issues/5520). Version information should be injected when installed via npm, in PR [#5521](https://github.com/microsoft/BotFramework-WebChat/pull/5521), by [@compulim](https://github.com/compulim)
+- Fixed aria-label only announcing placeholder in feedback form, in PR [#5567](https://github.com/microsoft/BotFramework-WebChat/pull/5567)
 - Fixed placing focus on the code block content, so it is possible to scroll code via keyboard, in PR [#5575](https://github.com/microsoft/BotFramework-WebChat/pull/5575), by [@OEvgeny](https://github.com/OEvgeny)
 
 ### Removed

__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');
+        const ariaDescribedBy = feedbackFormSendBox.getAttribute('aria-describedby');
+        expect(ariaDescribedBy).toContain('feedback-form__form-footer__id');
+        await pageObjects.verifyDOMIntegrity();
+
         // WHEN: The cancel button is clicked.
         await host.sendTab(2);
         await host.sendKeys('ENTER');

__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-1.png

@@ -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,8 @@ 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 [selectedAction] = useSelectedAction();
   const [hasFocus, setHasFocus] = useState(false);
@@ -42,9 +44,18 @@ function FeedbackForm() {
 
   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" is required for "aria-labelledby"
+        // eslint-disable-next-line react/forbid-dom-props
+        id={feedbackFormHeaderId}
+      >
+        {localize('FEEDBACK_FORM_TITLE')}
+      </span>
       <div className={classNames['feedback-form__text-box']}>
         <TextArea
+          aria-describedby={disclaimer ? disclaimerId : undefined}
+          aria-labelledby={feedbackFormHeaderId}
           className={classNames['feedback-form__text-area']}
           data-testid={testIds.feedbackSendBox}
           onInput={handleMessageChange}
@@ -54,7 +65,9 @@ function FeedbackForm() {
           value={userFeedback}
         />
       </div>
-      {disclaimer && <Markdownable className={classNames['feedback-form__form-footer']} text={disclaimer} />}
+      {disclaimer && (
+        <Markdownable className={classNames['feedback-form__form-footer']} id={disclaimerId} 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')}

__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-1.png

@@ -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, id, text }: MarkdownableProps) {
   const renderMarkdownAsHTML = useRenderMarkdownAsHTML('message activity');
 
   const innerHTML = useMemo<Readonly<{ __html: string }> | undefined>(
@@ -22,10 +23,15 @@ function Markdownable({ className, text }: MarkdownableProps) {
   );
 
   return innerHTML ? (
-    // eslint-disable-next-line react/no-danger
-    <span className={className} dangerouslySetInnerHTML={innerHTML} />
+    // "id" is required for "aria-labelledby"
+    // eslint-disable-next-line react/forbid-dom-props, react/no-danger
+    <span className={className} dangerouslySetInnerHTML={innerHTML} id={id} />
   ) : (
-    <span className={className}>{text}</span>
+    // "id" is required for "aria-labelledby"
+    // eslint-disable-next-line react/forbid-dom-props
+    <span className={className} id={id}>
+      {text}
+    </span>
   );
 }
 

__tests__/html2/fluentTheme/feedbackForm.noDisclaimer.html.snap-1.png

@@ -18,7 +18,8 @@ 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;
     'data-testid'?: string | undefined;
@@ -80,11 +81,13 @@ const TextArea = forwardRef<
       ) : (
         <Fragment>
           <div className={cx(classNames['text-area-doppelganger'], classNames['text-area-shared'])}>
-            {props.completion ? props.completion : props.value || props.placeholder}{' '}
+            {props.completion ? props.completion : props.value}{' '}
           </div>
           <textarea
+            aria-describedby={props['aria-describedby']}
             aria-disabled={disabled}
-            aria-label={props['aria-label']}
+            aria-labelledby={props['aria-labelledby']}
+            aria-placeholder={props.placeholder}
             className={cx(classNames['text-area-input'], classNames['text-area-shared'])}
             data-testid={props['data-testid']}
             onCompositionEnd={handleCompositionEnd}