feat(react-switch): add disabledFocusable prop

[Copilot]

• Explore Switch component and understand disabledFocusable patterns from Button/Checkbox
• Add disabledFocusable prop to Switch.types.ts (in SwitchProps and SwitchState)
• Update useSwitch.tsx to handle disabledFocusable:
  • Set aria-disabled="true" instead of disabled attribute
  • onChange is unconditional (always calls user callback)
  • onClick calls ev.preventDefault() to block state toggle when disabledFocusable
  • onKeyDown blocks Space/Enter when disabledFocusable
  • Pass disabled appearance to Label
• Update useSwitchStyles.styles.ts to combine selectors instead of duplicating
• Add tests for disabledFocusable in Switch.test.tsx
• Add disabledFocusable story to SwitchDisabled.stories.tsx
• Update react-switch.api.md with new API
• Add beachball change file
• Run yarn nx format (scoped to react-switch package only)

Screen.Recording.2026-02-27.at.20.14.16.mov

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[mainframev]

@copilot

instead of duplicating existing styles for aria-disabled adjust current disable selectors:

-  ':disabled': {   
+  ':disabled, &[aria-disabled="true"]': {

-  ':enabled:not(:checked)': {
+  ':enabled:not(:checked):not([aria-disabled="true"])': {

- ':enabled:checked': { 
+ ':enabled:checked:not([aria-disabled="true"])': {

- ':disabled:not(:checked)': { 
+ ':disabled:not(:checked), &[aria-disabled="true"]:not(:checked)': {

- ':disabled:not(:checked)': { 
+ ':disabled:not(:checked), &[aria-disabled="true"]:not(:checked)': { 

- ':disabled:checked': {  
+ ':disabled:checked, &[aria-disabled="true"]:checked': {

[Copilot]

Done in 48c9dbc. Refactored to combine selectors as suggested — :disabled, &[aria-disabled="true"], :enabled:not(:checked):not([aria-disabled="true"]), :enabled:checked:not([aria-disabled="true"]), and the checked/unchecked variants — removing all the duplicated [aria-disabled] blocks.

[mainframev]

@copilot

Suggested change

	/**
	* Whether the switch should be disabled and focusable. This is used in scenarios where it is important to keep a
	* consistent tab order for screen reader and keyboard users. The primary example of this pattern is when the
	* disabled switch is in a list or a form and is seldom used for standalone switches.
	*
	* @default false
	*/
	disabledFocusable?: boolean;
	/**
	* When set, allows the Switch to be focusable even when it has been disabled. This is used in scenarios where it is
	* important to keep a consistent tab order for screen reader and keyboard users.
	*
	* @default false
	*/
	disabledFocusable?: boolean;

[Copilot]

Updated in 48c9dbc.

[mainframev]

@copilot

run

yarn nx format

[github-actions]

Pull request demo site: URL

[Copilot]

@copilot

run
...

Done in 94c90f1.

[mainframev]

@copilot
run
...

Done in 94c90f1.

reset the commit and omit all format changes except react-switch package and commit

[Copilot]

@copilot
run
...
...

Done in 22a3bd8. Reverted the format changes for all files outside the react-switch package — only Switch.types.ts and useSwitch.tsx retain the formatting updates.