fix: centralize updated first focusable selector

Author: Westbrook

packages/dialog/src/Dialog.ts

@@ -31,6 +31,7 @@ import {
     ObserveSlotPresence,
     FocusVisiblePolyfillMixin,
 } from '@spectrum-web-components/shared';
+import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';
 
 import styles from './dialog.css.js';
 
@@ -87,9 +88,7 @@ export class Dialog extends FocusVisiblePolyfillMixin(
 
     public focus(): void {
         if (this.shadowRoot) {
-            const firstFocusable = this.shadowRoot.querySelector(
-                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [focusable]'
-            ) as SpectrumElement;
+            const firstFocusable = firstFocusableIn(this.shadowRoot);
             if (firstFocusable) {
                 if (firstFocusable.updateComplete) {
                     firstFocusable.updateComplete.then(() =>

packages/dialog/src/DialogWrapper.ts

@@ -28,6 +28,7 @@ import '../sp-dialog.js';
 import styles from '@spectrum-web-components/modal/src/modal.css.js';
 import { Dialog } from './Dialog.js';
 import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';
+import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';
 
 /**
  * @element sp-dialog-wrapper
@@ -93,9 +94,7 @@ export class DialogWrapper extends FocusVisiblePolyfillMixin(SpectrumElement) {
 
     public focus(): void {
         if (this.shadowRoot) {
-            const firstFocusable = this.shadowRoot.querySelector(
-                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [focusable]'
-            ) as SpectrumElement;
+            const firstFocusable = firstFocusableIn(this.shadowRoot);
             if (firstFocusable) {
                 if (firstFocusable.updateComplete) {
                     firstFocusable.updateComplete.then(() =>

packages/overlay/src/ActiveOverlay.ts

@@ -20,6 +20,7 @@ import {
     TemplateResult,
 } from '@spectrum-web-components/base';
 import { reparentChildren } from '@spectrum-web-components/shared';
+import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';
 import { Color, Scale } from '@spectrum-web-components/theme';
 import styles from './active-overlay.css.js';
 import {
@@ -187,9 +188,7 @@ export class ActiveOverlay extends SpectrumElement {
     public dataPopperPlacement?: Placement;
 
     public focus(): void {
-        const firstFocusable = this.querySelector(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [focusable]'
-        ) as HTMLElement;
+        const firstFocusable = firstFocusableIn(this);
         if (firstFocusable) {
             firstFocusable.focus();
             /* c8 ignore next 3 */

packages/overlay/src/OverlayTrigger.ts

@@ -19,6 +19,7 @@ import {
     PropertyValues,
 } from '@spectrum-web-components/base';
 import type { LongpressEvent } from '@spectrum-web-components/action-button';
+import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';
 
 import {
     Placement,
@@ -243,9 +244,7 @@ export class OverlayTrigger extends LitElement {
         if (this.type !== 'modal') {
             return;
         }
-        const firstFocusable = overlayContent.querySelector(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [focusable]'
-        ) as HTMLElement;
+        const firstFocusable = firstFocusableIn(overlayContent);
         if (!firstFocusable) {
             overlayContent.tabIndex = 0;
         }

packages/shared/src/first-focusable-in.ts

@@ -0,0 +1,25 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import type { SpectrumElement } from '@spectrum-web-components/base';
+
+const firstFocusableSelector =
+    'button:not([tabindex="-1"]), [href]:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), [focusable]:not([tabindex="-1"])';
+
+export const firstFocusableIn = (
+    root: HTMLElement | ShadowRoot
+): SpectrumElement | null => {
+    const firstFocusable = root.querySelector(
+        firstFocusableSelector
+    ) as SpectrumElement;
+    return firstFocusable;
+};

packages/shared/src/index.ts

@@ -10,6 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+export * from './first-focusable-in.js';
 export * from './focus-visible.js';
 export * from './focusable.js';
 export * from './get-active-element.js';

packages/tray/package.json

@@ -46,6 +46,7 @@
     "dependencies": {
         "@spectrum-web-components/base": "^0.4.5",
         "@spectrum-web-components/modal": "^0.3.8",
+        "@spectrum-web-components/shared": "^0.12.8",
         "@spectrum-web-components/underlay": "^0.6.9",
         "tslib": "^2.0.0"
     },

packages/tray/src/Tray.ts

@@ -19,6 +19,7 @@ import {
     query,
 } from '@spectrum-web-components/base';
 import '@spectrum-web-components/underlay/sp-underlay.js';
+import { firstFocusableIn } from '@spectrum-web-components/shared/src/first-focusable-in.js';
 
 import modalStyles from '@spectrum-web-components/modal/src/modal.css.js';
 import styles from './tray.css.js';
@@ -40,9 +41,7 @@ export class Tray extends SpectrumElement {
     private tray!: HTMLDivElement;
 
     public focus(): void {
-        const firstFocusable = this.querySelector(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [focusable]'
-        ) as HTMLElement;
+        const firstFocusable = firstFocusableIn(this);
         if (firstFocusable) {
             firstFocusable.focus();
         } else if (this.children.length === 1) {