Fixed #3233 - Improve Sidebar implementation for Accessibility

primefaces · Nov 11, 2022 · 670324b · 670324b
1 parent 4b8dd3a
commit 670324b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 37 deletions.
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
@@ -1,12 +1,12 @@
 <template>
     <Portal>
         <transition name="p-sidebar" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
-            <div v-if="visible" :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" :aria-labelledby="ariaId" v-bind="$attrs">
+            <div v-if="visible" :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="$attrs">
                 <div class="p-sidebar-header">
                     <div v-if="$slots.header" class="p-sidebar-header-content">
                         <slot name="header"></slot>
                     </div>
-                    <button v-if="showCloseIcon" v-ripple class="p-sidebar-close p-sidebar-icon p-link" @click="hide" :aria-label="closeAriaLabel" type="button">
+                    <button v-if="showCloseIcon" v-ripple type="button" class="p-sidebar-close p-sidebar-icon p-link" :aria-label="closeAriaLabel" @click="hide">
                         <span :class="['p-sidebar-close-icon', closeIcon]" />
                     </button>
                 </div>
@@ -22,7 +22,7 @@
 import FocusTrap from 'primevue/focustrap';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
-import { DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import { DomHandler, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'Sidebar',
@@ -63,12 +63,10 @@ export default {
         }
     },
     mask: null,
-    documentKeydownListener: null,
     maskClickListener: null,
     container: null,
     beforeUnmount() {
         this.destroyModal();
-        this.unbindDocumentKeyDownListener();
 
         if (this.container && this.autoZIndex) {
             ZIndexUtils.clear(this.container);
@@ -82,7 +80,6 @@ export default {
         },
         onEnter(el) {
             this.$emit('show');
-            this.bindDocumentKeyDownListener();
 
             if (this.autoZIndex) {
                 ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal);
@@ -101,11 +98,6 @@ export default {
                 this.disableModality();
             }
         },
-        onKeyDown(event) {
-            if (event.code === 'Escape') {
-                this.hide();
-            }
-        },
         onAfterLeave(el) {
             if (this.autoZIndex) {
                 ZIndexUtils.clear(el);
@@ -149,24 +141,17 @@ export default {
                 this.mask.addEventListener('click', this.maskClickListener);
             }
         },
+        onKeydown(event) {
+            if (event.code === 'Escape') {
+                this.hide();
+            }
+        },
         unbindMaskClickListener() {
             if (this.maskClickListener) {
                 this.mask.removeEventListener('click', this.maskClickListener);
                 this.maskClickListener = null;
             }
         },
-        bindDocumentKeyDownListener() {
-            if (!this.documentKeydownListener) {
-                this.documentKeydownListener = this.onKeyDown.bind(this);
-                window.document.addEventListener('keydown', this.documentKeydownListener);
-            }
-        },
-        unbindDocumentKeyDownListener() {
-            if (this.documentKeydownListener) {
-                window.document.removeEventListener('keydown', this.documentKeydownListener);
-                this.documentKeydownListener = null;
-            }
-        },
         destroyModal() {
             if (this.mask) {
                 this.unbindMaskClickListener();
@@ -195,14 +180,11 @@ export default {
         },
         closeAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
-        },
-        ariaId() {
-            return UniqueComponentId();
         }
     },
     directives: {
-        ripple: Ripple,
-        focustrap: FocusTrap
+        focustrap: FocusTrap,
+        ripple: Ripple
     },
     components: {
         Portal: Portal

diff --git a/src/views/sidebar/SidebarDoc.vue b/src/views/sidebar/SidebarDoc.vue
@@ -112,10 +112,14 @@ import Sidebar from 'primevue/sidebar';
                         <td>Whether to a modal layer behind the sidebar.</td>
                     </tr>
                     <tr>
-                        <td>ariaCloseLabel</td>
+                        <td style="text-decoration: line-through">ariaCloseLabel</td>
                         <td>string</td>
                         <td>close</td>
-                        <td>Aria label of the close icon.</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>
@@ -237,17 +241,17 @@ import Sidebar from 'primevue/sidebar';
         <p>Trigger element also requires <i>aria-expanded</i> and <i>aria-controls</i> to be handled explicitly.</p>
 
         <pre v-code><code>
-&lt;Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible ? true : false" /&gt;
+&lt;Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/&gt;
 
-&lt;Sidebar id="sbar" v-model="visible" role="region"&gt;
+&lt;Sidebar id="sbar" v-model:visible="visible" role="region" &gt;
     &lt;p&gt;Content&lt;/p&gt;
 &lt;/Sidebar&gt;
 
 </code></pre>
 
         <h6>Overlay Keyboard Support</h6>
-        <div className="doc-tablewrapper">
-            <table className="doc-table">
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
                 <thead>
                     <tr>
                         <th>Key</th>
@@ -269,15 +273,15 @@ import Sidebar from 'primevue/sidebar';
                         <td>
                             <i>escape</i>
                         </td>
-                        <td>Closes the dialog if <i>closeOnEscape</i> is true.</td>
+                        <td>Closes the dialog.</td>
                     </tr>
                 </tbody>
             </table>
         </div>
 
         <h6>Close Button Keyboard Support</h6>
-        <div className="doc-tablewrapper">
-            <table className="doc-table">
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
                 <thead>
                     <tr>
                         <th>Key</th>