[Bug]: TOGGLE doesn't have ability to disable focus via "data-is-focusable". Cannot disable focus in DETAILSLIST like we can with CHECKBOX

[tandrasi]

trafficstars

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 19.83 GB / 31.92 GB
  Browsers:
    Edge: Chromium (120.0.2210.61)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

no

Reproduction

https://codepen.io/tandrasi/pen/zYeQrYJ?editors=1010

Bug Description

This is a replication of #30049 as it was closed due to inactivity.

Repro steps:

1. Go to the codepen and navigate to the rendered details list.
2. Press the TAB key to shift focus to the first row in the details list (the row below the header row).
3. Now that the focus is on the row, press the right arrow key and notice how the toggle control receives focus.

Actual Behavior

While navigating using the TAB key, once the details list row receives focus, pressing the right arrow key will shift focus to the toggle control.

Expected Behavior

Like the checkbox control, I expect the ability to supply a prop to the toggle control which will cull focus events in the details list. In this example, pressing the right arrow key when the details list row receives focus should not focus the toggle control.

This is a quick code snippet to show the two controls and how I expect the toggle control to work:

line 134 Doesn't work as expected as the functionality isn't implemented nor does a relevant prop exist: Toggle: <Toggle data-is-focusable={false} />

line 149 Works as expected - we can supply "inputProps": Checkbox: <Checkbox inputProps={{ "data-is-focusable": false }} />

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

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

[tandrasi]

@spmonahan commented on the prior bug #30049:

This is because Toggle internally renders which is where data-is-focusable={true} is set. However, unlike Checkbox no API is provided for users to override this value.

[behowell]

Hi @tandrasi, you indicated that you're willing to submit a PR. This seems like a great issue to do that for, since it sounds like a fairly straightforward fix based on @spmonahan's comment. Thanks!

[tandrasi]

I'll see if I can find time tomorrow to try and tackle this.

Edit: I got sick and have a pile of client projects to get through. Unlikely to get this done for 2-3 weeks.

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".

[microsoft-github-policy-service[bot]]

This issue has not had activity for over 180 days! We're adding Soft close label and will close it soon for house-keeping purposes. Still require assistance? Please add comment - "keep open".