Refactor #4908 - For Galleria

components/lib/config/PrimeVue.js

@@ -92,7 +92,7 @@ export const defaultOptions = {
             moveToSource: 'Move to Source',
             moveAllToTarget: 'Move All to Target',
             moveAllToSource: 'Move All to Source',
-            pageLabel: '{page}',
+            pageLabel: 'Page {page}',
             firstPageLabel: 'First Page',
             lastPageLabel: 'Last Page',
             nextPageLabel: 'Next Page',

components/lib/galleria/BaseGalleria.vue

@@ -113,6 +113,14 @@ export default {
         nextButtonProps: {
             type: null,
             default: null
+        },
+        ariaLabel: {
+            type: String,
+            default: null
+        },
+        ariaRoledescription: {
+            type: String,
+            default: null
         }
     },
     style: GalleriaStyle,

components/lib/galleria/Galleria.d.ts

@@ -390,6 +390,14 @@ export interface GalleriaProps {
      * Used to pass all properties of the HTMLButtonElement to the next navigation button.
      */
     nextButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Defines a string value that description for the role of the component.
+     */
+    ariaRoledescription?: string | undefined;
     /**
      * Used to pass attributes to DOM elements inside the component.
      * @type {GalleriaPassThroughOptions}

components/lib/galleria/Galleria.vue

@@ -1,6 +1,6 @@
 <template>
     <Portal v-if="fullScreen">
-        <div v-if="containerVisible" :ref="maskRef" :class="[cx('mask'), maskClass]" :role="fullScreen ? 'dialog' : 'region'" :aria-modal="fullScreen ? 'true' : undefined" v-bind="ptm('mask')">
+        <div v-if="containerVisible" :ref="maskRef" :class="[cx('mask'), maskClass]" role="dialog" :aria-modal="fullScreen ? 'true' : undefined" v-bind="ptm('mask')">
             <transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
                 <GalleriaContent v-if="visible" :ref="containerRef" v-focustrap @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" :pt="pt" :unstyled="unstyled" v-bind="$props" />
             </transition>

components/lib/galleria/GalleriaContent.vue

@@ -1,5 +1,15 @@
 <template>
-    <div v-if="$attrs.value && $attrs.value.length > 0" :id="id" :class="[cx('root'), $attrs.containerClass]" :style="$attrs.containerStyle" v-bind="{ ...$attrs.containerProps, ...getPTOptions('root') }" data-pc-name="galleria">
+    <div
+        v-if="$attrs.value && $attrs.value.length > 0"
+        :id="id"
+        role="region"
+        :class="[cx('root'), $attrs.containerClass]"
+        :style="$attrs.containerStyle"
+        :aria-label="$attrs.ariaLabel"
+        :aria-roledescription="$attrs.ariaRoledescription"
+        v-bind="{ ...$attrs.containerProps, ...getPTOptions('root') }"
+        data-pc-name="galleria"
+    >
         <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="getPTOptions('closeButton')">
             <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" :class="cx('closeIcon')" v-bind="getPTOptions('closeIcon')" />
         </button>

doc/configuration/locale/LocaleApiDoc.vue

@@ -358,7 +358,7 @@
                     </tr>
                     <tr>
                         <td>aria.pageLabel</td>
-                        <td>{page}</td>
+                        <td>Page {page}</td>
                     </tr>
                     <tr>
                         <td>aria.firstPageLabel</td>