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

The Toggle component now respects the data-is-focusable attribute,
allowing users to disable focus behavior similar to the Checkbox component.
This is particularly useful in DetailsList scenarios where arrow key
navigation should skip certain interactive elements.

Previously, data-is-focusable was hardcoded to true, preventing users
from disabling focus. Now it checks toggleNativeProps for the attribute
and defaults to true if not provided, maintaining backward compatibility.

Author: Br1an67

packages/react/src/components/Toggle/Toggle.base.tsx

@@ -126,7 +126,7 @@ export const ToggleBase: React.FunctionComponent<IToggleProps> = React.forwardRe
         'aria-label': ariaLabel ? ariaLabel : badAriaLabel,
         'aria-labelledby': labelledById,
         className: classNames.pill,
-        'data-is-focusable': true,
+        'data-is-focusable': toggleNativeProps['data-is-focusable'] ?? true,
         'data-ktp-target': true,
         disabled,
         id,

packages/react/src/components/Toggle/Toggle.test.tsx

@@ -87,6 +87,18 @@ describe('Toggle', () => {
     expect(screen.queryByText('label')).toBeNull();
   });
 
+  it('renders data-is-focusable true by default', () => {
+    const { container } = render(<Toggle label="Label" />);
+    const button = getBySelector(container, 'button') as HTMLButtonElement;
+    expect(button.getAttribute('data-is-focusable')).toEqual('true');
+  });
+
+  it('respects data-is-focusable false when passed', () => {
+    const { container } = render(<Toggle label="Label" data-is-focusable={false} />);
+    const button = getBySelector(container, 'button') as HTMLButtonElement;
+    expect(button.getAttribute('data-is-focusable')).toEqual('false');
+  });
+
   it(`doesn't trigger onSubmit when placed inside a form`, () => {
     const onSubmit = jest.fn();