Show keyboard focus indicator on carousel flippers

[Eugene (OEvgeny)]

Fixes #5704
Fixes #5744

Changelog Entry

Fixed

• Fixed the keyboard focus indicator of the "Previous" and "Next" flipper buttons in carousel layout: they now show a visible focus ring, and the focused flipper is shown even at the start or end of the carousel, fixes #5704 and #5744, in PR #5876, by @OEvgeny

Description

The carousel flippers had outline: 0. On focus they only got a slightly darker background, the same as on hover, so keyboard users could not tell when a flipper had focus. Also, the flipper at the edge (for example "Previous" at the start) stayed in the tab order but was slid out of view, so its focus was invisible.

On :focus-visible, the flipper now has a two-tone ring and is always shown. This applies to both the default theme and the Fluent theme. The ring has an inner band in the flipper foreground color (white) and an outer outline that uses the transcript keyboard indicator style options (2px solid black by default). It has at least 3:1 contrast against the flipper and against the content behind it.

Design

react-film 4.0.0 renders the flipper <button> itself and does not let Web Chat set tabIndex, disabled, or aria-disabled. So the flipper at the edge stays focusable. Hiding it with CSS would make things worse: when a keyboard user presses "Next" until the end, the focused button would disappear and focus would drop to <body>. Instead, the focused flipper is kept visible. The proper follow-up is in react-film: set aria-disabled="true" on the flipper at the edge. CarouselLayout.module.css already styles that state.

Open question: should the Fluent theme map the ring color to its focus token (--webchat-colorStrokeFocus2) instead of transcriptVisualKeyboardIndicatorColor?

Specific Changes

• CarouselLayout.module.css: added :focus-visible styles to .react-film__flipper: a ring on the flipper body (box-shadow + outline), and the slider is moved into view with no transition delay
• Added __tests__/html2/carousel/flipperButton.focusVisible.html and a .fluent.html variant: they Tab to "Next", then to the hidden "Previous", and assert focus, visibility, and the computed ring. Snapshots are taken after the flippers settle.

• I have added tests and executed them locally
• I have updated CHANGELOG.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

Static review found no blocking defects in the focused CSS change and regression coverage; browser tests were not executed during review.

No open issues 🎉

What changed in this PR

Improves keyboard focus visibility for carousel navigation in the default and Fluent themes, addressing #5704 and #5744.

Changes:

• Adds a two-tone focus ring and reveals focused flippers at carousel edges.
• Adds regression tests for focus styling, visibility, and hiding after focus leaves.
• Documents the accessibility fix in the changelog.

File	Description
packages/​component/​src/​Activity/​CarouselLayout.module.css	Adds focus rings and reveals focused flippers.
CHANGELOG.md	Records the carousel accessibility fix.
tests/​html2/​carousel/​flipperButton.focusVisible.html	Tests keyboard focus styling and flipper visibility.
tests/​html2/​carousel/​flipperButton.focusVisible.fluent.html	Runs the regression test with the Fluent theme.

_{Review effort: Balanced}