[a11y] Issue with Button and Link outlines on Windows 11 high contrast themes

[stamat]

1. Issue with the Button component outline in high contrast themes

For some reason there is this code, that draws the outline if @media (forced-colors: active). So on focus, the outline doesn't change, it's always visible.

brand/packages/react/src/Button/Button.module.css

Lines 211 to 216 in 7473042

	/* Retains focus indicator when in "Windows High Contrast Mode". */
	.Button:focus:not(.Button--disabled[disabled]) {
	outline: var(--brand-borderWidth-thick) solid;
	outline-color: var(--brand-color-focus);
	outline-offset: 2px;
	}

This caused the issue 👇 to be reported:

• https://github.com/github/accessibility-audits/issues/9846
• https://github.com/github/accessibility-audits/issues/9849
• https://github.com/github/accessibility-audits/issues/9850

2. Issue with the Link component outline in high contrast themes

Link has the native outline disabled and box-shadow used as the outline for some reason unknown to me. In @media (forced-colors: active) all of the box-shadows are removed and all of the backgrounds are set to the same color.

brand/packages/react/src/Link/Link.module.css

Lines 40 to 44 in 7473042

	.Link:focus:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--brand-color-canvas-default), 0 0 2px 5px var(--brand-color-focus);
	transition: none;
	}

Also Link needs the outline-offset set to 2px

It's just something I picked up along the way.

All high contrast issues are Sev 4 - so it's not a hurry on this. But could be cool for this to be sorted out and be consistent. 😘

[stamat]

@rezrah @joshfarrant bros, I've made the update here, tested it out in the high contrast themes, it works now 💖 . Kinda need this in the new update 🙏