Focus-visible support breaking in newer versions of the polyfill

[Pogodaanton]

Versions following the implementation of a Shadow-DOM tracker don't work with FAST's focus-visible JSS, as the js-focus-visible class is now placed into the <html/> tag rather than the <body/> tag.

What are the steps to reproduce the issue?

1. Setup a react instance with @microsoft/fast-components-react-msft^4.28.4and focus-visible^5.0.2
2. Include a component that can be focused, but should not be highlighted when using a mouse (e.g.: Button, Hyperlink, etc.)
3. Click the added component in the browser
4. The component will incorrectly reveal the :focus styling

What behavior did you expect?
Selected component does not appear to be in focus while using a mouse.

Temporary solution
Downgrading to an older version of the said package: focus-visible^4.1.5

[chrisdholt]

Thanks for the issue @Pogodaanton - I think there's an issue of being between implementations for this to get fixed. I do think we'll want to be on the latest version, but that will require a dependency change that would impact folks already on v4 of the polyfill. One quick fix is to document that we require ^v4.

Alternatively, we could make the change in the dependency and update our code - but that would potentially break folks with a lower version.

@nicholasrice for thoughts as well.

[nicholasrice]

I think it would be relatively trivial to select for both html and body for the .js-focus-visible class, enabling support for both v4 and v5.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[chrisdholt]

closed with #3517