[Bug]: [Accessibility] Fluent UI split button violates the nested-interactive rule (WCAG 4.1.2)

[kjcho-msft]

Package

react

Package version

8.120.9

React version

16.14.0

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
    Memory: 33.34 GB / 63.95 GB
  Browsers:
    Edge: Chromium (129.0.2792.52)
    Internet Explorer: 11.0.26100.1882

Current Behavior

The screenshot above shows the nested-interactive violations on the page.

Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies: .css-328[role="button"][aria-roledescription="split button"]:nth-child(1)
Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies: .css-328[role="button"][aria-roledescription="split button"]:nth-child(2)

Expected Behavior

Split button components should adhere to the Web Content Accessibility Guidelines (WCAG).

Resources for this rule
More information about nested-interactive
WCAG 4.1.2

Reproduction

Run Accessibility FastPass tool for the split button in fluent UI

Steps to reproduce

Run Accessibility FastPass tool for the split button in fluent UI
https://developer.microsoft.com/en-us/fluentui#/controls/web/button

Are you reporting an Accessibility issue?

yes

Suggested severity

High - No workaround

Products/sites affected

Azure Notebooks Component (https://aznb.azurewebsites.net/)

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.