diff --git a/CHANGELOG.md b/CHANGELOG.md index 152d426838..88b2c013b2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -62,6 +62,7 @@ Legends: - Fixed screen readers announcing a single audio, video, or animation in a card as a list item, such as "1 of 1", fixes [#5722](https://github.com/microsoft/BotFramework-WebChat/issues/5722), in PR [#5903](https://github.com/microsoft/BotFramework-WebChat/pull/5903), by [@OEvgeny](https://github.com/OEvgeny) - Fixed video and animation cards disappearing in production builds when the video URL is relative or invalid, in PR [#5889](https://github.com/microsoft/BotFramework-WebChat/pull/5889), by [@OEvgeny](https://github.com/OEvgeny) - Fixed timestamps always using the 12-hour clock, such as "4:41 PM" instead of "16:41" in German, in PR [#5920](https://github.com/microsoft/BotFramework-WebChat/pull/5920), by [@OEvgeny](https://github.com/OEvgeny) +- Fixed the "message" and "attachment" role descriptions being hard-coded in English, in PR [#5916](https://github.com/microsoft/BotFramework-WebChat/pull/5916), by [@OEvgeny](https://github.com/OEvgeny) ## [4.19.2] - 2026-10-08 diff --git a/__tests__/html2/accessibility/aria-roledescription.localized.html b/__tests__/html2/accessibility/aria-roledescription.localized.html new file mode 100644 index 0000000000..c610a57080 --- /dev/null +++ b/__tests__/html2/accessibility/aria-roledescription.localized.html @@ -0,0 +1,124 @@ + + + + + + + + +
+ + + + diff --git a/__tests__/html2/accessibility/aria-roledescription.localized.html.snap-1.png b/__tests__/html2/accessibility/aria-roledescription.localized.html.snap-1.png new file mode 100644 index 0000000000..752884be7d Binary files /dev/null and b/__tests__/html2/accessibility/aria-roledescription.localized.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/aria-roledescription.localized.html.snap-2.png b/__tests__/html2/accessibility/aria-roledescription.localized.html.snap-2.png new file mode 100644 index 0000000000..5c12030c87 Binary files /dev/null and b/__tests__/html2/accessibility/aria-roledescription.localized.html.snap-2.png differ diff --git a/packages/api/src/localization/en-US.json b/packages/api/src/localization/en-US.json index 4a978b61e5..20150c647b 100644 --- a/packages/api/src/localization/en-US.json +++ b/packages/api/src/localization/en-US.json @@ -12,6 +12,10 @@ "_ACTIVITY_YOU_SAID_ALT.comment": "This is for screen reader only.", "ACTIVITY_BOT_ATTACHED_ALT": "Bot attached:", "_ACTIVITY_BOT_ATTACHED_ALT.comment": "This is for screen reader and is narrated before each attachments sent by the bot.", + "ACTIVITY_ATTACHMENT_ARIA_ROLE_ALT": "attachment", + "_ACTIVITY_ATTACHMENT_ARIA_ROLE_ALT.comment": "This is for screen reader for the aria-roledescription of each attachment in a message, narrated as the type of the element.", + "ACTIVITY_MESSAGE_ARIA_ROLE_ALT": "message", + "_ACTIVITY_MESSAGE_ARIA_ROLE_ALT.comment": "This is for screen reader for the aria-roledescription of the text of a message, narrated as the type of the element.", "ACTIVITY_CODE_ALT": "Code sample: $1", "_ACTIVITY_CODE_ALT.comment": "This is for screen reader code sample dialog label, $1 is the dialog title.", "ACTIVITY_CONTENT_CAUTION": "AI-generated content may be incorrect", diff --git a/packages/component/src/Activity/AttachmentRow.tsx b/packages/component/src/Activity/AttachmentRow.tsx index 5200185893..860bc287f6 100644 --- a/packages/component/src/Activity/AttachmentRow.tsx +++ b/packages/component/src/Activity/AttachmentRow.tsx @@ -1,14 +1,17 @@ -import { reactNode, validateProps } from '@msinternal/botframework-webchat-react-valibot'; +import { reactNode, validateProps, type InferReactProps } from '@msinternal/botframework-webchat-react-valibot'; import { useStyles } from '@msinternal/botframework-webchat-styles/react'; +import { hooks } from 'botframework-webchat-api'; import cx from 'classnames'; import React, { memo } from 'react'; -import { boolean, object, optional, pipe, readonly, string, type InferInput } from 'valibot'; +import { boolean, object, optional, pipe, readonly, string } from 'valibot'; import ScreenReaderText from '../ScreenReaderText'; import Bubble from './Bubble'; import styles from './StackedLayout.module.css'; +const { useLocalizer } = hooks; + const attachmentRowPropsSchema = pipe( object({ attachedAlt: string(), @@ -21,7 +24,7 @@ const attachmentRowPropsSchema = pipe( readonly() ); -type AttachmentRowProps = InferInput; +type AttachmentRowProps = InferReactProps; function AttachmentRow(props: AttachmentRowProps) { const { @@ -33,9 +36,14 @@ function AttachmentRow(props: AttachmentRowProps) { showBubble = true } = validateProps(attachmentRowPropsSchema, props); const classNames = useStyles(styles); + const localize = useLocalizer(); return ( -
+
{showBubble ? (
{!!activityDisplayText && ( -
+
{!!(hasDisplayText || messageThing?.abstract[0]) && ( -
+