From 3aa878512f42786312acf282e1c095639c8f407e Mon Sep 17 00:00:00 2001 From: Lexi Taylor Date: Tue, 2 Sep 2025 18:22:29 +0000 Subject: [PATCH 1/9] add aria label to feedback form send box --- .../html2/feedbackForm/feedback.form.activity.html | 8 ++++++++ .../src/ActivityFeedback/private/FeedbackForm.tsx | 14 +++++++++++--- .../src/Attachment/Text/private/Markdownable.tsx | 7 ++++--- packages/component/src/TextArea/TextArea.tsx | 4 ++++ 4 files changed, 27 insertions(+), 6 deletions(-) diff --git a/__tests__/html2/feedbackForm/feedback.form.activity.html b/__tests__/html2/feedbackForm/feedback.form.activity.html index ba7c1c9dd2..14f4ca85b2 100644 --- a/__tests__/html2/feedbackForm/feedback.form.activity.html +++ b/__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'); diff --git a/packages/component/src/ActivityFeedback/private/FeedbackForm.tsx b/packages/component/src/ActivityFeedback/private/FeedbackForm.tsx index 02234e71c2..c52ef9d471 100644 --- a/packages/component/src/ActivityFeedback/private/FeedbackForm.tsx +++ b/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,13 +43,18 @@ function FeedbackForm() { } }, [feedbackTextAreaRef, hasFocus, setHasFocus]); + const textAreaAriaLabelledBy = `${feedbackFormHeaderId} ${textAreaId}${disclaimer ? ` ${disclaimerId}` : ''}`; + return (
- {localize('FEEDBACK_FORM_TITLE')} + {localize('FEEDBACK_FORM_TITLE')}