diff --git a/src/app/components/focustrap/focustrap.ts b/src/app/components/focustrap/focustrap.ts index 7ee8a6cac06..84bc3e02452 100755 --- a/src/app/components/focustrap/focustrap.ts +++ b/src/app/components/focustrap/focustrap.ts @@ -1,6 +1,6 @@ import { DomHandler } from 'primeng/dom'; import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common'; -import { Directive, ElementRef, Input, NgModule, inject, booleanAttribute, PLATFORM_ID } from '@angular/core'; +import { Directive, ElementRef, Input, NgModule, inject, booleanAttribute, PLATFORM_ID, SimpleChanges } from '@angular/core'; /** * Focus Trap keeps focus within a certain DOM element while tabbing. @@ -31,10 +31,29 @@ export class FocusTrap { ngOnInit() { if (isPlatformBrowser(this.platformId) && !this.pFocusTrapDisabled) { - this.createHiddenFocusableElements(); + !this.firstHiddenFocusableElement && !this.lastHiddenFocusableElement && this.createHiddenFocusableElements(); } } + ngOnChanges(changes: SimpleChanges) { + if (changes.pFocusTrapDisabled && isPlatformBrowser(this.platformId)) { + if (changes.pFocusTrapDisabled.currentValue) { + this.removeHiddenFocusableElements(); + } else { + this.createHiddenFocusableElements(); + } + } + } + + removeHiddenFocusableElements() { + if (this.firstHiddenFocusableElement && this.firstHiddenFocusableElement.parentNode) { + this.firstHiddenFocusableElement.parentNode.removeChild(this.firstHiddenFocusableElement); + } + + if (this.lastHiddenFocusableElement && this.lastHiddenFocusableElement.parentNode) { + this.lastHiddenFocusableElement.parentNode.removeChild(this.lastHiddenFocusableElement); + } + } getComputedSelector(selector) { return `:not(.p-hidden-focusable):not([data-p-hidden-focusable="true"])${selector ?? ''}`; } diff --git a/src/app/components/galleria/galleria.css b/src/app/components/galleria/galleria.css index c996776c864..e58b38583f7 100755 --- a/src/app/components/galleria/galleria.css +++ b/src/app/components/galleria/galleria.css @@ -57,6 +57,11 @@ opacity: 1; } + .p-galleria-item-nav-onhover .p-galleria-item-nav-focused { + pointer-events: all; + opacity: 1; + } + .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { pointer-events: none; } diff --git a/src/app/components/galleria/galleria.ts b/src/app/components/galleria/galleria.ts index bf616dc89ee..5d805c1ed09 100755 --- a/src/app/components/galleria/galleria.ts +++ b/src/app/components/galleria/galleria.ts @@ -10,6 +10,7 @@ import { DoCheck, ElementRef, EventEmitter, + HostListener, Inject, Input, KeyValueDiffers, @@ -67,6 +68,7 @@ import { FocusTrapModule } from 'primeng/focustrap'; (maskHide)="onMaskHide()" (activeItemChange)="onActiveItemChange($event)" [ngStyle]="containerStyle" + [fullScreen]="fullScreen" > @@ -417,6 +419,7 @@ export class Galleria implements OnChanges, OnDestroy { [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}" [class]="galleriaClass()" pFocusTrap + [pFocusTrapDisabled]="!fullScreen" >