diff --git a/CHANGELOG.md b/CHANGELOG.md index f920c41957..3b1fc136c7 100644 --- a/CHANGELOG.md +++ b/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) - ESCAPE 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 diff --git a/__tests__/html2/feedbackForm/feedback.form.activity.html b/__tests__/html2/feedbackForm/feedback.form.activity.html index ba7c1c9dd2..5f0495cab9 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'); + 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'); diff --git a/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-1.png b/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-1.png index ee393cc716..31eab64b49 100644 Binary files a/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-1.png and b/__tests__/html2/fluentTheme/defaultFeedback.activity.dark.html.snap-1.png differ diff --git a/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-1.png b/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-1.png index bb1f8fdc08..783f2cac77 100644 Binary files a/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-1.png and b/__tests__/html2/fluentTheme/defaultFeedback.activity.html.snap-1.png differ diff --git a/__tests__/html2/fluentTheme/feedbackForm.noDisclaimer.html.snap-1.png b/__tests__/html2/fluentTheme/feedbackForm.noDisclaimer.html.snap-1.png index a93485dcbf..cb19516c93 100644 Binary files a/__tests__/html2/fluentTheme/feedbackForm.noDisclaimer.html.snap-1.png and b/__tests__/html2/fluentTheme/feedbackForm.noDisclaimer.html.snap-1.png differ diff --git a/packages/component/src/ActivityFeedback/private/FeedbackForm.tsx b/packages/component/src/ActivityFeedback/private/FeedbackForm.tsx index 02234e71c2..c391ce9735 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,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 (
- {localize('FEEDBACK_FORM_TITLE')} + + {localize('FEEDBACK_FORM_TITLE')} +