fix(overlay): allow "receives-focus" to target the root of an overlay (…

…#3658) * fix(overlay): allow "receives-focus" to target the root of an overlay * ci: update golden images cache * docs(overlay): massage types
adobe · Sep 18, 2023 · 0db1025 · 0db1025
1 parent b06abb9
commit 0db1025
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 1 deletion.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 9494051c6e69193df911d0f2571c794fe6f20f00
+        default: a1b36206c9a867825429a05c55190164ddfeb3be
     wireit_cache_name:
         type: string
         default: wireit

diff --git a/packages/overlay/src/OverlayDialog.ts b/packages/overlay/src/OverlayDialog.ts
@@ -26,6 +26,7 @@ import {
     guaranteedAllTransitionend,
 } from './AbstractOverlay.js';
 import type { AbstractOverlay } from './AbstractOverlay.js';
+import { userFocusableSelector } from '@spectrum-web-components/shared';
 
 export function OverlayDialog<T extends Constructor<AbstractOverlay>>(
     constructor: T
@@ -76,6 +77,9 @@ export function OverlayDialog<T extends Constructor<AbstractOverlay>>(
                         // Show/focus workflow when opening _only_.
                         return;
                     }
+                    if (el.matches(userFocusableSelector)) {
+                        focusEl = el;
+                    }
                     focusEl = focusEl || firstFocusableIn(el);
                     if (!focusEl) {
                         const childSlots = el.querySelectorAll('slot');

diff --git a/packages/overlay/src/OverlayNoPopover.ts b/packages/overlay/src/OverlayNoPopover.ts
@@ -28,6 +28,7 @@ import {
     overlayTimer,
 } from './AbstractOverlay.js';
 import type { AbstractOverlay } from './AbstractOverlay.js';
+import { userFocusableSelector } from '@spectrum-web-components/shared';
 
 export function OverlayNoPopover<T extends Constructor<AbstractOverlay>>(
     constructor: T
@@ -81,6 +82,9 @@ export function OverlayNoPopover<T extends Constructor<AbstractOverlay>>(
                 if (targetOpenState !== true) {
                     return;
                 }
+                if (el.matches(userFocusableSelector)) {
+                    focusEl = el;
+                }
                 focusEl = focusEl || firstFocusableIn(el);
                 if (focusEl) {
                     return;

diff --git a/packages/overlay/src/OverlayPopover.ts b/packages/overlay/src/OverlayPopover.ts
@@ -28,6 +28,7 @@ import {
     overlayTimer,
 } from './AbstractOverlay.js';
 import type { AbstractOverlay } from './AbstractOverlay.js';
+import { userFocusableSelector } from '@spectrum-web-components/shared';
 
 function isOpen(el: HTMLElement): boolean {
     let popoverOpen = false;
@@ -149,6 +150,9 @@ export function OverlayPopover<T extends Constructor<AbstractOverlay>>(
                 if (!targetOpenState) {
                     return;
                 }
+                if (el.matches(userFocusableSelector)) {
+                    focusEl = el;
+                }
                 focusEl = focusEl || firstFocusableIn(el);
                 if (focusEl) {
                     return;

diff --git a/packages/overlay/stories/overlay-element.stories.ts b/packages/overlay/stories/overlay-element.stories.ts
@@ -67,6 +67,7 @@ type Properties = {
     interaction: 'click' | 'hover' | 'longpress';
     open?: boolean;
     placement?: Placement;
+    receivesFocus: 'true' | 'false' | 'auto';
     type?: OverlayTypes;
 };
 
@@ -152,6 +153,37 @@ longpress.args = {
     type: 'auto',
 };
 
+/**
+ * Proxy for fully encapsulated overlay containers that need to
+ * pass `focus` into a shadow child element.
+ */
+export const receivesFocus = ({
+    interaction,
+    open,
+    placement,
+    receivesFocus,
+    type,
+}: Properties): TemplateResult => html`
+    <sp-action-button id="trigger">
+        Open the overlay (with focus)
+    </sp-action-button>
+    <sp-overlay
+        ?open=${open}
+        trigger="trigger@${interaction}"
+        type=${ifDefined(type)}
+        placement=${ifDefined(placement)}
+        .receivesFocus=${receivesFocus}
+    >
+        <a href="https://example.com">Click Content</a>
+    </sp-overlay>
+`;
+receivesFocus.args = {
+    interaction: 'click',
+    placement: 'bottom-start',
+    type: 'auto',
+    receivesFocus: 'true',
+} as Properties;
+
 export const transformed = (args: Properties): TemplateResult => html`
     <style>
         .transformed {

diff --git a/packages/overlay/test/overlay-element.test.ts b/packages/overlay/test/overlay-element.test.ts
@@ -31,6 +31,7 @@ import '@spectrum-web-components/button/sp-button.js';
 import { sendMouse } from '../../../test/plugins/browser.js';
 import { Button } from '@spectrum-web-components/button';
 import { sendKeys } from '@web/test-runner-commands';
+import { receivesFocus } from '../stories/overlay-element.stories.js';
 
 const OVERLAY_TYPES = ['modal', 'page', 'hint', 'auto', 'manual'] as const;
 type OverlayTypes = typeof OVERLAY_TYPES[number];
@@ -652,6 +653,21 @@ describe('sp-overlay', () => {
     });
     describe('[type="auto"]', () => {
         opensDeclaratively('auto');
+        it('receives focus', async () => {
+            const test = await fixture(html`
+                <div>${receivesFocus(receivesFocus.args)}</div>
+            `);
+            const trigger = test.querySelector('#trigger') as Button;
+            const overlay = test.querySelector('a');
+
+            expect(document.activeElement === overlay).to.be.false;
+
+            const opened = oneEvent(trigger, 'sp-opened');
+            trigger.click();
+            await opened;
+
+            expect(document.activeElement === overlay).to.be.true;
+        });
     });
     describe('[type="manual"]', () => {
         opensDeclaratively('manual');