diff --git a/change/@fluentui-react-link-046c4989-5d7d-41a2-949f-dd71ad60c063.json b/change/@fluentui-react-link-046c4989-5d7d-41a2-949f-dd71ad60c063.json new file mode 100644 index 00000000000000..1d977aa978f6c3 --- /dev/null +++ b/change/@fluentui-react-link-046c4989-5d7d-41a2-949f-dd71ad60c063.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix(Link): add disabled styles for high contrast mode", + "packageName": "@fluentui/react-link", + "email": "sarah.higley@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts b/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts index 197e87f47d2716..9b04d6acdfade6 100644 --- a/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts +++ b/packages/react-components/react-link/library/src/components/Link/useLinkStyles.styles.ts @@ -90,6 +90,19 @@ const useStyles = makeStyles({ textDecorationLine: 'none', color: tokens.colorNeutralForegroundDisabled, }, + + // There is no native disabled state for links, so we need to explicitly style the disabled state for high contrast mode. + '@media (forced-colors: active)': { + color: 'GrayText', + + ':hover': { + color: 'GrayText', + }, + + ':active': { + color: 'GrayText', + }, + }, }, inverted: { color: tokens.colorBrandForegroundInverted,