primevue 3.20.0 → 3.22.0

package/galleria/galleria.esm.js

@@ -1,9 +1,10 @@
+import FocusTrap from 'primevue/focustrap';
+import Portal from 'primevue/portal';
 import { DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
-import { resolveDirective, openBlock, createElementBlock, createElementVNode, withDirectives, normalizeClass, createCommentVNode, createBlock, resolveDynamicComponent, Fragment, renderList, withKeys, normalizeStyle, resolveComponent, createVNode, withCtx, Transition, mergeProps } from 'vue';
-import Portal from 'primevue/portal';
+import { resolveDirective, openBlock, createElementBlock, createElementVNode, withDirectives, normalizeClass, createCommentVNode, createBlock, resolveDynamicComponent, Fragment, renderList, mergeProps, normalizeStyle, resolveComponent, createVNode, withCtx, Transition } from 'vue';
 
-var script$4 = {
+var script$3 = {
     name: 'GalleriaItem',
     emits: ['start-slideshow', 'stop-slideshow', 'update:activeIndex'],
     props: {
@@ -42,6 +43,10 @@ var script$4 = {
         templates: {
             type: null,
             default: null
+        },
+        id: {
+            type: String,
+            default: null
         }
     },
     mounted() {
@@ -94,10 +99,21 @@ var script$4 = {
                 this.$emit('update:activeIndex', index);
             }
         },
-        onIndicatorKeyDown(index) {
-            this.stopSlideShow();
+        onIndicatorKeyDown(event, index) {
+            switch (event.code) {
+                case 'Enter':
+                case 'Space':
+                    this.stopSlideShow();
 
-            this.$emit('update:activeIndex', index);
+                    this.$emit('update:activeIndex', index);
+                    event.preventDefault();
+                    break;
+
+                case 'ArrowDown':
+                case 'ArrowUp':
+                    event.preventDefault();
+                    break;
+            }
         },
         isIndicatorItemActive(index) {
             return this.activeIndex === index;
@@ -107,6 +123,12 @@ var script$4 = {
         },
         isNavForwardDisabled() {
             return !this.circular && this.activeIndex === this.value.length - 1;
+        },
+        ariaSlideNumber(value) {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slideNumber.replace(/{slideNumber}/g, value) : undefined;
+        },
+        ariaPageLabel(value) {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;
         }
     },
     computed: {
@@ -128,6 +150,9 @@ var script$4 = {
                     'p-disabled': this.isNavForwardDisabled()
                 }
             ];
+        },
+        ariaSlideLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slide : undefined;
         }
     },
     directives: {
@@ -135,15 +160,15 @@ var script$4 = {
     }
 };
 
-const _hoisted_1$2 = { class: "p-galleria-item-wrapper" };
+const _hoisted_1$3 = { class: "p-galleria-item-wrapper" };
 const _hoisted_2$2 = { class: "p-galleria-item-container" };
 const _hoisted_3$2 = ["disabled"];
 const _hoisted_4$2 = /*#__PURE__*/createElementVNode("span", { class: "p-galleria-item-prev-icon pi pi-chevron-left" }, null, -1);
 const _hoisted_5$2 = [
   _hoisted_4$2
 ];
-const _hoisted_6$1 = { class: "p-galleria-item" };
-const _hoisted_7 = ["disabled"];
+const _hoisted_6$2 = ["id", "aria-label", "aria-roledescription"];
+const _hoisted_7$1 = ["disabled"];
 const _hoisted_8 = /*#__PURE__*/createElementVNode("span", { class: "p-galleria-item-next-icon pi pi-chevron-right" }, null, -1);
 const _hoisted_9 = [
   _hoisted_8
@@ -156,7 +181,7 @@ const _hoisted_11 = {
   key: 0,
   class: "p-galleria-indicators p-reset"
 };
-const _hoisted_12 = ["onClick", "onMouseenter", "onKeydown"];
+const _hoisted_12 = ["aria-label", "aria-selected", "aria-controls", "onClick", "onMouseenter", "onKeydown"];
 const _hoisted_13 = {
   key: 0,
   type: "button",
@@ -167,7 +192,7 @@ const _hoisted_13 = {
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = resolveDirective("ripple");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1$2, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$3, [
     createElementVNode("div", _hoisted_2$2, [
       ($props.showItemNavigators)
         ? withDirectives((openBlock(), createElementBlock("button", {
@@ -180,14 +205,20 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
             [_directive_ripple]
           ])
         : createCommentVNode("", true),
-      createElementVNode("div", _hoisted_6$1, [
+      createElementVNode("div", {
+        id: $props.id + '_item_' + $props.activeIndex,
+        class: "p-galleria-item",
+        role: "group",
+        "aria-label": $options.ariaSlideNumber($props.activeIndex + 1),
+        "aria-roledescription": $options.ariaSlideLabel
+      }, [
         ($props.templates.item)
           ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.item), {
               key: 0,
               item: $options.activeItem
             }, null, 8, ["item"]))
           : createCommentVNode("", true)
-      ]),
+      ], 8, _hoisted_6$2),
       ($props.showItemNavigators)
         ? withDirectives((openBlock(), createElementBlock("button", {
             key: 1,
@@ -195,7 +226,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
             class: normalizeClass($options.navForwardClass),
             onClick: _cache[1] || (_cache[1] = $event => ($options.navForward($event))),
             disabled: $options.isNavForwardDisabled()
-          }, _hoisted_9, 10, _hoisted_7)), [
+          }, _hoisted_9, 10, _hoisted_7$1)), [
             [_directive_ripple]
           ])
         : createCommentVNode("", true),
@@ -215,11 +246,14 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
           (openBlock(true), createElementBlock(Fragment, null, renderList($props.value, (item, index) => {
             return (openBlock(), createElementBlock("li", {
               key: `p-galleria-indicator-${index}`,
+              class: normalizeClass(['p-galleria-indicator', { 'p-highlight': $options.isIndicatorItemActive(index) }]),
               tabindex: "0",
+              "aria-label": $options.ariaPageLabel(index + 1),
+              "aria-selected": $props.activeIndex === index,
+              "aria-controls": $props.id + '_item_' + index,
               onClick: $event => ($options.onIndicatorClick(index)),
               onMouseenter: $event => ($options.onIndicatorMouseEnter(index)),
-              onKeydown: withKeys($event => ($options.onIndicatorKeyDown(index)), ["enter"]),
-              class: normalizeClass(['p-galleria-indicator', { 'p-highlight': $options.isIndicatorItemActive(index) }])
+              onKeydown: $event => ($options.onIndicatorKeyDown($event, index))
             }, [
               (!$props.templates['indicator'])
                 ? (openBlock(), createElementBlock("button", _hoisted_13))
@@ -237,9 +271,9 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$4.render = render$3;
+script$3.render = render$3;
 
-var script$3 = {
+var script$2 = {
     name: 'GalleriaThumbnails',
     emits: ['stop-slideshow', 'update:activeIndex'],
     props: {
@@ -286,6 +320,14 @@ var script$3 = {
         templates: {
             type: null,
             default: null
+        },
+        prevButtonProps: {
+            type: null,
+            default: null
+        },
+        nextButtonProps: {
+            type: null,
+            default: null
         }
     },
     startPos: null,
@@ -454,6 +496,86 @@ var script$3 = {
                 this.$emit('update:activeIndex', selectedItemIndex);
             }
         },
+        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;
+            }
+        },
+        onRightKey() {
+            const indicators = DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item');
+            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.$refs.itemsContainer, '.p-galleria-thumbnail-item');
+            const activeIndex = this.findFocusedIndicatorIndex();
+
+            this.changedFocusedIndicator(activeIndex, indicators.length - 1);
+        },
+        onTabKey() {
+            const indicators = [...DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item')];
+            const highlightedIndex = indicators.findIndex((ind) => DomHandler.hasClass(ind, 'p-galleria-thumbnail-item-current'));
+
+            const activeIndicator = DomHandler.findSingle(this.$refs.itemsContainer, '.p-galleria-thumbnail-item > [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.$refs.itemsContainer, '.p-galleria-thumbnail-item')];
+            const activeIndicator = DomHandler.findSingle(this.$refs.itemsContainer, '.p-galleria-thumbnail-item > [tabindex="0"]');
+
+            return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
+        },
+        changedFocusedIndicator(prevInd, nextInd) {
+            const indicators = DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item');
+
+            indicators[prevInd].children[0].tabIndex = '-1';
+            indicators[nextInd].children[0].tabIndex = '0';
+            indicators[nextInd].children[0].focus();
+        },
         onTransitionEnd() {
             if (this.$refs.itemsContainer) {
                 DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden');
@@ -587,6 +709,9 @@ var script$3 = {
         },
         isItemActive(index) {
             return this.firstItemAciveIndex() <= index && this.lastItemActiveIndex() >= index;
+        },
+        ariaPageLabel(value) {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;
         }
     },
     computed: {
@@ -623,6 +748,12 @@ var script$3 = {
                     'pi-chevron-down': this.isVertical
                 }
             ];
+        },
+        ariaPrevButtonLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.prevPageLabel : undefined;
+        },
+        ariaNextButtonLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.nextPageLabel : undefined;
         }
     },
     directives: {
@@ -630,29 +761,31 @@ var script$3 = {
     }
 };
 
-const _hoisted_1$1 = { class: "p-galleria-thumbnail-wrapper" };
+const _hoisted_1$2 = { class: "p-galleria-thumbnail-wrapper" };
 const _hoisted_2$1 = { class: "p-galleria-thumbnail-container" };
-const _hoisted_3$1 = ["disabled"];
-const _hoisted_4$1 = ["tabindex", "onClick", "onKeydown"];
-const _hoisted_5$1 = ["disabled"];
+const _hoisted_3$1 = ["disabled", "aria-label"];
+const _hoisted_4$1 = ["aria-selected", "aria-controls", "onKeydown"];
+const _hoisted_5$1 = ["tabindex", "aria-label", "aria-current", "onClick"];
+const _hoisted_6$1 = ["disabled", "aria-label"];
 
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = resolveDirective("ripple");
 
-  return (openBlock(), createElementBlock("div", _hoisted_1$1, [
+  return (openBlock(), createElementBlock("div", _hoisted_1$2, [
     createElementVNode("div", _hoisted_2$1, [
       ($props.showThumbnailNavigators)
-        ? withDirectives((openBlock(), createElementBlock("button", {
+        ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
             key: 0,
-            class: normalizeClass($options.navBackwardClass),
-            onClick: _cache[0] || (_cache[0] = $event => ($options.navBackward($event))),
+            class: $options.navBackwardClass,
             disabled: $options.isNavBackwardDisabled(),
-            type: "button"
-          }, [
+            type: "button",
+            "aria-label": $options.ariaPrevButtonLabel,
+            onClick: _cache[0] || (_cache[0] = $event => ($options.navBackward($event)))
+          }, $props.prevButtonProps), [
             createElementVNode("span", {
               class: normalizeClass($options.navBackwardIconClass)
             }, null, 2)
-          ], 10, _hoisted_3$1)), [
+          ], 16, _hoisted_3$1)), [
             [_directive_ripple]
           ])
         : createCommentVNode("", true),
@@ -663,6 +796,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
         createElementVNode("div", {
           ref: "itemsContainer",
           class: "p-galleria-thumbnail-items",
+          role: "tablist",
           onTransitionend: _cache[1] || (_cache[1] = (...args) => ($options.onTransitionEnd && $options.onTransitionEnd(...args))),
           onTouchstart: _cache[2] || (_cache[2] = $event => ($options.onTouchStart($event))),
           onTouchmove: _cache[3] || (_cache[3] = $event => ($options.onTouchMove($event))),
@@ -679,13 +813,18 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                                 'p-galleria-thumbnail-item-start': $options.firstItemAciveIndex() === index,
                                 'p-galleria-thumbnail-item-end': $options.lastItemActiveIndex() === index
                             }
-                        ])
+                        ]),
+              role: "tab",
+              "aria-selected": $props.activeIndex === index,
+              "aria-controls": $props.containerId + '_item_' + index,
+              onKeydown: $event => ($options.onThumbnailKeydown($event, index))
             }, [
               createElementVNode("div", {
                 class: "p-galleria-thumbnail-item-content",
-                tabindex: $options.isItemActive(index) ? 0 : null,
-                onClick: $event => ($options.onItemClick(index)),
-                onKeydown: withKeys($event => ($options.onItemClick(index)), ["enter"])
+                tabindex: $props.activeIndex === index ? '0' : '-1',
+                "aria-label": $options.ariaPageLabel(index + 1),
+                "aria-current": $props.activeIndex === index ? 'page' : undefined,
+                onClick: $event => ($options.onItemClick(index))
               }, [
                 ($props.templates.thumbnail)
                   ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.thumbnail), {
@@ -693,23 +832,24 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                       item: item
                     }, null, 8, ["item"]))
                   : createCommentVNode("", true)
-              ], 40, _hoisted_4$1)
-            ], 2))
+              ], 8, _hoisted_5$1)
+            ], 42, _hoisted_4$1))
           }), 128))
         ], 544)
       ], 4),
       ($props.showThumbnailNavigators)
-        ? withDirectives((openBlock(), createElementBlock("button", {
+        ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
             key: 1,
-            class: normalizeClass($options.navForwardClass),
-            onClick: _cache[5] || (_cache[5] = $event => ($options.navForward($event))),
+            class: $options.navForwardClass,
             disabled: $options.isNavForwardDisabled(),
-            type: "button"
-          }, [
+            type: "button",
+            "aria-label": $options.ariaNextButtonLabel,
+            onClick: _cache[5] || (_cache[5] = $event => ($options.navForward($event)))
+          }, $props.nextButtonProps), [
             createElementVNode("span", {
               class: normalizeClass($options.navForwardIconClass)
             }, null, 2)
-          ], 10, _hoisted_5$1)), [
+          ], 16, _hoisted_6$1)), [
             [_directive_ripple]
           ])
         : createCommentVNode("", true)
@@ -717,59 +857,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   ]))
 }
 
-script$3.render = render$2;
-
-var script$2 = {
-    functional: true,
-    props: {
-        item: {
-            type: null,
-            default: null
-        },
-        index: {
-            type: Number,
-            default: 0
-        },
-        templates: {
-            type: null,
-            default: null
-        },
-        type: {
-            type: String,
-            default: null
-        }
-    },
-    render(createElement, context) {
-        const { item, index, templates, type } = context.props;
-        const template = templates && templates[type];
-
-        if (template) {
-            let content;
-
-            switch (type) {
-                case 'item':
-                case 'caption':
-                case 'thumbnail':
-                    content = template({
-                        item
-                    });
-                    break;
-                case 'indicator':
-                    content = template({
-                        index
-                    });
-                    break;
-                default:
-                    content = template({});
-                    break;
-            }
-
-            return content ? [content] : null;
-        }
-
-        return null;
-    }
-};
+script$2.render = render$2;
 
 var script$1 = {
     name: 'GalleriaContent',
@@ -851,29 +939,32 @@ var script$1 = {
                 indicatorPosClass,
                 this.$attrs.containerClass
             ];
+        },
+        closeAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
     components: {
-        GalleriaItem: script$4,
-        GalleriaThumbnails: script$3,
-        GalleriaItemSlot: script$2
+        GalleriaItem: script$3,
+        GalleriaThumbnails: script$2
     },
     directives: {
         ripple: Ripple
     }
 };
 
-const _hoisted_1 = ["id"];
-const _hoisted_2 = /*#__PURE__*/createElementVNode("span", { class: "p-galleria-close-icon pi pi-times" }, null, -1);
-const _hoisted_3 = [
-  _hoisted_2
+const _hoisted_1$1 = ["id"];
+const _hoisted_2 = ["aria-label"];
+const _hoisted_3 = /*#__PURE__*/createElementVNode("span", { class: "p-galleria-close-icon pi pi-times" }, null, -1);
+const _hoisted_4 = [
+  _hoisted_3
 ];
-const _hoisted_4 = {
+const _hoisted_5 = {
   key: 1,
   class: "p-galleria-header"
 };
-const _hoisted_5 = { class: "p-galleria-content" };
-const _hoisted_6 = {
+const _hoisted_6 = ["aria-live"];
+const _hoisted_7 = {
   key: 2,
   class: "p-galleria-footer"
 };
@@ -884,29 +975,35 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = resolveDirective("ripple");
 
   return (_ctx.$attrs.value && _ctx.$attrs.value.length > 0)
-    ? (openBlock(), createElementBlock("div", {
+    ? (openBlock(), createElementBlock("div", mergeProps({
         key: 0,
         id: $data.id,
-        class: normalizeClass($options.galleriaClass),
-        style: normalizeStyle(_ctx.$attrs.containerStyle)
-      }, [
+        class: $options.galleriaClass,
+        style: _ctx.$attrs.containerStyle
+      }, _ctx.$attrs.containerProps), [
         (_ctx.$attrs.fullScreen)
           ? withDirectives((openBlock(), createElementBlock("button", {
               key: 0,
+              autofocus: "",
               type: "button",
               class: "p-galleria-close p-link",
+              "aria-label": $options.closeAriaLabel,
               onClick: _cache[0] || (_cache[0] = $event => (_ctx.$emit('mask-hide')))
-            }, _hoisted_3)), [
+            }, _hoisted_4, 8, _hoisted_2)), [
               [_directive_ripple]
             ])
           : createCommentVNode("", true),
         (_ctx.$attrs.templates && _ctx.$attrs.templates['header'])
-          ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          ? (openBlock(), createElementBlock("div", _hoisted_5, [
               (openBlock(), createBlock(resolveDynamicComponent(_ctx.$attrs.templates['header'])))
             ]))
           : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_5, [
+        createElementVNode("div", {
+          class: "p-galleria-content",
+          "aria-live": _ctx.$attrs.autoPlay ? 'polite' : 'off'
+        }, [
           createVNode(_component_GalleriaItem, {
+            id: $data.id,
             activeIndex: $data.activeIndex,
             "onUpdate:activeIndex": _cache[1] || (_cache[1] = $event => (($data.activeIndex) = $event)),
             slideShowActive: $data.slideShowActive,
@@ -920,7 +1017,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
             autoPlay: _ctx.$attrs.autoPlay,
             onStartSlideshow: $options.startSlideShow,
             onStopSlideshow: $options.stopSlideShow
-          }, null, 8, ["activeIndex", "slideShowActive", "value", "circular", "templates", "showIndicators", "changeItemOnIndicatorHover", "showItemNavigators", "autoPlay", "onStartSlideshow", "onStopSlideshow"]),
+          }, null, 8, ["id", "activeIndex", "slideShowActive", "value", "circular", "templates", "showIndicators", "changeItemOnIndicatorHover", "showItemNavigators", "autoPlay", "onStartSlideshow", "onStopSlideshow"]),
           (_ctx.$attrs.showThumbnails)
             ? (openBlock(), createBlock(_component_GalleriaThumbnails, {
                 key: 0,
@@ -937,16 +1034,18 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 isVertical: $options.isVertical(),
                 contentHeight: _ctx.$attrs.verticalThumbnailViewPortHeight,
                 showThumbnailNavigators: _ctx.$attrs.showThumbnailNavigators,
+                prevButtonProps: _ctx.$attrs.prevButtonProps,
+                nextButtonProps: _ctx.$attrs.nextButtonProps,
                 onStopSlideshow: $options.stopSlideShow
-              }, null, 8, ["activeIndex", "slideShowActive", "containerId", "value", "templates", "numVisible", "responsiveOptions", "circular", "isVertical", "contentHeight", "showThumbnailNavigators", "onStopSlideshow"]))
+              }, null, 8, ["activeIndex", "slideShowActive", "containerId", "value", "templates", "numVisible", "responsiveOptions", "circular", "isVertical", "contentHeight", "showThumbnailNavigators", "prevButtonProps", "nextButtonProps", "onStopSlideshow"]))
             : createCommentVNode("", true)
-        ]),
+        ], 8, _hoisted_6),
         (_ctx.$attrs.templates && _ctx.$attrs.templates['footer'])
-          ? (openBlock(), createElementBlock("div", _hoisted_6, [
+          ? (openBlock(), createElementBlock("div", _hoisted_7, [
               (openBlock(), createBlock(resolveDynamicComponent(_ctx.$attrs.templates['footer'])))
             ]))
           : createCommentVNode("", true)
-      ], 14, _hoisted_1))
+      ], 16, _hoisted_1$1))
     : createCommentVNode("", true)
 }
 
@@ -1045,8 +1144,26 @@ var script = {
             type: String,
             default: null
         },
-        containerStyle: null,
-        containerClass: null
+        containerStyle: {
+            type: null,
+            default: null
+        },
+        containerClass: {
+            type: null,
+            default: null
+        },
+        containerProps: {
+            type: null,
+            default: null
+        },
+        prevButtonProps: {
+            type: null,
+            default: null
+        },
+        nextButtonProps: {
+            type: null,
+            default: null
+        }
     },
     container: null,
     mask: null,
@@ -1079,6 +1196,7 @@ var script = {
         onEnter(el) {
             this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
             DomHandler.addClass(document.body, 'p-overflow-hidden');
+            this.focus();
         },
         onBeforeLeave() {
             DomHandler.addClass(this.mask, 'p-component-overlay-leave');
@@ -1101,6 +1219,13 @@ var script = {
         },
         maskRef(el) {
             this.mask = el;
+        },
+        focus() {
+            let focusTarget = this.container.$el.querySelector('[autofocus]');
+
+            if (focusTarget) {
+                focusTarget.focus();
+            }
         }
     },
     computed: {
@@ -1118,12 +1243,18 @@ var script = {
     components: {
         GalleriaContent: script$1,
         Portal: Portal
+    },
+    directives: {
+        focustrap: FocusTrap
     }
 };
 
+const _hoisted_1 = ["role", "aria-modal"];
+
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_GalleriaContent = resolveComponent("GalleriaContent");
   const _component_Portal = resolveComponent("Portal");
+  const _directive_focustrap = resolveDirective("focustrap");
 
   return ($props.fullScreen)
     ? (openBlock(), createBlock(_component_Portal, { key: 0 }, {
@@ -1132,7 +1263,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ? (openBlock(), createElementBlock("div", {
                 key: 0,
                 ref: $options.maskRef,
-                class: normalizeClass($options.maskContentClass)
+                class: normalizeClass($options.maskContentClass),
+                role: $props.fullScreen ? 'dialog' : 'region',
+                "aria-modal": $props.fullScreen ? 'true' : undefined
               }, [
                 createVNode(Transition, {
                   name: "p-galleria",
@@ -1144,19 +1277,21 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 }, {
                   default: withCtx(() => [
                     ($props.visible)
-                      ? (openBlock(), createBlock(_component_GalleriaContent, mergeProps({
+                      ? withDirectives((openBlock(), createBlock(_component_GalleriaContent, mergeProps({
                           key: 0,
                           ref: $options.containerRef
                         }, _ctx.$props, {
                           onMaskHide: $options.maskHide,
                           templates: _ctx.$slots,
                           onActiveitemChange: $options.onActiveItemChange
-                        }), null, 16, ["onMaskHide", "templates", "onActiveitemChange"]))
+                        }), null, 16, ["onMaskHide", "templates", "onActiveitemChange"])), [
+                          [_directive_focustrap]
+                        ])
                       : createCommentVNode("", true)
                   ]),
                   _: 1
                 }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onAfterLeave"])
-              ], 2))
+              ], 10, _hoisted_1))
             : createCommentVNode("", true)
         ]),
         _: 1
@@ -1194,7 +1329,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-galleria-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-galleria-item-wrapper {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    position: relative;\n}\n.p-galleria-item-container {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    height: 100%;\n}\n.p-galleria-item-nav {\n    position: absolute;\n    top: 50%;\n    margin-top: -0.5rem;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n}\n.p-galleria-item-prev {\n    left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-galleria-item-next {\n    right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n.p-galleria-item {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    height: 100%;\n    width: 100%;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-nav {\n    pointer-events: none;\n    opacity: 0;\n    -webkit-transition: opacity 0.2s ease-in-out;\n    transition: opacity 0.2s ease-in-out;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {\n    pointer-events: all;\n    opacity: 1;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {\n    pointer-events: none;\n}\n.p-galleria-caption {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n\n/* Thumbnails */\n.p-galleria-thumbnail-wrapper {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    overflow: auto;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-galleria-thumbnail-prev,\n.p-galleria-thumbnail-next {\n    -ms-flex-item-align: center;\n        align-self: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-galleria-thumbnail-prev span,\n.p-galleria-thumbnail-next span {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-galleria-thumbnail-container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-galleria-thumbnail-items-container {\n    overflow: hidden;\n    width: 100%;\n}\n.p-galleria-thumbnail-items {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-galleria-thumbnail-item {\n    overflow: auto;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    cursor: pointer;\n    opacity: 0.5;\n}\n.p-galleria-thumbnail-item:hover {\n    opacity: 1;\n    -webkit-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n}\n.p-galleria-thumbnail-item-current {\n    opacity: 1;\n}\n\n/* Positions */\n/* Thumbnails */\n.p-galleria-thumbnails-left .p-galleria-content,\n.p-galleria-thumbnails-right .p-galleria-content {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-galleria-thumbnails-left .p-galleria-item-wrapper,\n.p-galleria-thumbnails-right .p-galleria-item-wrapper {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-galleria-thumbnails-left .p-galleria-item-wrapper,\n.p-galleria-thumbnails-top .p-galleria-item-wrapper {\n    -webkit-box-ordinal-group: 3;\n        -ms-flex-order: 2;\n            order: 2;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,\n.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {\n    -webkit-box-ordinal-group: 2;\n        -ms-flex-order: 1;\n            order: 1;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-container,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-container {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-items,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-items {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    height: 100%;\n}\n\n/* Indicators */\n.p-galleria-indicators {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-galleria-indicator > button {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-galleria-indicators-left .p-galleria-item-wrapper,\n.p-galleria-indicators-right .p-galleria-item-wrapper {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-galleria-indicators-left .p-galleria-item-container,\n.p-galleria-indicators-top .p-galleria-item-container {\n    -webkit-box-ordinal-group: 3;\n        -ms-flex-order: 2;\n            order: 2;\n}\n.p-galleria-indicators-left .p-galleria-indicators,\n.p-galleria-indicators-top .p-galleria-indicators {\n    -webkit-box-ordinal-group: 2;\n        -ms-flex-order: 1;\n            order: 1;\n}\n.p-galleria-indicators-left .p-galleria-indicators,\n.p-galleria-indicators-right .p-galleria-indicators {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-galleria-indicator-onitem .p-galleria-indicators {\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {\n    top: 0;\n    left: 0;\n    width: 100%;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {\n    right: 0;\n    top: 0;\n    height: 100%;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {\n    left: 0;\n    top: 0;\n    height: 100%;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n\n/* FullScreen */\n.p-galleria-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-galleria-close {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n}\n.p-galleria-mask .p-galleria-item-nav {\n    position: fixed;\n    top: 50%;\n    margin-top: -0.5rem;\n}\n\n/* Animation */\n.p-galleria-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-galleria-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-galleria-enter-from,\n.p-galleria-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n.p-galleria-enter-active .p-galleria-item-nav {\n    opacity: 0;\n}\n\n/* Keyboard Support */\n.p-items-hidden .p-galleria-thumbnail-item {\n    visibility: hidden;\n}\n.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {\n    visibility: visible;\n}\n";
+var css_248z = "\n.p-galleria-content {\n    display: flex;\n    flex-direction: column;\n}\n.p-galleria-item-wrapper {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n}\n.p-galleria-item-container {\n    position: relative;\n    display: flex;\n    height: 100%;\n}\n.p-galleria-item-nav {\n    position: absolute;\n    top: 50%;\n    margin-top: -0.5rem;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n}\n.p-galleria-item-prev {\n    left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-galleria-item-next {\n    right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n.p-galleria-item {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-nav {\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {\n    pointer-events: all;\n    opacity: 1;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {\n    pointer-events: none;\n}\n.p-galleria-caption {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n\n/* Thumbnails */\n.p-galleria-thumbnail-wrapper {\n    display: flex;\n    flex-direction: column;\n    overflow: auto;\n    flex-shrink: 0;\n}\n.p-galleria-thumbnail-prev,\n.p-galleria-thumbnail-next {\n    align-self: center;\n    flex: 0 0 auto;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-galleria-thumbnail-prev span,\n.p-galleria-thumbnail-next span {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n.p-galleria-thumbnail-container {\n    display: flex;\n    flex-direction: row;\n}\n.p-galleria-thumbnail-items-container {\n    overflow: hidden;\n    width: 100%;\n}\n.p-galleria-thumbnail-items {\n    display: flex;\n}\n.p-galleria-thumbnail-item {\n    overflow: auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    opacity: 0.5;\n}\n.p-galleria-thumbnail-item:hover {\n    opacity: 1;\n    transition: opacity 0.3s;\n}\n.p-galleria-thumbnail-item-current {\n    opacity: 1;\n}\n\n/* Positions */\n/* Thumbnails */\n.p-galleria-thumbnails-left .p-galleria-content,\n.p-galleria-thumbnails-right .p-galleria-content {\n    flex-direction: row;\n}\n.p-galleria-thumbnails-left .p-galleria-item-wrapper,\n.p-galleria-thumbnails-right .p-galleria-item-wrapper {\n    flex-direction: row;\n}\n.p-galleria-thumbnails-left .p-galleria-item-wrapper,\n.p-galleria-thumbnails-top .p-galleria-item-wrapper {\n    order: 2;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,\n.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {\n    order: 1;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-container,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-container {\n    flex-direction: column;\n    flex-grow: 1;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-items,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-items {\n    flex-direction: column;\n    height: 100%;\n}\n\n/* Indicators */\n.p-galleria-indicators {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-galleria-indicator > button {\n    display: inline-flex;\n    align-items: center;\n}\n.p-galleria-indicators-left .p-galleria-item-wrapper,\n.p-galleria-indicators-right .p-galleria-item-wrapper {\n    flex-direction: row;\n    align-items: center;\n}\n.p-galleria-indicators-left .p-galleria-item-container,\n.p-galleria-indicators-top .p-galleria-item-container {\n    order: 2;\n}\n.p-galleria-indicators-left .p-galleria-indicators,\n.p-galleria-indicators-top .p-galleria-indicators {\n    order: 1;\n}\n.p-galleria-indicators-left .p-galleria-indicators,\n.p-galleria-indicators-right .p-galleria-indicators {\n    flex-direction: column;\n}\n.p-galleria-indicator-onitem .p-galleria-indicators {\n    position: absolute;\n    display: flex;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {\n    top: 0;\n    left: 0;\n    width: 100%;\n    align-items: flex-start;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {\n    right: 0;\n    top: 0;\n    height: 100%;\n    align-items: flex-end;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    align-items: flex-end;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {\n    left: 0;\n    top: 0;\n    height: 100%;\n    align-items: flex-start;\n}\n\n/* FullScreen */\n.p-galleria-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-galleria-close {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    overflow: hidden;\n}\n.p-galleria-mask .p-galleria-item-nav {\n    position: fixed;\n    top: 50%;\n    margin-top: -0.5rem;\n}\n\n/* Animation */\n.p-galleria-enter-active {\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-galleria-leave-active {\n    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n.p-galleria-enter-from,\n.p-galleria-leave-to {\n    opacity: 0;\n    transform: scale(0.7);\n}\n.p-galleria-enter-active .p-galleria-item-nav {\n    opacity: 0;\n}\n\n/* Keyboard Support */\n.p-items-hidden .p-galleria-thumbnail-item {\n    visibility: hidden;\n}\n.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {\n    visibility: visible;\n}\n";
 styleInject(css_248z);
 
 script.render = render;