[Bug]: No UI Indication for Focus on Switch Component During Keyboard Navigation

[shivamchawla-msft]

Component

Switch

Package version

3.0.0-beta.70

@microsoft/fast-element version

2.0.0

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 34.07 GB / 63.95 GB
  Browsers:
    Edge: Chromium (130.0.2849.52)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @fluentui/tokens: 1.0.0-alpha.20 => 1.0.0-alpha.20
    @fluentui/web-components: 3.0.0-beta.70 => 3.0.0-beta.70
    @microsoft/fast-element: 2.0.0 => 2.0.0

Current Behavior

There is no UI indication to the user that the focus is on switch upon keyboard navigation.

Expected Behavior

There should be some UI indication to the user that the focus is on switch upon keyboard navigation.

Reproduction

https://github.com/shivamchawla-msft/fluent-ui-switch-focus-repro/tree/main

Steps to reproduce

1. clone the project
2. pnpm install
3. pnpm run
4. open the URL in the terminal with the port.
5. navigate to the switch using tab button of keyboard.
6. Invoke it via space to make sure focus is on switch only
7. Notice there is no indication to the user that keyboard focus is on switch.

Are you reporting an Accessibility issue?

yes

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.