vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #2908 - Improve Panel implementation for Accessibility

pull/2910/head
Tuğçe Küçükoğlu 2022-08-31 10:11:45 +03:00
parent e917116fb7
commit c22d395a9c
4 changed files with 64 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/panel.js
View File

@ -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."
}
];

4
src/components/panel/Panel.d.ts vendored
View File

@ -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 {

13
src/components/panel/Panel.vue
View File

@ -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: {

44
src/views/panel/PanelDoc.vue
View File

@ -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>