@skyux/modals 11.27.0 → 11.28.0

package/fesm2022/skyux-modals.mjs

@@ -4,7 +4,7 @@ import { NgModule, InjectionToken, Component, ViewEncapsulation, Injectable, inj
 import * as i1$2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@skyux/core';
-import { SkyResponsiveHostDirective, SkyTrimModule, SkyCoreAdapterService, SkyDockService, SkyLiveAnnouncerService, SkyAppWindowRef, SkyDockLocation, SkyIdModule, SkyScrollShadowDirective, SkyIdService, SkyDynamicComponentService, SKY_STACKING_CONTEXT } from '@skyux/core';
+import { SkyResponsiveHostDirective, SkyTrimModule, SkyCoreAdapterService, SkyDockService, SkyLiveAnnouncerService, SkyDockLocation, SkyIdModule, SkyScrollShadowDirective, SkyIdService, SkyDynamicComponentService, SkyAppWindowRef, SKY_STACKING_CONTEXT } from '@skyux/core';
 import * as i5 from '@skyux/i18n';
 import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
 import * as i1$1 from '@skyux/theme';
@@ -282,10 +282,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * @internal
  */
 class SkyModalComponentAdapterService {
-    #coreAdapter;
-    constructor(coreAdapter) {
-        this.#coreAdapter = coreAdapter;
-    }
     handleWindowChange(modalEl) {
         const boundedHeightEl = modalEl.nativeElement.querySelector('.sky-modal');
         const fullPageModalEl = modalEl.nativeElement.querySelector('.sky-modal-full-page');
@@ -343,23 +339,6 @@ class SkyModalComponentAdapterService {
     modalContentHasDirectChildViewkeeper(modalContentEl) {
         return !!modalContentEl.nativeElement.querySelector('sky-modal-content > .sky-viewkeeper-fixed');
     }
-    modalOpened(modalEl) {
-        /* istanbul ignore else */
-        /* handle the case where somehow there is a focused element already in the modal */
-        if (!(document.activeElement &&
-            modalEl.nativeElement.contains(document.activeElement))) {
-            const currentScrollX = window.pageXOffset;
-            const currentScrollY = window.pageYOffset;
-            const inputWithAutofocus = modalEl.nativeElement.querySelector('[autofocus]');
-            if (inputWithAutofocus) {
-                inputWithAutofocus.focus();
-            }
-            else {
-                this.#coreAdapter.getFocusableChildrenAndApplyFocus(modalEl, '.sky-modal-content', true);
-            }
-            window.scrollTo(currentScrollX, currentScrollY);
-        }
-    }
     #setFullPageHeight(fullPageModalEl) {
         const windowHeight = window.innerHeight;
         const fullPageModalStyle = getComputedStyle(fullPageModalEl);
@@ -369,12 +348,12 @@ class SkyModalComponentAdapterService {
         fullPageModalEl.style.height = fullPageModalHeight;
         fullPageModalEl.style.maxHeight = fullPageModalHeight;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalComponentAdapterService, deps: [{ token: i1.SkyCoreAdapterService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalComponentAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalComponentAdapterService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SkyModalComponentAdapterService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.SkyCoreAdapterService }] });
+        }] });
 
 /**
  * @internal
@@ -538,7 +517,6 @@ class SkyModalComponent {
     #errorsSvc;
     #hostService;
     #liveAnnouncerSvc;
-    #windowRef;
     /**
      * This provider is optional to account for situations where a modal component
      * is implemented without the modal service. For example, when a consumer tests
@@ -565,7 +543,6 @@ class SkyModalComponent {
         this.#errorsSvc = inject(SkyModalErrorsService);
         this.#hostService = inject(SkyModalHostService);
         this.#liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
-        this.#windowRef = inject(SkyAppWindowRef);
         /**
          * This provider is optional to account for situations where a modal component
          * is implemented without the modal service. For example, when a consumer tests
@@ -649,11 +626,6 @@ class SkyModalComponent {
     }
     ngAfterViewInit() {
         this.#componentAdapter.handleWindowChange(this.#elRef);
-        // Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.
-        // https://stackoverflow.com/questions/40562845
-        this.#windowRef.nativeWindow.setTimeout(() => {
-            this.#componentAdapter.modalOpened(this.#elRef);
-        });
         this.#dockService.setDockOptions({
             location: SkyDockLocation.ElementBottom,
             referenceEl: this.modalContentWrapperElement.nativeElement,
@@ -898,6 +870,7 @@ class SkyModalAdapterService {
     static { this.MODAL_BODY_CLASS = 'sky-modal-body-open'; }
     #docRef;
     #bodyEl;
+    #coreAdapter = inject(SkyCoreAdapterService);
     #windowRef;
     #hostSiblingAriaHiddenCache = new Map();
     constructor(windowRef) {
@@ -939,16 +912,38 @@ class SkyModalAdapterService {
      */
     hideHostSiblingsFromScreenReaders(hostElRef) {
         const hostElement = hostElRef.nativeElement;
-        const hostSiblings = hostElement.parentElement.children;
-        for (const element of hostSiblings) {
-            if (element !== hostElement &&
-                !element.hasAttribute('aria-live') &&
-                element.nodeName.toLowerCase() !== 'script' &&
-                element.nodeName.toLowerCase() !== 'style') {
-                // preserve previous aria-hidden status of elements outside of modal host
-                this.#hostSiblingAriaHiddenCache.set(element, element.getAttribute('aria-hidden'));
-                element.setAttribute('aria-hidden', 'true');
+        const hostSiblings = hostElement.parentElement?.children;
+        if (hostSiblings) {
+            for (const element of hostSiblings) {
+                if (element.contains(document.activeElement)) {
+                    document.body.focus();
+                }
+                if (element !== hostElement &&
+                    !element.hasAttribute('aria-live') &&
+                    element.nodeName.toLowerCase() !== 'script' &&
+                    element.nodeName.toLowerCase() !== 'style') {
+                    // preserve previous aria-hidden status of elements outside of modal host
+                    this.#hostSiblingAriaHiddenCache.set(element, element.getAttribute('aria-hidden'));
+                    element.setAttribute('aria-hidden', 'true');
+                }
+            }
+        }
+    }
+    focusFirstElement(modalEl) {
+        /* istanbul ignore else */
+        /* handle the case where somehow there is a focused element already in the modal */
+        if (!(document.activeElement &&
+            modalEl.nativeElement.contains(document.activeElement))) {
+            const currentScrollX = window.pageXOffset;
+            const currentScrollY = window.pageYOffset;
+            const inputWithAutofocus = modalEl.nativeElement.querySelector('[autofocus]');
+            if (inputWithAutofocus) {
+                inputWithAutofocus.focus();
+            }
+            else {
+                this.#coreAdapter.getFocusableChildrenAndApplyFocus(modalEl, '.sky-modal-content', true);
             }
+            window.scrollTo(currentScrollX, currentScrollY);
         }
     }
     /**
@@ -1003,6 +998,7 @@ class SkyModalHostComponent {
     #environmentInjector = inject(EnvironmentInjector);
     #modalHostContext = inject(SkyModalHostContext);
     #router = inject(Router, { optional: true });
+    #windowRef = inject(SkyAppWindowRef);
     ngOnDestroy() {
         // Close all modal instances before disposing of the host container.
         this.#closeAllModalInstances();
@@ -1049,13 +1045,18 @@ class SkyModalHostComponent {
         modalInstance.adapter = this.#adapter;
         modalInstance.componentRef = modalComponentRef;
         this.#registerModalInstance(modalInstance);
-        // hiding all elements at the modal-host level from screen readers when the a modal is opened
-        this.#adapter.hideHostSiblingsFromScreenReaders(this.#elRef);
-        if (SkyModalHostService.openModalCount > 1 &&
-            SkyModalHostService.topModal === hostService) {
-            // hiding the lower modals when more than one modal is opened
-            this.#adapter.hidePreviousModalFromScreenReaders(modalElement);
-        }
+        // Adding a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError.
+        // https://stackoverflow.com/questions/40562845
+        this.#windowRef.nativeWindow.setTimeout(() => {
+            this.#adapter.focusFirstElement(modalElement);
+            // hiding all elements at the modal-host level from screen readers when the a modal is opened
+            this.#adapter.hideHostSiblingsFromScreenReaders(this.#elRef);
+            if (SkyModalHostService.openModalCount > 1 &&
+                SkyModalHostService.topModal === hostService) {
+                // hiding the lower modals when more than one modal is opened
+                this.#adapter.hidePreviousModalFromScreenReaders(modalElement);
+            }
+        });
         const closeModal = () => {
             // unhide siblings if last modal is closing
             if (SkyModalHostService.openModalCount === 1) {