primevue 3.20.0 → 3.22.0

package/galleria/Galleria.vue

@@ -1,8 +1,8 @@
 <template>
     <Portal v-if="fullScreen">
-        <div v-if="containerVisible" :ref="maskRef" :class="maskContentClass">
+        <div v-if="containerVisible" :ref="maskRef" :class="maskContentClass" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined">
             <transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear>
-                <GalleriaContent v-if="visible" :ref="containerRef" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
+                <GalleriaContent v-if="visible" :ref="containerRef" v-focustrap v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
             </transition>
         </div>
     </Portal>
@@ -10,9 +10,10 @@
 </template>
 
 <script>
-import GalleriaContent from './GalleriaContent.vue';
-import { DomHandler, ZIndexUtils } from 'primevue/utils';
+import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
+import { DomHandler, ZIndexUtils } from 'primevue/utils';
+import GalleriaContent from './GalleriaContent.vue';
 
 export default {
     name: 'Galleria',
@@ -107,8 +108,26 @@ export default {
             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,
@@ -141,6 +160,7 @@ export default {
         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');
@@ -163,6 +183,13 @@ export default {
         },
         maskRef(el) {
             this.mask = el;
+        },
+        focus() {
+            let focusTarget = this.container.$el.querySelector('[autofocus]');
+
+            if (focusTarget) {
+                focusTarget.focus();
+            }
         }
     },
     computed: {
@@ -180,6 +207,9 @@ export default {
     components: {
         GalleriaContent: GalleriaContent,
         Portal: Portal
+    },
+    directives: {
+        focustrap: FocusTrap
     }
 };
 </script>

package/galleria/GalleriaContent.vue

@@ -1,13 +1,14 @@
 <template>
-    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle">
-        <button v-if="$attrs.fullScreen" v-ripple type="button" class="p-galleria-close p-link" @click="$emit('mask-hide')">
+    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="galleriaClass" :style="$attrs.containerStyle" v-bind="$attrs.containerProps">
+        <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" class="p-galleria-close p-link" :aria-label="closeAriaLabel" @click="$emit('mask-hide')">
             <span class="p-galleria-close-icon pi pi-times"></span>
         </button>
         <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
             <component :is="$attrs.templates['header']" />
         </div>
-        <div class="p-galleria-content">
+        <div class="p-galleria-content" :aria-live="$attrs.autoPlay ? 'polite' : 'off'">
             <GalleriaItem
+                :id="id"
                 v-model:activeIndex="activeIndex"
                 v-model:slideShowActive="slideShowActive"
                 :value="$attrs.value"
@@ -34,6 +35,8 @@
                 :isVertical="isVertical()"
                 :contentHeight="$attrs.verticalThumbnailViewPortHeight"
                 :showThumbnailNavigators="$attrs.showThumbnailNavigators"
+                :prevButtonProps="$attrs.prevButtonProps"
+                :nextButtonProps="$attrs.nextButtonProps"
                 @stop-slideshow="stopSlideShow"
             />
         </div>
@@ -44,11 +47,10 @@
 </template>
 
 <script>
+import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
 import GalleriaItem from './GalleriaItem.vue';
 import GalleriaThumbnails from './GalleriaThumbnails.vue';
-import GalleriaItemSlot from './GalleriaItemSlot.vue';
-import Ripple from 'primevue/ripple';
 
 export default {
     name: 'GalleriaContent',
@@ -130,12 +132,14 @@ export default {
                 indicatorPosClass,
                 this.$attrs.containerClass
             ];
+        },
+        closeAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
     components: {
         GalleriaItem: GalleriaItem,
-        GalleriaThumbnails: GalleriaThumbnails,
-        GalleriaItemSlot: GalleriaItemSlot
+        GalleriaThumbnails: GalleriaThumbnails
     },
     directives: {
         ripple: Ripple

package/galleria/GalleriaItem.vue

@@ -4,7 +4,7 @@
             <button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
                 <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
             </button>
-            <div class="p-galleria-item">
+            <div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel">
                 <component v-if="templates.item" :is="templates.item" :item="activeItem" />
             </div>
             <button v-if="showItemNavigators" v-ripple type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
@@ -18,11 +18,14 @@
             <li
                 v-for="(item, index) of value"
                 :key="`p-galleria-indicator-${index}`"
+                :class="['p-galleria-indicator', { 'p-highlight': isIndicatorItemActive(index) }]"
                 tabindex="0"
+                :aria-label="ariaPageLabel(index + 1)"
+                :aria-selected="activeIndex === index"
+                :aria-controls="id + '_item_' + index"
                 @click="onIndicatorClick(index)"
                 @mouseenter="onIndicatorMouseEnter(index)"
-                @keydown.enter="onIndicatorKeyDown(index)"
-                :class="['p-galleria-indicator', { 'p-highlight': isIndicatorItemActive(index) }]"
+                @keydown="onIndicatorKeyDown($event, index)"
             >
                 <button v-if="!templates['indicator']" type="button" tabindex="-1" class="p-link"></button>
                 <component v-if="templates.indicator" :is="templates.indicator" :index="index" />
@@ -73,6 +76,10 @@ export default {
         templates: {
             type: null,
             default: null
+        },
+        id: {
+            type: String,
+            default: null
         }
     },
     mounted() {
@@ -125,10 +132,24 @@ export default {
                 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;
+
+                default:
+                    break;
+            }
         },
         isIndicatorItemActive(index) {
             return this.activeIndex === index;
@@ -138,6 +159,12 @@ export default {
         },
         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: {
@@ -159,6 +186,9 @@ export default {
                     'p-disabled': this.isNavForwardDisabled()
                 }
             ];
+        },
+        ariaSlideLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slide : undefined;
         }
     },
     directives: {

package/galleria/GalleriaThumbnails.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="p-galleria-thumbnail-wrapper">
         <div class="p-galleria-thumbnail-container">
-            <button v-if="showThumbnailNavigators" v-ripple :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" type="button">
+            <button v-if="showThumbnailNavigators" v-ripple :class="navBackwardClass" :disabled="isNavBackwardDisabled()" type="button" :aria-label="ariaPrevButtonLabel" @click="navBackward($event)" v-bind="prevButtonProps">
                 <span :class="navBackwardIconClass"></span>
             </button>
             <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }">
-                <div ref="itemsContainer" class="p-galleria-thumbnail-items" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
+                <div ref="itemsContainer" class="p-galleria-thumbnail-items" role="tablist" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
                     <div
                         v-for="(item, index) of value"
                         :key="`p-galleria-thumbnail-item-${index}`"
@@ -18,14 +18,18 @@
                                 'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index
                             }
                         ]"
+                        role="tab"
+                        :aria-selected="activeIndex === index"
+                        :aria-controls="containerId + '_item_' + index"
+                        @keydown="onThumbnailKeydown($event, index)"
                     >
-                        <div class="p-galleria-thumbnail-item-content" :tabindex="isItemActive(index) ? 0 : null" @click="onItemClick(index)" @keydown.enter="onItemClick(index)">
+                        <div class="p-galleria-thumbnail-item-content" :tabindex="activeIndex === index ? '0' : '-1'" :aria-label="ariaPageLabel(index + 1)" :aria-current="activeIndex === index ? 'page' : undefined" @click="onItemClick(index)">
                             <component v-if="templates.thumbnail" :is="templates.thumbnail" :item="item" />
                         </div>
                     </div>
                 </div>
             </div>
-            <button v-if="showThumbnailNavigators" v-ripple :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" type="button">
+            <button v-if="showThumbnailNavigators" v-ripple :class="navForwardClass" :disabled="isNavForwardDisabled()" type="button" :aria-label="ariaNextButtonLabel" @click="navForward($event)" v-bind="nextButtonProps">
                 <span :class="navForwardIconClass"></span>
             </button>
         </div>
@@ -83,6 +87,14 @@ export default {
         templates: {
             type: null,
             default: null
+        },
+        prevButtonProps: {
+            type: null,
+            default: null
+        },
+        nextButtonProps: {
+            type: null,
+            default: null
         }
     },
     startPos: null,
@@ -251,6 +263,89 @@ export default {
                 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;
+
+                default:
+                    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');
@@ -384,6 +479,9 @@ export default {
         },
         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: {
@@ -420,6 +518,12 @@ export default {
                     '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: {