primeng 16.1.0 → 16.3.0

package/fesm2022/primeng-galleria.mjs

@@ -14,6 +14,8 @@ import { WindowMinimizeIcon } from 'primeng/icons/windowminimize';
 import * as i3 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
 import { ZIndexUtils, UniqueComponentId } from 'primeng/utils';
+import * as i4 from 'primeng/focustrap';
+import { FocusTrapModule } from 'primeng/focustrap';
 
 /**
  * Galleria is an advanced content gallery component.
@@ -90,6 +92,11 @@ class Galleria {
      * @group Props
      */
     autoPlay = false;
+    /**
+     * When enabled, autorun should stop by click.
+     * @group Props
+     */
+    shouldStopAutoplayByClick = true;
     /**
      * Time in milliseconds to scroll items.
      * @group Props
@@ -181,6 +188,7 @@ class Galleria {
      */
     visibleChange = new EventEmitter();
     mask;
+    container;
     templates;
     _visible = false;
     _activeIndex = 0;
@@ -252,6 +260,9 @@ class Galleria {
         switch (event.toState) {
             case 'visible':
                 this.enableModality();
+                setTimeout(() => {
+                    DomHandler.focus(DomHandler.findSingle(this.container.nativeElement, '[data-pc-section="closebutton"]'));
+                }, 25);
                 break;
             case 'void':
                 DomHandler.addClass(this.mask?.nativeElement, 'p-component-overlay-leave');
@@ -289,9 +300,16 @@ class Galleria {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: Galleria, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: Galleria, selector: "p-galleria", inputs: { activeIndex: "activeIndex", fullScreen: "fullScreen", id: "id", value: "value", numVisible: "numVisible", responsiveOptions: "responsiveOptions", showItemNavigators: "showItemNavigators", showThumbnailNavigators: "showThumbnailNavigators", showItemNavigatorsOnHover: "showItemNavigatorsOnHover", changeItemOnIndicatorHover: "changeItemOnIndicatorHover", circular: "circular", autoPlay: "autoPlay", transitionInterval: "transitionInterval", showThumbnails: "showThumbnails", thumbnailsPosition: "thumbnailsPosition", verticalThumbnailViewPortHeight: "verticalThumbnailViewPortHeight", showIndicators: "showIndicators", showIndicatorsOnItem: "showIndicatorsOnItem", indicatorsPosition: "indicatorsPosition", baseZIndex: "baseZIndex", maskClass: "maskClass", containerClass: "containerClass", containerStyle: "containerStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", visible: "visible" }, outputs: { activeIndexChange: "activeIndexChange", visibleChange: "visibleChange" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
-        <div *ngIf="fullScreen; else windowed">
-            <div *ngIf="maskVisible" #mask [ngClass]="{ 'p-galleria-mask p-component-overlay p-component-overlay-enter': true, 'p-galleria-visible': this.visible }" [class]="maskClass">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: Galleria, selector: "p-galleria", inputs: { activeIndex: "activeIndex", fullScreen: "fullScreen", id: "id", value: "value", numVisible: "numVisible", responsiveOptions: "responsiveOptions", showItemNavigators: "showItemNavigators", showThumbnailNavigators: "showThumbnailNavigators", showItemNavigatorsOnHover: "showItemNavigatorsOnHover", changeItemOnIndicatorHover: "changeItemOnIndicatorHover", circular: "circular", autoPlay: "autoPlay", shouldStopAutoplayByClick: "shouldStopAutoplayByClick", transitionInterval: "transitionInterval", showThumbnails: "showThumbnails", thumbnailsPosition: "thumbnailsPosition", verticalThumbnailViewPortHeight: "verticalThumbnailViewPortHeight", showIndicators: "showIndicators", showIndicatorsOnItem: "showIndicatorsOnItem", indicatorsPosition: "indicatorsPosition", baseZIndex: "baseZIndex", maskClass: "maskClass", containerClass: "containerClass", containerStyle: "containerStyle", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", visible: "visible" }, outputs: { activeIndexChange: "activeIndexChange", visibleChange: "visibleChange" }, host: { classAttribute: "p-element" }, queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+        <div *ngIf="fullScreen; else windowed" #container>
+            <div
+                *ngIf="maskVisible"
+                #mask
+                [ngClass]="{ 'p-galleria-mask p-component-overlay p-component-overlay-enter': true, 'p-galleria-visible': this.visible }"
+                [class]="maskClass"
+                [attr.role]="fullScreen ? 'dialog' : 'region'"
+                [attr.aria-modal]="fullScreen ? 'true' : undefined"
+            >
                 <p-galleriaContent
                     *ngIf="visible"
                     [@animation]="{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }"
@@ -320,8 +338,15 @@ class Galleria {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: Galleria, decorators: [{
             type: Component,
             args: [{ selector: 'p-galleria', template: `
-        <div *ngIf="fullScreen; else windowed">
-            <div *ngIf="maskVisible" #mask [ngClass]="{ 'p-galleria-mask p-component-overlay p-component-overlay-enter': true, 'p-galleria-visible': this.visible }" [class]="maskClass">
+        <div *ngIf="fullScreen; else windowed" #container>
+            <div
+                *ngIf="maskVisible"
+                #mask
+                [ngClass]="{ 'p-galleria-mask p-component-overlay p-component-overlay-enter': true, 'p-galleria-visible': this.visible }"
+                [class]="maskClass"
+                [attr.role]="fullScreen ? 'dialog' : 'region'"
+                [attr.aria-modal]="fullScreen ? 'true' : undefined"
+            >
                 <p-galleriaContent
                     *ngIf="visible"
                     [@animation]="{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }"
@@ -375,6 +400,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], autoPlay: [{
                 type: Input
+            }], shouldStopAutoplayByClick: [{
+                type: Input
             }], transitionInterval: [{
                 type: Input
             }], showThumbnails: [{
@@ -410,6 +437,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }], mask: [{
                 type: ViewChild,
                 args: ['mask']
+            }], container: [{
+                type: ViewChild,
+                args: ['container']
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]
@@ -418,6 +448,7 @@ class GalleriaContent {
     galleria;
     cd;
     differs;
+    config;
     get activeIndex() {
         return this._activeIndex;
     }
@@ -428,16 +459,18 @@ class GalleriaContent {
     numVisible;
     maskHide = new EventEmitter();
     activeItemChange = new EventEmitter();
+    closeButton;
     id;
     _activeIndex = 0;
     slideShowActive = true;
     interval;
     styleClass;
     differ;
-    constructor(galleria, cd, differs) {
+    constructor(galleria, cd, differs, config) {
         this.galleria = galleria;
         this.cd = cd;
         this.differs = differs;
+        this.config = config;
         this.id = this.galleria.id || UniqueComponentId();
         this.differ = this.differs.find(this.galleria).create();
     }
@@ -465,6 +498,9 @@ class GalleriaContent {
         this.slideShowActive = true;
     }
     stopSlideShow() {
+        if (this.galleria.autoPlay && !this.galleria.shouldStopAutoplayByClick) {
+            return;
+        }
         if (this.interval) {
             clearInterval(this.interval);
         }
@@ -484,8 +520,11 @@ class GalleriaContent {
             this.activeItemChange.emit(this.activeIndex);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: GalleriaContent, selector: "p-galleriaContent", inputs: { activeIndex: "activeIndex", value: "value", numVisible: "numVisible" }, outputs: { maskHide: "maskHide", activeItemChange: "activeItemChange" }, ngImport: i0, template: `
+    closeAriaLabel() {
+        return this.config.translation.aria ? this.config.translation.aria.close : undefined;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GalleriaContent, deps: [{ token: Galleria }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i1.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: GalleriaContent, selector: "p-galleriaContent", inputs: { activeIndex: "activeIndex", value: "value", numVisible: "numVisible" }, outputs: { maskHide: "maskHide", activeItemChange: "activeItemChange" }, viewQueries: [{ propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: `
         <div
             [attr.id]="id"
             *ngIf="value && value.length > 0"
@@ -497,16 +536,18 @@ class GalleriaContent {
             }"
             [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}"
             [class]="galleriaClass()"
+            pFocusTrap
         >
-            <button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple>
+            <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'" />
                 <ng-template *ngTemplateOutlet="galleria.closeIconTemplate"></ng-template>
             </button>
             <div *ngIf="galleria.templates && galleria.headerFacet" class="p-galleria-header">
                 <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
             </div>
-            <div class="p-galleria-content">
+            <div class="p-galleria-content" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
                 <p-galleriaItem
+                    [id]="id"
                     [value]="value"
                     [activeIndex]="activeIndex"
                     [circular]="galleria.circular"
@@ -544,7 +585,7 @@ class GalleriaContent {
                 <p-galleriaItemSlot type="footer" [templates]="galleria.templates"></p-galleriaItemSlot>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.Ripple; }), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(function () { return TimesIcon; }), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(function () { return GalleriaItemSlot; }), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }, { kind: "component", type: i0.forwardRef(function () { return GalleriaItem; }), selector: "p-galleriaItem", inputs: ["circular", "value", "showItemNavigators", "showIndicators", "slideShowActive", "changeItemOnIndicatorHover", "autoPlay", "templates", "indicatorFacet", "captionFacet", "activeIndex"], outputs: ["startSlideShow", "stopSlideShow", "onActiveIndexChange"] }, { kind: "component", type: i0.forwardRef(function () { return GalleriaThumbnails; }), selector: "p-galleriaThumbnails", inputs: ["containerId", "value", "isVertical", "slideShowActive", "circular", "responsiveOptions", "contentHeight", "showThumbnailNavigators", "templates", "numVisible", "activeIndex"], outputs: ["onActiveIndexChange", "stopSlideShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i2.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i2.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.Ripple; }), selector: "[pRipple]" }, { kind: "component", type: i0.forwardRef(function () { return TimesIcon; }), selector: "TimesIcon" }, { kind: "directive", type: i0.forwardRef(function () { return i4.FocusTrap; }), selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: i0.forwardRef(function () { return GalleriaItemSlot; }), selector: "p-galleriaItemSlot", inputs: ["templates", "index", "item", "type"] }, { kind: "component", type: i0.forwardRef(function () { return GalleriaItem; }), selector: "p-galleriaItem", inputs: ["id", "circular", "value", "showItemNavigators", "showIndicators", "slideShowActive", "changeItemOnIndicatorHover", "autoPlay", "templates", "indicatorFacet", "captionFacet", "activeIndex"], outputs: ["startSlideShow", "stopSlideShow", "onActiveIndexChange"] }, { kind: "component", type: i0.forwardRef(function () { return GalleriaThumbnails; }), selector: "p-galleriaThumbnails", inputs: ["containerId", "value", "isVertical", "slideShowActive", "circular", "responsiveOptions", "contentHeight", "showThumbnailNavigators", "templates", "numVisible", "activeIndex"], outputs: ["onActiveIndexChange", "stopSlideShow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GalleriaContent, decorators: [{
             type: Component,
@@ -562,16 +603,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }"
             [ngStyle]="!galleria.fullScreen ? galleria.containerStyle : {}"
             [class]="galleriaClass()"
+            pFocusTrap
         >
-            <button *ngIf="galleria.fullScreen" type="button" class="p-galleria-close p-link" (click)="maskHide.emit()" pRipple>
+            <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'" />
                 <ng-template *ngTemplateOutlet="galleria.closeIconTemplate"></ng-template>
             </button>
             <div *ngIf="galleria.templates && galleria.headerFacet" class="p-galleria-header">
                 <p-galleriaItemSlot type="header" [templates]="galleria.templates"></p-galleriaItemSlot>
             </div>
-            <div class="p-galleria-content">
+            <div class="p-galleria-content" [attr.aria-live]="galleria.autoPlay ? 'polite' : 'off'">
                 <p-galleriaItem
+                    [id]="id"
                     [value]="value"
                     [activeIndex]="activeIndex"
                     [circular]="galleria.circular"
@@ -612,7 +655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: Galleria }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }]; }, propDecorators: { activeIndex: [{
+        }], ctorParameters: function () { return [{ type: Galleria }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i1.PrimeNGConfig }]; }, propDecorators: { activeIndex: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -622,6 +665,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Output
             }], activeItemChange: [{
                 type: Output
+            }], closeButton: [{
+                type: ViewChild,
+                args: ['closeButton']
             }] } });
 class GalleriaItemSlot {
     templates;
@@ -701,6 +747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }] } });
 class GalleriaItem {
     galleria;
+    id;
     circular = false;
     value;
     showItemNavigators = false;
@@ -774,9 +821,21 @@ class GalleriaItem {
             this.onActiveIndexChange.emit(index);
         }
     }
-    onIndicatorKeyDown(index) {
-        this.stopTheSlideShow();
-        this.onActiveIndexChange.emit(index);
+    onIndicatorKeyDown(event, index) {
+        switch (event.code) {
+            case 'Enter':
+            case 'Space':
+                this.stopTheSlideShow();
+                this.onActiveIndexChange.emit(index);
+                event.preventDefault();
+                break;
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                break;
+            default:
+                break;
+        }
     }
     isNavForwardDisabled() {
         return !this.circular && this.activeIndex === this.value.length - 1;
@@ -787,13 +846,23 @@ class GalleriaItem {
     isIndicatorItemActive(index) {
         return this.activeIndex === index;
     }
+    ariaSlideLabel() {
+        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.slide : undefined;
+    }
+    ariaSlideNumber(value) {
+        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.slideNumber.replace(/{slideNumber}/g, value) : undefined;
+    }
+    ariaPageLabel(value) {
+        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel.replace(/{page}/g, value) : undefined;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GalleriaItem, deps: [{ token: Galleria }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: GalleriaItem, selector: "p-galleriaItem", inputs: { circular: "circular", value: "value", showItemNavigators: "showItemNavigators", showIndicators: "showIndicators", slideShowActive: "slideShowActive", changeItemOnIndicatorHover: "changeItemOnIndicatorHover", autoPlay: "autoPlay", templates: "templates", indicatorFacet: "indicatorFacet", captionFacet: "captionFacet", activeIndex: "activeIndex" }, outputs: { startSlideShow: "startSlideShow", stopSlideShow: "stopSlideShow", onActiveIndexChange: "onActiveIndexChange" }, usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: GalleriaItem, selector: "p-galleriaItem", inputs: { id: "id", circular: "circular", value: "value", showItemNavigators: "showItemNavigators", showIndicators: "showIndicators", slideShowActive: "slideShowActive", changeItemOnIndicatorHover: "changeItemOnIndicatorHover", autoPlay: "autoPlay", templates: "templates", indicatorFacet: "indicatorFacet", captionFacet: "captionFacet", activeIndex: "activeIndex" }, outputs: { startSlideShow: "startSlideShow", stopSlideShow: "stopSlideShow", onActiveIndexChange: "onActiveIndexChange" }, usesOnChanges: true, ngImport: i0, template: `
         <div class="p-galleria-item-wrapper">
             <div class="p-galleria-item-container">
                 <button
                     *ngIf="showItemNavigators"
                     type="button"
+                    role="navigation"
                     [ngClass]="{ 'p-galleria-item-prev p-galleria-item-nav p-link': true, 'p-disabled': this.isNavBackwardDisabled() }"
                     (click)="navBackward($event)"
                     [disabled]="isNavBackwardDisabled()"
@@ -802,7 +871,9 @@ class GalleriaItem {
                     <ChevronLeftIcon *ngIf="!galleria.itemPreviousIconTemplate" [styleClass]="'p-galleria-item-prev-icon'" />
                     <ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate"></ng-template>
                 </button>
-                <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
+                <div [id]="id + '_item_' + activeIndex" role="group" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()" [style.width]="'100%'">
+                    <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
+                </div>
                 <button
                     *ngIf="showItemNavigators"
                     type="button"
@@ -810,6 +881,7 @@ class GalleriaItem {
                     (click)="navForward($event)"
                     [disabled]="isNavForwardDisabled()"
                     pRipple
+                    role="navigation"
                 >
                     <ChevronRightIcon *ngIf="!galleria.itemNextIconTemplate" [styleClass]="'p-galleria-item-next-icon'" />
                     <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate"></ng-template>
@@ -824,8 +896,11 @@ class GalleriaItem {
                     tabindex="0"
                     (click)="onIndicatorClick(index)"
                     (mouseenter)="onIndicatorMouseEnter(index)"
-                    (keydown.enter)="onIndicatorKeyDown(index)"
+                    (keydown)="onIndicatorKeyDown(event, index)"
                     [ngClass]="{ 'p-galleria-indicator': true, 'p-highlight': isIndicatorItemActive(index) }"
+                    [attr.aria-label]="ariaPageLabel(index + 1)"
+                    [attr.aria-selected]="activeIndex === index"
+                    [attr.aria-controls]="id + '_item_' + index"
                 >
                     <button type="button" tabIndex="-1" class="p-link" *ngIf="!indicatorFacet"></button>
                     <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
@@ -844,6 +919,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 <button
                     *ngIf="showItemNavigators"
                     type="button"
+                    role="navigation"
                     [ngClass]="{ 'p-galleria-item-prev p-galleria-item-nav p-link': true, 'p-disabled': this.isNavBackwardDisabled() }"
                     (click)="navBackward($event)"
                     [disabled]="isNavBackwardDisabled()"
@@ -852,7 +928,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     <ChevronLeftIcon *ngIf="!galleria.itemPreviousIconTemplate" [styleClass]="'p-galleria-item-prev-icon'" />
                     <ng-template *ngTemplateOutlet="galleria.itemPreviousIconTemplate"></ng-template>
                 </button>
-                <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
+                <div [id]="id + '_item_' + activeIndex" role="group" [attr.aria-label]="ariaSlideNumber(activeIndex + 1)" [attr.aria-roledescription]="ariaSlideLabel()" [style.width]="'100%'">
+                    <p-galleriaItemSlot type="item" [item]="activeItem" [templates]="templates" class="p-galleria-item"></p-galleriaItemSlot>
+                </div>
                 <button
                     *ngIf="showItemNavigators"
                     type="button"
@@ -860,6 +938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     (click)="navForward($event)"
                     [disabled]="isNavForwardDisabled()"
                     pRipple
+                    role="navigation"
                 >
                     <ChevronRightIcon *ngIf="!galleria.itemNextIconTemplate" [styleClass]="'p-galleria-item-next-icon'" />
                     <ng-template *ngTemplateOutlet="galleria.itemNextIconTemplate"></ng-template>
@@ -874,8 +953,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     tabindex="0"
                     (click)="onIndicatorClick(index)"
                     (mouseenter)="onIndicatorMouseEnter(index)"
-                    (keydown.enter)="onIndicatorKeyDown(index)"
+                    (keydown)="onIndicatorKeyDown(event, index)"
                     [ngClass]="{ 'p-galleria-indicator': true, 'p-highlight': isIndicatorItemActive(index) }"
+                    [attr.aria-label]="ariaPageLabel(index + 1)"
+                    [attr.aria-selected]="activeIndex === index"
+                    [attr.aria-controls]="id + '_item_' + index"
                 >
                     <button type="button" tabIndex="-1" class="p-link" *ngIf="!indicatorFacet"></button>
                     <p-galleriaItemSlot type="indicator" [index]="index" [templates]="templates"></p-galleriaItemSlot>
@@ -885,7 +967,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: function () { return [{ type: Galleria }]; }, propDecorators: { circular: [{
+        }], ctorParameters: function () { return [{ type: Galleria }]; }, propDecorators: { id: [{
+                type: Input
+            }], circular: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -1113,6 +1197,74 @@ class GalleriaThumbnails {
             this.onActiveIndexChange.emit(this.activeIndex);
         }
     }
+    onThumbnailKeydown(event, index) {
+        if (event.code === 'Enter' || event.code === 'Space') {
+            this.onItemClick(index);
+            event.preventDefault();
+        }
+        switch (event.code) {
+            case 'ArrowRight':
+                this.onRightKey();
+                break;
+            case 'ArrowLeft':
+                this.onLeftKey();
+                break;
+            case 'Home':
+                this.onHomeKey();
+                event.preventDefault();
+                break;
+            case 'End':
+                this.onEndKey();
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                break;
+            case 'Tab':
+                this.onTabKey();
+                break;
+            default:
+                break;
+        }
+    }
+    onRightKey() {
+        const indicators = DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]');
+        const activeIndex = this.findFocusedIndicatorIndex();
+        this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
+    }
+    onLeftKey() {
+        const activeIndex = this.findFocusedIndicatorIndex();
+        this.changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);
+    }
+    onHomeKey() {
+        const activeIndex = this.findFocusedIndicatorIndex();
+        this.changedFocusedIndicator(activeIndex, 0);
+    }
+    onEndKey() {
+        const indicators = DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]');
+        const activeIndex = this.findFocusedIndicatorIndex();
+        this.changedFocusedIndicator(activeIndex, indicators.length - 1);
+    }
+    onTabKey() {
+        const indicators = [...DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]')];
+        const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true);
+        const activeIndicator = DomHandler.findSingle(this.itemsContainer.nativeElement, '[tabindex="0"]');
+        const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+        indicators[activeIndex].children[0].tabIndex = '-1';
+        indicators[highlightedIndex].children[0].tabIndex = '0';
+    }
+    findFocusedIndicatorIndex() {
+        const indicators = [...DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]')];
+        const activeIndicator = DomHandler.findSingle(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"] > [tabindex="0"]');
+        return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+    }
+    changedFocusedIndicator(prevInd, nextInd) {
+        const indicators = DomHandler.find(this.itemsContainer.nativeElement, '[data-pc-section="thumbnailitem"]');
+        indicators[prevInd].children[0].tabIndex = '-1';
+        indicators[nextInd].children[0].tabIndex = '0';
+        indicators[nextInd].children[0].focus();
+    }
     step(dir) {
         let totalShiftedItems = this.totalShiftedItems + dir;
         if (dir < 0 && -1 * totalShiftedItems + this.d_numVisible > this.value.length - 1) {
@@ -1222,11 +1374,28 @@ class GalleriaThumbnails {
             this.thumbnailsStyle.parentNode?.removeChild(this.thumbnailsStyle);
         }
     }
+    ariaPrevButtonLabel() {
+        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.prevPageLabel : undefined;
+    }
+    ariaNextButtonLabel() {
+        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.nextPageLabel : undefined;
+    }
+    ariaPageLabel(value) {
+        return this.galleria.config.translation.aria ? this.galleria.config.translation.aria.pageLabel.replace(/{page}/g, value) : undefined;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GalleriaThumbnails, deps: [{ token: Galleria }, { token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: GalleriaThumbnails, selector: "p-galleriaThumbnails", inputs: { containerId: "containerId", value: "value", isVertical: "isVertical", slideShowActive: "slideShowActive", circular: "circular", responsiveOptions: "responsiveOptions", contentHeight: "contentHeight", showThumbnailNavigators: "showThumbnailNavigators", templates: "templates", numVisible: "numVisible", activeIndex: "activeIndex" }, outputs: { onActiveIndexChange: "onActiveIndexChange", stopSlideShow: "stopSlideShow" }, viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }], ngImport: i0, template: `
         <div class="p-galleria-thumbnail-wrapper">
             <div class="p-galleria-thumbnail-container">
-                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{ 'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled() }" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
+                <button
+                    *ngIf="showThumbnailNavigators"
+                    type="button"
+                    [ngClass]="{ 'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled() }"
+                    (click)="navBackward($event)"
+                    [disabled]="isNavBackwardDisabled()"
+                    pRipple
+                    [attr.aria-label]="ariaPrevButtonLabel()"
+                >
                     <ng-container *ngIf="!galleria.previousThumbnailIconTemplate">
                         <ChevronLeftIcon *ngIf="!isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
                         <ChevronUpIcon *ngIf="isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
@@ -1234,7 +1403,7 @@ class GalleriaThumbnails {
                     <ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate"></ng-template>
                 </button>
                 <div class="p-galleria-thumbnail-items-container" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
-                    <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)">
+                    <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
                         <div
                             *ngFor="let item of value; let index = index"
                             [ngClass]="{
@@ -1244,14 +1413,35 @@ class GalleriaThumbnails {
                                 'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
                                 'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index
                             }"
+                            [attr.aria-selected]="activeIndex === index"
+                            [attr.aria-controls]="containerId + '_item_' + index"
+                            [attr.data-pc-section]="'thumbnailitem'"
+                            [attr.data-p-active]="activeIndex === index"
+                            (keydown)="onThumbnailKeydown($event, index)"
                         >
-                            <div class="p-galleria-thumbnail-item-content" [attr.tabindex]="getTabIndex(index)" (click)="onItemClick(index)" (touchend)="onItemClick(index)" (keydown.enter)="onItemClick(index)">
+                            <div
+                                class="p-galleria-thumbnail-item-content"
+                                [attr.tabindex]="activeIndex === index ? 0 : -1"
+                                [attr.aria-current]="activeIndex === index ? 'page' : undefined"
+                                [attr.aria-label]="ariaPageLabel(index + 1)"
+                                (click)="onItemClick(index)"
+                                (touchend)="onItemClick(index)"
+                                (keydown.enter)="onItemClick(index)"
+                            >
                                 <p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
                             </div>
                         </div>
                     </div>
                 </div>
-                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{ 'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled() }" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>
+                <button
+                    *ngIf="showThumbnailNavigators"
+                    type="button"
+                    [ngClass]="{ 'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled() }"
+                    (click)="navForward($event)"
+                    [disabled]="isNavForwardDisabled()"
+                    pRipple
+                    [attr.aria-label]="ariaNextButtonLabel()"
+                >
                     <ng-container *ngIf="!galleria.nextThumbnailIconTemplate">
                         <ChevronRightIcon *ngIf="!isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
                         <ChevronDownIcon *ngIf="isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
@@ -1269,7 +1459,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     template: `
         <div class="p-galleria-thumbnail-wrapper">
             <div class="p-galleria-thumbnail-container">
-                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{ 'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled() }" (click)="navBackward($event)" [disabled]="isNavBackwardDisabled()" pRipple>
+                <button
+                    *ngIf="showThumbnailNavigators"
+                    type="button"
+                    [ngClass]="{ 'p-galleria-thumbnail-prev p-link': true, 'p-disabled': this.isNavBackwardDisabled() }"
+                    (click)="navBackward($event)"
+                    [disabled]="isNavBackwardDisabled()"
+                    pRipple
+                    [attr.aria-label]="ariaPrevButtonLabel()"
+                >
                     <ng-container *ngIf="!galleria.previousThumbnailIconTemplate">
                         <ChevronLeftIcon *ngIf="!isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
                         <ChevronUpIcon *ngIf="isVertical" [styleClass]="'p-galleria-thumbnail-prev-icon'" />
@@ -1277,7 +1475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     <ng-template *ngTemplateOutlet="galleria.previousThumbnailIconTemplate"></ng-template>
                 </button>
                 <div class="p-galleria-thumbnail-items-container" [ngStyle]="{ height: isVertical ? contentHeight : '' }">
-                    <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)">
+                    <div #itemsContainer class="p-galleria-thumbnail-items" (transitionend)="onTransitionEnd()" (touchstart)="onTouchStart($event)" (touchmove)="onTouchMove($event)" role="tablist">
                         <div
                             *ngFor="let item of value; let index = index"
                             [ngClass]="{
@@ -1287,14 +1485,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                                 'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
                                 'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index
                             }"
+                            [attr.aria-selected]="activeIndex === index"
+                            [attr.aria-controls]="containerId + '_item_' + index"
+                            [attr.data-pc-section]="'thumbnailitem'"
+                            [attr.data-p-active]="activeIndex === index"
+                            (keydown)="onThumbnailKeydown($event, index)"
                         >
-                            <div class="p-galleria-thumbnail-item-content" [attr.tabindex]="getTabIndex(index)" (click)="onItemClick(index)" (touchend)="onItemClick(index)" (keydown.enter)="onItemClick(index)">
+                            <div
+                                class="p-galleria-thumbnail-item-content"
+                                [attr.tabindex]="activeIndex === index ? 0 : -1"
+                                [attr.aria-current]="activeIndex === index ? 'page' : undefined"
+                                [attr.aria-label]="ariaPageLabel(index + 1)"
+                                (click)="onItemClick(index)"
+                                (touchend)="onItemClick(index)"
+                                (keydown.enter)="onItemClick(index)"
+                            >
                                 <p-galleriaItemSlot type="thumbnail" [item]="item" [templates]="templates"></p-galleriaItemSlot>
                             </div>
                         </div>
                     </div>
                 </div>
-                <button *ngIf="showThumbnailNavigators" type="button" [ngClass]="{ 'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled() }" (click)="navForward($event)" [disabled]="isNavForwardDisabled()" pRipple>
+                <button
+                    *ngIf="showThumbnailNavigators"
+                    type="button"
+                    [ngClass]="{ 'p-galleria-thumbnail-next p-link': true, 'p-disabled': this.isNavForwardDisabled() }"
+                    (click)="navForward($event)"
+                    [disabled]="isNavForwardDisabled()"
+                    pRipple
+                    [attr.aria-label]="ariaNextButtonLabel()"
+                >
                     <ng-container *ngIf="!galleria.nextThumbnailIconTemplate">
                         <ChevronRightIcon *ngIf="!isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
                         <ChevronDownIcon *ngIf="isVertical" [ngClass]="'p-galleria-thumbnail-next-icon'" />
@@ -1344,13 +1563,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }] } });
 class GalleriaModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GalleriaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: GalleriaModule, declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails], imports: [CommonModule, SharedModule, RippleModule, TimesIcon, ChevronRightIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon], exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GalleriaModule, imports: [CommonModule, SharedModule, RippleModule, TimesIcon, ChevronRightIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, CommonModule, SharedModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.2", ngImport: i0, type: GalleriaModule, declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails], imports: [CommonModule, SharedModule, RippleModule, TimesIcon, ChevronRightIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, FocusTrapModule], exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GalleriaModule, imports: [CommonModule, SharedModule, RippleModule, TimesIcon, ChevronRightIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, FocusTrapModule, CommonModule, SharedModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: GalleriaModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule, SharedModule, RippleModule, TimesIcon, ChevronRightIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon],
+                    imports: [CommonModule, SharedModule, RippleModule, TimesIcon, ChevronRightIcon, ChevronLeftIcon, WindowMaximizeIcon, WindowMinimizeIcon, FocusTrapModule],
                     exports: [CommonModule, Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails, SharedModule],
                     declarations: [Galleria, GalleriaContent, GalleriaItemSlot, GalleriaItem, GalleriaThumbnails]
                 }]