[Bug]: sp-color-slider and sp-color-wheel fail to render focused style when first receiving focus

[majornista]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

ColorSlider, ColorWheel

Expected behavior

<sp-color-slider> and <sp-color-wheel> should render the focused style when they first receive focus, tabbing into the document of iframe.

Actual behavior

For ColorSlider:

1. Open https://opensource.adobe.com/spectrum-web-components/components/color-slider/#default
2. Hover over and mouse click to set focus on the "#" sign next to the heading reading "Default."
3. Press Tab key once to set focus to the "#" link with href="#default".
4. Then press Tab a second time to move focus to the ColorSlider example rendered below.
5. Notice that the ColorSlider handle does not change, by growing in size, to display focus.
6. If you press Esc or an Arrow key to change the value, the focused style will render.

Repeat for ColorWheel:

1. Open https://opensource.adobe.com/spectrum-web-components/components/color-wheel/#example
2. Hover over and mouse click to set focus on the "#" sign next to the heading reading "Example."
3. Press Tab key once to set focus to the "#" link with href="#default".
4. Then press Tab a second time to move focus to the ColorWheel example rendered below.
5. Notice that the ColorWheel handle does not change, by growing in size, to display focus.
6. If you press Esc or an Arrow key to change the value, the focused style will render.

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Go to '...'
2. Click on '....'
3. Scroll to '....'
4. Check console
5. See error

Sample code that illustrates the problem

In order to account for the focused element in the shadowRoot matching :focus-visible or .focus-visible, change this:

spectrum-web-components/tools/base/src/Base.ts

Lines 81 to 100 in 2682d93

	public hasVisibleFocusInTree(): boolean {
	const activeElement = (this.getRootNode() as Document)
	.activeElement as HTMLElement;
	if (!activeElement) {
	return false;
	}
	// Browsers without support for the `:focus-visible`
	// selector will throw on the following test (Safari, older things).
	// Some won't throw, but will be focusing item rather than the menu and
	// will rely on the polyfill to know whether focus is "visible" or not.
	try {
	return (
	activeElement.matches(':focus-visible') ||
	activeElement.matches('.focus-visible')
	);
	/* c8 ignore next 3 */
	} catch (error) {
	return activeElement.matches('.focus-visible');
	}
	}

To this:

        public hasVisibleFocusInTree(): boolean {
            const activeElement = (this.getRootNode() as Document)
                .activeElement as HTMLElement;
            if (!activeElement) {
                return false;
            }

            const shadowRootActiveElement = activeElement.shadowRoot
                ?.activeElement as HTMLElement;

            // Browsers without support for the `:focus-visible`
            // selector will throw on the following test (Safari, older things).
            // Some won't throw, but will be focusing item rather than the menu and
            // will rely on the polyfill to know whether focus is "visible" or not.
            try {
                return (
                    activeElement.matches(':focus-visible') ||
                    activeElement.matches('.focus-visible') ||
                    shadowRootActiveElement?.matches(':focus-visible') ||
                    shadowRootActiveElement?.matches('.focus-visible')
                );
                /* c8 ignore next 3 */
            } catch (error) {
                return (
                    activeElement.matches('.focus-visible') ||
                    shadowRootActiveElement?.matches('.focus-visible')
                );
            }
        }

Logs taken while reproducing problem

No response