Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Accessibility focus on Switch component is odd when combines with label and info tooltips #33965

Open
2 tasks done
eloisepeng opened this issue Mar 10, 2025 · 2 comments

Comments

@eloisepeng
Copy link

Component

Switch

Package version

9.55.0

React version

18.2.0

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
    Memory: 32.13 GB / 63.95 GB
  Browsers:
    Edge: Chromium (133.0.3065.82)

Current Behavior

When tab to focus on a complex InfoLabel with Switch component,

  1. the focus indicator highlights the entire component for toggling interaction,
  2. and it highlights both the combo component and info button for info button interaction.

This is confusing for the users as it doesn't provide clear visuals for user to know when to toggle the Switch, and when to interact with the info button.

Expected Behavior

  1. When focus on the Switch, only the switch button should be highlighted, not the combo of labeled Switch.
  2. When focus on the Info Button within the labeled Switch, the combo of the labeled Switch should not be highlighted. Only the Info button should be highlighted.

Reproduction

https://stackblitz.com/edit/sb1-kzlcermq?file=src%2FApp.tsx

Steps to reproduce

  1. tab to focus and interact with Switch
  2. note that the entire component is highlighted, not intuitive for user to know the Switch is now focus
  3. tab again to focus on the info button
  4. note that both the combo component and the info button is highlighted, the user would be confused by the two highlighted areas as there are two interactive components within

Are you reporting an Accessibility issue?

yes

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

Powerpoint

Are you willing to submit a PR to fix?

no

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.
@layershifter
Copy link
Member

Image

@eloisepeng is the repro public? Can you please check?

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants