[web-components] fix: add dropdown focusring for accessibility (#35116)

Author: davatron5000

change/@fluentui-web-components-b8d52bf9-bd2d-4f31-8fd0-1b94a366b391.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: add focus-ring to dropdown",
+  "packageName": "@fluentui/web-components",
+  "email": "rupertdavid@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -25,6 +25,8 @@ import {
   colorNeutralStrokeAccessibleHover,
   colorNeutralStrokeAccessiblePressed,
   colorNeutralStrokeDisabled,
+  colorStrokeFocus1,
+  colorStrokeFocus2,
   colorTransparentBackground,
   colorTransparentStroke,
   colorTransparentStrokeInteractive,
@@ -151,6 +153,17 @@ export const styles = css`
     transition: scale ${durationUltraFast} ${curveDecelerateMid};
   }
 
+  /**
+  * focus-ring style uses lingering :focus-within selector due to platform limitations
+  * TODO: Convert selector to \`:host(:has(:focus-visible)) .control\` when browser support increases
+  * ISSUE: https://issues.chromium.org/issues/40062355
+  */
+  :host(:where(:focus-within)) .control {
+    border-radius: ${borderRadiusMedium};
+    box-shadow: inset 0 0 0 1px ${colorStrokeFocus1};
+    outline: ${strokeWidthThick} solid ${colorStrokeFocus2};
+  }
+
   :host(:where(${openState}, :focus-within)) .control::after {
     scale: 1 1;
     transition-duration: ${durationNormal};