fix(react): allow Toggle to disable focus via data-is-focusable attri...

[Br1an67]

Fixes #31935

Previous Behavior

The Toggle component had a hardcoded data-is-focusable="true" attribute, which prevented users from disabling focus behavior. This was problematic in scenarios like DetailsList where arrow key navigation should skip certain interactive elements, similar to how Checkbox allows this via inputProps={{ "data-is-focusable": false }}.

New Behavior

The Toggle component now respects the data-is-focusable attribute passed as a prop. Users can now disable focus by passing data-is-focusable={false} to the Toggle component, making it consistent with the Checkbox component's behavior. The default value remains true to maintain backward compatibility.

Usage Example

// Disable focus on Toggle (prevents arrow key navigation in DetailsList)
<Toggle data-is-focusable={false} label="My Toggle" />

// Default behavior (focusable)
<Toggle label="My Toggle" />

Related Issue(s)

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

Changes

• Modified Toggle.base.tsx to check toggleNativeProps['data-is-focusable'] and default to true if not provided
• Added two test cases to verify default behavior and ability to disable focus
• 2 files changed, 13 insertions(+), 1 deletion(-)