Fixed #2908 - Improve Panel implementation for Accessibility

primefaces · Aug 31, 2022 · c22d395 · c22d395
1 parent e917116
commit c22d395
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 3 deletions.
diff --git a/api-generator/components/panel.js b/api-generator/components/panel.js
@@ -16,6 +16,12 @@ const PanelProps = [
         type: "boolean",
         default: "null",
         description: "Defines the initial state of panel content."
+    },
+    {
+        name: "toggleButtonProps",
+        type: "string",
+        default: "null",
+        description: "Uses to pass the custom value to read for the anchor inside the component."
     }
 ];
 

diff --git a/src/components/panel/Panel.d.ts b/src/components/panel/Panel.d.ts
@@ -25,6 +25,10 @@ export interface PanelProps {
      * Defines the initial state of panel content.
      */
     collapsed?: boolean;
+    /**
+     * Uses to pass the custom value to read for the button inside the component.
+     */
+    toggleButtonProps?: string | undefined;
 }
 
 export interface PanelSlots {

diff --git a/src/components/panel/Panel.vue b/src/components/panel/Panel.vue
@@ -6,8 +6,8 @@
             </slot>
             <div class="p-panel-icons">
                 <slot name="icons"></slot>
-                <button v-if="toggleable" class="p-panel-header-icon p-panel-toggler p-link" @click="toggle" type="button"
-                    :id="ariaId +  '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed" v-ripple>
+                <button type="button" role="button" v-if="toggleable" class="p-panel-header-icon p-panel-toggler p-link" :id="ariaId + '_header'" :aria-label="toggleButtonProps||header" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed"
+                    @click="toggle" @keydown="onKeyDown" v-ripple>
                     <span :class="{'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed}"></span>
                 </button>
             </div>
@@ -32,7 +32,8 @@ export default {
     props: {
         header: String,
         toggleable: Boolean,
-        collapsed: Boolean
+        collapsed: Boolean,
+        toggleButtonProps: String
     },
     data() {
         return {
@@ -52,6 +53,12 @@ export default {
                 originalEvent: event,
                 value: this.d_collapsed
             });
+        },
+        onKeyDown(event) {
+            if (event.code === 'Enter' || event.code === 'Space') {
+                this.toggle(event);
+                event.preventDefault();
+            }
         }
     },
     computed: {

diff --git a/src/views/panel/PanelDoc.vue b/src/views/panel/PanelDoc.vue
@@ -113,6 +113,12 @@ import Panel from 'primevue/panel';
                         <td>boolean</td>
                         <td>null</td>
                         <td>Defines the initial state of panel content.</td>
+                    </tr>
+                    <tr>
+                        <td>toggleButtonProps</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Uses to pass the custom value to read for the button inside the component.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -201,6 +207,44 @@ import Panel from 'primevue/panel';
 			</table>
 		</div>
 
+        <h5>Accessibility</h5>
+    <DevelopmentSection>
+        <h6>Screen Reader</h6>
+        <p>Toggleable panels use a content toggle button at the header that has <i>aria-controls</i> to define the id of the content section along with <i>aria-expanded</i> for the visibility state. The value to read the button
+        defaults to the value of the <i>header</i> property and can be customized by defining an <i>aria-label</i> or <i>aria-labelledby</i> via the <i>toggleButtonProps</i> property.</p>
+        <p>The content uses <i>region</i>, defines an id that matches the <i>aria-controls</i> of the content toggle button and <i>aria-labelledby</i> referring to the id of the header.</p>
+
+        <h6>Content Toggle Button Keyboard Support</h6>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the next the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>shift</i> + <i>tab</i></td>
+                        <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
+                    </tr>
+                    <tr>
+                        <td><i>enter</i></td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                    <tr>
+                        <td><i>space</i></td>
+                        <td>Toggles the visibility of the content.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DevelopmentSection>
+
 		<h5>Dependencies</h5>
 		<p>None.</p>
     </AppDoc>