Open tandrasi opened 3 months ago
@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.
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!
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.
Library
React / v8 (@fluentui/react)
System Info
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:
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