[web-components][fix] fix missing focus state in forced colors on checked switch (#35204)

davatron5000 · web-flow · commit fdb651c09b83 · 2025-09-17T13:50:13.000-05:00
diff --git a/change/@fluentui-web-components-287ac194-c9c2-4cc2-8a00-d30740e0eff6.json b/change/@fluentui-web-components-287ac194-c9c2-4cc2-8a00-d30740e0eff6.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: bug in switch checked story in forced-colors mode",
+  "packageName": "@fluentui/web-components",
+  "email": "rupertdavid@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/src/switch/switch.stories.ts b/packages/web-components/src/switch/switch.stories.ts
@@ -56,7 +56,6 @@ export const Default: Story = {};
 
 export const Checked: Story = {
   args: {
-    slot: 'input',
     checked: true,
   },
 };
diff --git a/packages/web-components/src/switch/switch.styles.ts b/packages/web-components/src/switch/switch.styles.ts
@@ -121,6 +121,7 @@ export const styles = css`
   :host(:not([slot='input']):focus-visible) {
     border-color: ${colorTransparentStroke};
     outline: ${strokeWidthThick} solid ${colorTransparentStroke};
+    outline-offset: 1px;
     box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
   }
 `.withBehaviors(

Original file line number	Diff line number	Diff line change
@@ -121,6 +121,7 @@ export const styles = css`
`121`	`121`	`:host(:not([slot='input']):focus-visible) {`
`122`	`122`	`border-color: ${colorTransparentStroke};`
`123`	`123`	`outline: ${strokeWidthThick} solid ${colorTransparentStroke};`
	`124`	`+ outline-offset: 1px;`
`124`	`125`	`box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};`
`125`	`126`	`}`
`126`	`127`	`.withBehaviors(