From a59fb53535d31f3019291c457832eee7ff85bc9c Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 30 Nov 2023 23:06:40 +0300
Subject: [PATCH] Refactor #4908 - For Galleria

---
 components/lib/config/PrimeVue.js           |  2 +-
 components/lib/galleria/BaseGalleria.vue    |  8 ++++++++
 components/lib/galleria/Galleria.d.ts       |  8 ++++++++
 components/lib/galleria/Galleria.vue        |  2 +-
 components/lib/galleria/GalleriaContent.vue | 12 +++++++++++-
 doc/configuration/locale/LocaleApiDoc.vue   |  2 +-
 6 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/components/lib/config/PrimeVue.js b/components/lib/config/PrimeVue.js
index de1f40376..d0daa7d23 100644
--- a/components/lib/config/PrimeVue.js
+++ b/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',
diff --git a/components/lib/galleria/BaseGalleria.vue b/components/lib/galleria/BaseGalleria.vue
index 983445518..51aade029 100644
--- a/components/lib/galleria/BaseGalleria.vue
+++ b/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,
diff --git a/components/lib/galleria/Galleria.d.ts b/components/lib/galleria/Galleria.d.ts
index 9bf4a532c..08b2a70c3 100755
--- a/components/lib/galleria/Galleria.d.ts
+++ b/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}
diff --git a/components/lib/galleria/Galleria.vue b/components/lib/galleria/Galleria.vue
index 39c39c5d4..b04839093 100755
--- a/components/lib/galleria/Galleria.vue
+++ b/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>
diff --git a/components/lib/galleria/GalleriaContent.vue b/components/lib/galleria/GalleriaContent.vue
index ac460a3a0..f089885f5 100755
--- a/components/lib/galleria/GalleriaContent.vue
+++ b/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>
diff --git a/doc/configuration/locale/LocaleApiDoc.vue b/doc/configuration/locale/LocaleApiDoc.vue
index 414d25878..7469c5296 100644
--- a/doc/configuration/locale/LocaleApiDoc.vue
+++ b/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>