diff --git a/.changelog/5913-fix-liveregion-card-inputs.md b/.changelog/5913-fix-liveregion-card-inputs.md new file mode 100644 index 0000000000..d47ef8747a --- /dev/null +++ b/.changelog/5913-fix-liveregion-card-inputs.md @@ -0,0 +1,3 @@ +### Fixed + +- Fixed screen readers announcing new Adaptive Card inputs without their labels and values, in PR [#5913](https://github.com/microsoft/BotFramework-WebChat/pull/5913), by [@OEvgeny](https://github.com/OEvgeny) diff --git a/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.inputLabel.html b/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.inputLabel.html new file mode 100644 index 0000000000..4b7c4195dd --- /dev/null +++ b/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.inputLabel.html @@ -0,0 +1,100 @@ + + + + + + + + +
+ + + + diff --git a/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.inputLabel.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.inputLabel.html.snap-1.png new file mode 100644 index 0000000000..cb2a6d359d Binary files /dev/null and b/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.inputLabel.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.inputValue.html b/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.inputValue.html new file mode 100644 index 0000000000..5cb5f84c8a --- /dev/null +++ b/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.inputValue.html @@ -0,0 +1,95 @@ + + + + + + + + +
+ + + + diff --git a/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.inputValue.html.snap-1.png b/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.inputValue.html.snap-1.png new file mode 100644 index 0000000000..0aecc8c64b Binary files /dev/null and b/__tests__/html2/accessibility/liveRegion/attachment/adaptiveCard.inputValue.html.snap-1.png differ diff --git a/packages/bundle/src/adaptiveCards/AttachmentForScreenReader/AdaptiveCardAttachment.js b/packages/bundle/src/adaptiveCards/AttachmentForScreenReader/AdaptiveCardAttachment.js index 9a2d33ada8..90157117a7 100644 --- a/packages/bundle/src/adaptiveCards/AttachmentForScreenReader/AdaptiveCardAttachment.js +++ b/packages/bundle/src/adaptiveCards/AttachmentForScreenReader/AdaptiveCardAttachment.js @@ -182,19 +182,29 @@ const AdaptiveCardAttachment = ({ content }) => { return (
{cardLabel}
+ {/* Inputs are named and pre-filled as in the rendered card: named by their label, otherwise by their placeholder. + The label is not rendered as text, otherwise screen readers read it twice: as text and as the input name. */} {inputs.map((input, index) => input instanceof ChoiceSetInput ? ( ) : input instanceof DateInput ? ( - + ) : input instanceof NumberInput ? ( - + ) : input instanceof OpenUrlAction || input instanceof ShowCardAction || input instanceof SubmitAction ? (
) : input instanceof TextInput ? ( - + ) : input instanceof TimeInput ? ( - + ) : input instanceof ToggleInput ? ( ) : ( false