[Eugene (OEvgeny)]

Continues the CSS Modules migration (#6024, #6028, #6030–#6032, #6036, #6044, #6050) with the local styles of 4 small components.

Changelog Entry

Changed

• Converted the screen reader text, live region activity, fixed-width image and send failed retry link to CSS Modules with webchat__ class names; in the Fluent theme, the send failed retry link now uses Fluent's accent color, in PR #6052, by @OEvgeny

Description

The screen reader text, the live region activity, the fixed-width image and the inline Markdown of the "Send failed. Retry." link move from emotion to CSS Modules, with the same pixels in the default theme. With the Fluent theme, the retry link now takes Fluent's accent color instead of styleOptions.accent, because Fluent sets --webchat__color--accent.

Design

• The retry link reads --webchat__color--accent instead of a new custom property, like other accent-colored elements.
• The screen reader text and the inline Markdown, which had only an emotion class, get webchat__screen-reader-text and webchat__inline-markdown. The other class names stay.

Specific Changes

• ScreenReaderText.module.css, LiveRegionActivity.module.css, FixedWidthImage.module.css, InlineMarkdown.module.css (new): moved rules
• ScreenReaderText.tsx, LiveRegionActivity.tsx, FixedWidthImage.tsx, InlineMarkdown.tsx: useStyles()
• activityStatus/sendFailedRetry.accent.html: snapshots 1–2 show the custom accent on the retry link, idle and focused (same snapshots on main)

• I have added tests and executed them locally
• I have added .changelog/<PR#>-<slug>.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)

[Copilot]

🟢 Approval recommended

No active review issues are reported for the CSS Modules migration and retry-link accent update.

No open issues 🎉

What changed in this PR

Continues the CSS Modules migration for four small components, preserving default-theme styling while making the retry link use Fluent’s accent color when that theme is active.

Changes:

• Replaces local Emotion styles with CSS Modules and useStyles().
• Adds webchat__screen-reader-text and webchat__inline-markdown classes while preserving existing component class names.
• Adds snapshot coverage for the custom-accent retry link in idle and focused states, plus a changelog entry.

File	Description
packages/​component/​src/​Utils/​InlineMarkdown.tsx	Uses CSS Module classes for inline Markdown.
packages/​component/​src/​Utils/​InlineMarkdown.module.css	Defines retry-link styles using the accent custom property.
packages/​component/​src/​Utils/​FixedWidthImage.tsx	Applies module classes to the image wrapper and images.
packages/​component/​src/​Utils/​FixedWidthImage.module.css	Moves image sizing and positioning rules into CSS.
packages/​component/​src/​ScreenReaderText.tsx	Applies the screen-reader text module class.
packages/​component/​src/​ScreenReaderText.module.css	Preserves visually hidden text styling.
packages/​component/​src/​LiveRegion/​LiveRegionActivity.tsx	Uses the live-region activity module class.
packages/​component/​src/​LiveRegion/​LiveRegionActivity.module.css	Preserves visually hidden live-region styling.
.changelog/​6052-fix-css-modules-small-components.md	Documents the migration and Fluent accent change.
tests/​html2/​activityStatus/​sendFailedRetry.accent.html	Adds custom-accent snapshots for idle and focused retry links.

_{Review effort: Balanced}