[fix] focus-visible state for primary selected focus state for toggle button and primary hover button (#34400)

Author: eljefe223

change/@fluentui-web-components-d926ac2a-b697-4d51-be22-e66e76f6296d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix the selected primary focus state",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/button/button.styles.ts

@@ -197,8 +197,11 @@ export const baseButtonStyles = css`
     background-color: ${colorBrandBackgroundHover};
   }
 
-  :host([appearance='primary']:is(:hover, :hover:active)) {
+  :host([appearance='primary']:is(:hover, :hover:active):not(:focus-visible)) {
     border-color: transparent;
+  }
+
+  :host([appearance='primary']:is(:hover, :hover:active)) {
     color: ${colorNeutralForegroundOnBrand};
   }
 

packages/web-components/src/toggle-button/toggle-button.styles.ts

@@ -56,8 +56,11 @@ export const styles = css`
     background-color: ${colorNeutralBackground1Pressed};
   }
 
-  :host(${pressedState}[appearance='primary']) {
+  :host(${pressedState}[appearance='primary']:not(:focus-visible)) {
     border-color: transparent;
+  }
+
+  :host(${pressedState}[appearance='primary']) {
     background-color: ${colorBrandBackgroundSelected};
     color: ${colorNeutralForegroundOnBrand};
   }