diff --git a/change/@fluentui-react-tree-de646a25-22e4-434f-aef4-f18a5f6b207d.json b/change/@fluentui-react-tree-de646a25-22e4-434f-aef4-f18a5f6b207d.json new file mode 100644 index 00000000000000..40ce1e1783b34e --- /dev/null +++ b/change/@fluentui-react-tree-de646a25-22e4-434f-aef4-f18a5f6b207d.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: improve High Contrast on focus indicator", + "packageName": "@fluentui/react-tree", + "email": "bernardo.sunderhus@gmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts b/packages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts index 22d1afc695dbbc..78cfa127c9a9e5 100644 --- a/packages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts +++ b/packages/react-components/react-tree/library/src/components/TreeItem/useTreeItemStyles.styles.ts @@ -32,6 +32,9 @@ const useBaseStyles = makeResetStyles({ { borderRadius: tokens.borderRadiusMedium, outlineColor: tokens.colorStrokeFocus2, + '@media (forced-colors: active)': { + outlineColor: 'Highlight', + }, outlineRadius: tokens.borderRadiusMedium, // FIXME: tokens.strokeWidthThick causes some weird bugs outlineWidth: '2px',