Fixed #3287 - OverlayPanel: deprecate ariaCloseLabel prop

primefaces · Nov 17, 2022 · 16e922d · 16e922d
1 parent acb4a42
commit 16e922d
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 25 deletions.
diff --git a/api-generator/components/overlaypanel.js b/api-generator/components/overlaypanel.js
@@ -29,12 +29,6 @@ const OverlayPanelProps = [
         default: 'true',
         description: 'Whether to automatically manage layering.'
     },
-    {
-        name: 'ariaCloseLabel',
-        type: 'string',
-        default: 'close',
-        description: 'Aria label of the close icon.'
-    },
     {
         name: 'breakpoints',
         type: 'object',

diff --git a/src/components/overlaypanel/OverlayPanel.d.ts b/src/components/overlaypanel/OverlayPanel.d.ts
@@ -48,11 +48,6 @@ export interface OverlayPanelProps {
      * Default value is true.
      */
     autoZIndex?: boolean;
-    /**
-     * Aria label of the close icon.
-     * Default value is 'close'.
-     */
-    ariaCloseLabel?: string;
     /**
      * Object literal to define widths per screen size.
      * @see OverlayPanelBreakpoints

diff --git a/src/components/overlaypanel/OverlayPanel.spec.js b/src/components/overlaypanel/OverlayPanel.spec.js
@@ -14,8 +14,7 @@ describe('OverlayPanel.vue', () => {
                 }
             },
             props: {
-                showCloseIcon: true,
-                ariaCloseLabel: 'exit'
+                showCloseIcon: true
             },
             slots: {
                 default: 'PrimeVue'
@@ -30,6 +29,5 @@ describe('OverlayPanel.vue', () => {
         expect(wrapper.find('.p-overlaypanel-content').exists()).toBe(true);
         expect(wrapper.find('.p-overlaypanel-content').text()).toBe('PrimeVue');
         expect(wrapper.find('.p-overlaypanel-close').exists()).toBe(true);
-        expect(wrapper.find('.p-overlaypanel-close').attributes()['aria-label']).toBe('exit');
     });
 });
diff --git a/src/components/overlaypanel/OverlayPanel.vue b/src/components/overlaypanel/OverlayPanel.vue
@@ -5,7 +5,7 @@
                 <div class="p-overlaypanel-content" @click="onContentClick" @mousedown="onContentClick" @keydown="onContentKeydown">
                     <slot></slot>
                 </div>
-                <button v-if="showCloseIcon" v-ripple class="p-overlaypanel-close p-link" :aria-label="ariaCloseLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown">
+                <button v-if="showCloseIcon" v-ripple class="p-overlaypanel-close p-link" :aria-label="closeAriaLabel" type="button" autofocus @click="hide" @keydown="onButtonKeydown">
                     <span class="p-overlaypanel-close-icon pi pi-times"></span>
                 </button>
             </div>
@@ -45,10 +45,6 @@ export default {
             type: Boolean,
             default: true
         },
-        ariaCloseLabel: {
-            type: String,
-            default: 'close'
-        },
         breakpoints: {
             type: Object,
             default: null
@@ -309,6 +305,9 @@ export default {
         },
         attributeSelector() {
             return UniqueComponentId();
+        },
+        closeAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
         }
     },
     directives: {

diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -95,18 +95,22 @@ toggle(event) {
                         <td>true</td>
                         <td>Whether to automatically manage layering.</td>
                     </tr>
-                    <tr>
-                        <td>ariaCloseLabel</td>
-                        <td>string</td>
-                        <td>close</td>
-                        <td>Aria label of the close icon.</td>
-                    </tr>
                     <tr>
                         <td>breakpoints</td>
                         <td>object</td>
                         <td>null</td>
                         <td>Object literal to define widths per screen size.</td>
                     </tr>
+                    <tr>
+                        <td style="text-decoration: line-through">ariaCloseLabel</td>
+                        <td>string</td>
+                        <td>close</td>
+                        <td>
+                            Aria label of the close icon.
+                            <br />
+                            <b> Deprecated: </b> <i>aria.close</i> can be used in defaults to PrimeVue <router-link to="/locale">Locale</router-link> configuration.
+                        </td>
+                    </tr>
                 </tbody>
             </table>
         </div>