Fixed #15546 - Galleria | Keyboard Trap within Galleria component

primefaces · May 13, 2024 · e295088 · e295088
1 parent e3925bf
commit e295088
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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"
                 ></p-galleriaContent>
             </div>
         </div>
@@ -417,6 +419,7 @@ export class Galleria implements OnChanges, OnDestroy {
             [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}"
             [class]="galleriaClass()"
             pFocusTrap
+            [pFocusTrapDisabled]="!fullScreen"
         >
             <button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple [attr.aria-label]="closeAriaLabel()" [attr.data-pc-section]="'closebutton'">
                 <TimesIcon *ngIf="!galleria.closeIconTemplate" [styleClass]="'p-galleria-close-icon'" />
@@ -480,6 +483,8 @@ export class GalleriaContent implements DoCheck {
 
     @Input({ transform: numberAttribute }) numVisible: number | undefined;
 
+    @Input({ transform: booleanAttribute }) fullScreen: boolean;
+
     @Output() maskHide: EventEmitter<boolean> = new EventEmitter();
 
     @Output() activeItemChange: EventEmitter<number> = new EventEmitter();
@@ -498,11 +503,21 @@ export class GalleriaContent implements DoCheck {
 
     private differ: any;
 
-    constructor(public galleria: Galleria, public cd: ChangeDetectorRef, private differs: KeyValueDiffers, public config: PrimeNGConfig) {
+    constructor(public galleria: Galleria, public cd: ChangeDetectorRef, private differs: KeyValueDiffers, public config: PrimeNGConfig, private elementRef: ElementRef) {
         this.id = this.galleria.id || UniqueComponentId();
         this.differ = this.differs.find(this.galleria).create();
     }
 
+    // For custom fullscreen
+    @HostListener('document:fullscreenchange', ['$event'])
+    handleFullscreenChange(event: Event) {
+        if (document?.fullscreenElement === this.elementRef.nativeElement?.children[0]) {
+            this.fullScreen = true;
+        } else {
+            this.fullScreen = false;
+        }
+    }
+
     ngDoCheck(): void {
         if (isPlatformBrowser(this.galleria.platformId)) {
             const changes = this.differ.diff(this.galleria as unknown as Record<string, unknown>);
@@ -649,10 +664,12 @@ export class GalleriaItemSlot {
                     *ngIf="showItemNavigators"
                     type="button"
                     role="navigation"
-                    [ngClass]="{ 'p-galleria-item-prev p-galleria-item-nav p-link': true, 'p-disabled': this.isNavBackwardDisabled() }"
+                    [ngClass]="{ 'p-galleria-item-prev p-galleria-item-nav p-link': true, 'p-galleria-item-nav-focused': leftButtonFocused, 'p-disabled': this.isNavBackwardDisabled() }"
                     (click)="navBackward($event)"
                     [disabled]="isNavBackwardDisabled()"
                     pRipple
+                    (focus)="onButtonFocus('left')"
+                    (blur)="onButtonBlur('left')"
                 >
                     <ChevronLeftIcon *ngIf="!galleria.itemPreviousIconTemplate" [styleClass]="'p-galleria-item-prev-icon'" />
                     <ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate"></ng-template>
@@ -663,11 +680,13 @@ export class GalleriaItemSlot {
                 <button
                     *ngIf="showItemNavigators"
                     type="button"
-                    [ngClass]="{ 'p-galleria-item-next p-galleria-item-nav p-link': true, 'p-disabled': this.isNavForwardDisabled() }"
+                    [ngClass]="{ 'p-galleria-item-next p-galleria-item-nav p-link': true, 'p-galleria-item-nav-focused': rightButtonFocused, 'p-disabled': this.isNavForwardDisabled() }"
                     (click)="navForward($event)"
                     [disabled]="isNavForwardDisabled()"
                     pRipple
                     role="navigation"
+                    (focus)="onButtonFocus('right')"
+                    (blur)="onButtonBlur('right')"
                 >
                     <ChevronRightIcon *ngIf="!galleria.itemNextIconTemplate" [styleClass]="'p-galleria-item-next-icon'" />
                     <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate"></ng-template>
@@ -739,6 +758,10 @@ export class GalleriaItem implements OnChanges {
 
     _activeIndex: number = 0;
 
+    leftButtonFocused: boolean = false;
+
+    rightButtonFocused: boolean = false;
+
     constructor(public galleria: Galleria) {}
 
     ngOnChanges({ autoPlay }: SimpleChanges): void {
@@ -763,6 +786,18 @@ export class GalleriaItem implements OnChanges {
         this.onActiveIndexChange.emit(activeIndex);
     }
 
+    onButtonFocus(pos: 'left' | 'right') {
+        if (pos === 'left') {
+            this.leftButtonFocused = true;
+        } else this.rightButtonFocused = true;
+    }
+
+    onButtonBlur(pos: 'left' | 'right') {
+        if (pos === 'left') {
+            this.leftButtonFocused = false;
+        } else this.rightButtonFocused = false;
+    }
+
     stopTheSlideShow() {
         if (this.slideShowActive && this.stopSlideShow) {
             this.stopSlideShow.emit();