diff --git a/CHANGELOG.md b/CHANGELOG.md index e9851c4358..3e89adc708 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,11 @@ Legends: ## [Unreleased] +### Added + +- Added `styleOptions.richCardTitleOmitHeadingRole` (default `false`) to opt out of `style: 'heading'` on rich card titles, in PR [#5839](https://github.com/microsoft/BotFramework-WebChat/pull/5839), by [@cjennison](https://github.com/cjennison) + + ## [4.19.1] - 2026-06-09 ### Changed diff --git a/__tests__/html2/accessibility/attachment/heading-indicator.css b/__tests__/html2/accessibility/attachment/heading-indicator.css new file mode 100644 index 0000000000..81ec2ee7a4 --- /dev/null +++ b/__tests__/html2/accessibility/attachment/heading-indicator.css @@ -0,0 +1,4 @@ +[role='heading'] { + background-color: yellow !important; + outline: dashed 2px Red !important; +} diff --git a/__tests__/html2/accessibility/attachment/heroCard.heading.html b/__tests__/html2/accessibility/attachment/heroCard.heading.html index 041af67cf2..6cd40f2e24 100644 --- a/__tests__/html2/accessibility/attachment/heroCard.heading.html +++ b/__tests__/html2/accessibility/attachment/heroCard.heading.html @@ -2,6 +2,7 @@ + @@ -21,12 +22,21 @@ await pageObjects.sendMessageViaSendBox('herocard', { waitForSend: true }); await pageConditions.minNumActivitiesShown(2); + await pageConditions.allImagesLoaded(); await pageConditions.scrollToBottomCompleted(); - expect(document.querySelector('.ac-textBlock[role="heading"]')).toHaveProperty( - 'innerText', - '\u200BDetails about image 1\u200B' + const heroCardActivity = Array.from(webChatElement.querySelectorAll('.webchat__basic-transcript__activity')).find( + (activity) => !!activity.querySelector('.ac-textBlock') ); + expect(heroCardActivity).toBeTruthy(); + + const titleTextBlock = Array.from(heroCardActivity.querySelectorAll('.ac-textBlock')).find( + (block) => block.innerText === '\u200BDetails about image 1\u200B' + ); + expect(titleTextBlock).toBeTruthy(); + expect(titleTextBlock.getAttribute('role')).toBe('heading'); + + await host.snapshot('local'); }); diff --git a/__tests__/html2/accessibility/attachment/heroCard.heading.html.snap-1.png b/__tests__/html2/accessibility/attachment/heroCard.heading.html.snap-1.png new file mode 100644 index 0000000000..c81927b091 Binary files /dev/null and b/__tests__/html2/accessibility/attachment/heroCard.heading.html.snap-1.png differ diff --git a/__tests__/html2/accessibility/attachment/heroCard.noHeading.html b/__tests__/html2/accessibility/attachment/heroCard.noHeading.html new file mode 100644 index 0000000000..4693eb3bd0 --- /dev/null +++ b/__tests__/html2/accessibility/attachment/heroCard.noHeading.html @@ -0,0 +1,46 @@ + + + + + + + + + + +
+ + + diff --git a/__tests__/html2/accessibility/attachment/heroCard.noHeading.html.snap-1.png b/__tests__/html2/accessibility/attachment/heroCard.noHeading.html.snap-1.png new file mode 100644 index 0000000000..1e2bef9119 Binary files /dev/null and b/__tests__/html2/accessibility/attachment/heroCard.noHeading.html.snap-1.png differ diff --git a/packages/bundle/src/adaptiveCards/AdaptiveCardsStyleOptions.ts b/packages/bundle/src/adaptiveCards/AdaptiveCardsStyleOptions.ts index b63949f4af..6e83467a61 100644 --- a/packages/bundle/src/adaptiveCards/AdaptiveCardsStyleOptions.ts +++ b/packages/bundle/src/adaptiveCards/AdaptiveCardsStyleOptions.ts @@ -25,6 +25,14 @@ type StrictAdaptiveCardsStyleOptions = { * Enable title (and subtitle) wrapping */ richCardWrapTitle: boolean | undefined; + + /** + * Cards: Rich Cards + * When `true`, omits `style: 'heading'` from the title so the rendered TextBlock has no + * `role="heading"` / `aria-level`. Defaults to `false` (existing behavior keeps the heading + * style; see issue #4327). + */ + richCardTitleOmitHeadingRole: boolean | undefined; }; type AdaptiveCardsStyleOptions = Partial; diff --git a/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardBuilder.ts b/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardBuilder.ts index 34246d4a51..b48cadffed 100644 --- a/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardBuilder.ts +++ b/packages/bundle/src/adaptiveCards/Attachment/AdaptiveCardBuilder.ts @@ -119,11 +119,11 @@ export default class AdaptiveCardBuilder { } addCommonHeaders(content: ICommonContent) { - const { richCardWrapTitle } = this.styleOptions; + const { richCardTitleOmitHeadingRole, richCardWrapTitle } = this.styleOptions; this.addTextBlock(content.title, { + ...(richCardTitleOmitHeadingRole ? {} : { style: 'heading' }), color: TextColor.Default, size: TextSize.Medium, - style: 'heading', weight: TextWeight.Bolder, wrap: richCardWrapTitle }); diff --git a/packages/bundle/src/adaptiveCards/defaultStyleOptions.ts b/packages/bundle/src/adaptiveCards/defaultStyleOptions.ts index b327208656..d3ff62377b 100644 --- a/packages/bundle/src/adaptiveCards/defaultStyleOptions.ts +++ b/packages/bundle/src/adaptiveCards/defaultStyleOptions.ts @@ -5,6 +5,7 @@ const ADAPTIVE_CARDS_DEFAULT_STYLE_OPTIONS: Required cardEmphasisBackgroundColor: '#F9F9F9', cardPushButtonBackgroundColor: '#0063B1', cardPushButtonTextColor: 'White', + richCardTitleOmitHeadingRole: false, richCardWrapTitle: false };