Oddly shaped focus outline when opening sp-dialog

[davidclark87]

Expected Behaviour

I wouldn't expect to see a focus outline around a newly opened dialog. If we are deliberately showing this outline for accessibility purposes, I'd expect it to closely wrap the contours of the dialog rather than extend across the full viewport width. FWIW, React Spectrum dialogs don't have such an outline.

Actual Behaviour

"Small" example on docs site:

Fullscreen mode example (Fullscreen takeover mode exhibits same behavior, but the outline is eventually covered by the dialog once the opening animation completes):

Reproduce Scenario (including but not limited to)

Steps to Reproduce

1. Go to https://opensource.adobe.com/spectrum-web-components/components/dialog-wrapper/examples
2. Click any of the "Toggle dialog" buttons on that page (e.g. the "Small" example)

Platform and Version

Tested on Mac: Occurs on Chrome and Edge; does not occur on Safari or Firefox.
Not tested on Windows.

Sample Code that illustrates the problem

See docs site

Logs taken while reproducing problem

N/A

[davidclark87]

@Westbrook I noticed a couple other issues in this area on the same Chromium browsers - please let me know if you'd rather I filed a separate bug for either:

1. Clicking just to the right of the Toggle Dialog button (rather than clicking the button itself) results in an unexpected focus outline being displayed:
   

2. The fading in/out of the modal scrim is quite slow and clunky compared to Safari/Firefox

Not sure if related, but I hit this when taking a look at the fix for #1037 (which looks good)