primevue-mirror/apps/showcase/doc/organizationchart/AccessibilityDoc.vue

42 lines
1.5 KiB
Vue

<template>
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3>
<p>
Component currently uses a table based implementation and does not provide high level of screen reader support, a nested list implementation replacement is planned with aria roles and attributes aligned to a tree widget for high level of
reader support in the upcoming versions.
</p>
<h3>Keyboard Support</h3>
<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 through the focusable elements within the chart.</td>
</tr>
<tr>
<td>
<i>enter</i>
</td>
<td>Toggles the expanded state of a node.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Toggles the expanded state of a node.</td>
</tr>
</tbody>
</table>
</div>
</DocSectionText>
</template>