diff --git a/CHANGELOG.md b/CHANGELOG.md index 01c6033d64..89ea184e7f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,10 @@ Legends: ## [Unreleased] +### Added + +- Added `styleOptions.richCardTitleAsHeading` (default `true`) 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) + ### Changed - Removed `markdown-it` and completed migration to `micromark`, in PR [#5825](https://github.com/microsoft/BotFramework-WebChat/pull/5825), by [@compulim](https://github.com/compulim) diff --git a/__tests__/html2/accessibility/attachment/heroCard.heading.html b/__tests__/html2/accessibility/attachment/heroCard.heading.html index 041af67cf2..149770b34b 100644 --- a/__tests__/html2/accessibility/attachment/heroCard.heading.html +++ b/__tests__/html2/accessibility/attachment/heroCard.heading.html @@ -21,12 +21,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..1e2bef9119 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..22cfa0d259 --- /dev/null +++ b/__tests__/html2/accessibility/attachment/heroCard.noHeading.html @@ -0,0 +1,45 @@ + + + + + + + + + +
+ + + 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..41f28c397b 100644 --- a/packages/bundle/src/adaptiveCards/AdaptiveCardsStyleOptions.ts +++ b/packages/bundle/src/adaptiveCards/AdaptiveCardsStyleOptions.ts @@ -25,6 +25,13 @@ type StrictAdaptiveCardsStyleOptions = { * Enable title (and subtitle) wrapping */ richCardWrapTitle: boolean | undefined; + + /** + * Cards: Rich Cards + * When `false`, omits `style: 'heading'` from the title so the rendered TextBlock has no + * `role="heading"` / `aria-level`. Defaults to `true`. See issue #4327. + */ + richCardTitleAsHeading: 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..bb559a5fbc 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 { richCardTitleAsHeading, richCardWrapTitle } = this.styleOptions; this.addTextBlock(content.title, { color: TextColor.Default, size: TextSize.Medium, - style: 'heading', + ...(richCardTitleAsHeading === false ? {} : { 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..ef9f5268bf 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', + richCardTitleAsHeading: true, richCardWrapTitle: false };