Fixed #2907 - Improve Fieldset implementation for Accessibility
Tuğçe Küçükoğlu
parent
c457fd9759
commit
e917116fb7
|
|
@ -17,6 +17,12 @@ const FieldsetProps = [
|
|||
type: "boolean",
|
||||
default: "true",
|
||||
description: "Defines the default visibility state of the content."
|
||||
},
|
||||
{
|
||||
name: "toggleButtonProps",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "Uses to pass the custom value to read for the anchor inside the component."
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -25,6 +25,10 @@ export interface FieldsetProps {
|
|||
* Defines the default visibility state of the content.
|
||||
*/
|
||||
collapsed?: boolean | undefined;
|
||||
/**
|
||||
* Uses to pass the custom value to read for the anchor inside the component.
|
||||
*/
|
||||
toggleButtonProps?: string | undefined;
|
||||
}
|
||||
|
||||
export interface FieldsetSlots {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
<slot name="legend" v-if="!toggleable">
|
||||
<span class="p-fieldset-legend-text" :id="ariaId + '_header'">{{legend}}</span>
|
||||
</slot>
|
||||
<a tabindex="0" v-if="toggleable" @click="toggle" @keydown.enter="toggle" v-ripple
|
||||
:id="ariaId + '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed">
|
||||
<a tabindex="0" v-if="toggleable" role="button" :id="ariaId + '_header'" :aria-controls="ariaId + '_content'" :aria-expanded="!d_collapsed" :aria-label="toggleButtonProps||legend"
|
||||
@click="toggle" @keydown="onKeyDown" v-ripple>
|
||||
<span :class="iconClass"></span>
|
||||
<slot name="legend">
|
||||
<span class="p-fieldset-legend-text">{{legend}}</span>
|
||||
|
|
@ -13,8 +13,7 @@
|
|||
</a>
|
||||
</legend>
|
||||
<transition name="p-toggleable-content">
|
||||
<div class="p-toggleable-content" v-show="!d_collapsed"
|
||||
role="region" :id="ariaId + '_content'" :aria-labelledby="ariaId + '_header'">
|
||||
<div class="p-toggleable-content" v-show="!d_collapsed" role="region" :id="ariaId + '_content'" :aria-labelledby="ariaId + '_header'">
|
||||
<div class="p-fieldset-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
|
@ -33,11 +32,12 @@ export default {
|
|||
props: {
|
||||
legend: String,
|
||||
toggleable: Boolean,
|
||||
collapsed: Boolean
|
||||
collapsed: Boolean,
|
||||
toggleButtonProps: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
d_collapsed: this.collapsed
|
||||
d_collapsed: this.collapsed
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -53,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: {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</Fieldset>
|
||||
|
||||
<h5>Toggleable</h5>
|
||||
<Fieldset legend="Header" :toggleable="true">
|
||||
<Fieldset legend="Header" :toggleable="true" toggleButtonProps="button">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||
|
|
|
|||
|
|
@ -97,6 +97,12 @@ import Fieldset from 'primevue/fieldset';
|
|||
<td>boolean</td>
|
||||
<td>null</td>
|
||||
<td>Defines the default visibility state of the content.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggleButtonProps</td>
|
||||
<td>string</td>
|
||||
<td>null</td>
|
||||
<td>Uses to pass the custom value to read for the anchor inside the component.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
@ -154,25 +160,64 @@ import Fieldset from 'primevue/fieldset';
|
|||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>fieldset</td>
|
||||
<td>p-fieldset</td>
|
||||
<td>Fieldset element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fieldset-toggleable</td>
|
||||
<td>p-fieldset-toggleable</td>
|
||||
<td>Toggleable fieldset element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fieldset-legend</td>
|
||||
<td>p-fieldset-legend</td>
|
||||
<td>Legend element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>fieldset-content</td>
|
||||
<td>p-fieldset-content</td>
|
||||
<td>Content element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h5>Accessibility</h5>
|
||||
<DevelopmentSection>
|
||||
<h6>Screen Reader</h6>
|
||||
<p>Fieldset component uses the semantic <i>fieldset</i> element. When toggleable option is enabled, a clickable element with <i>button</i> role is included inside the <i>legend</i> element, this button
|
||||
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>legend</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue