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

Fixed #6329

pull/6381/head
tugcekucukoglu 2024-09-11 10:54:05 +03:00
parent 167b6b2ab0
commit 89f6f2fe84
2 changed files with 7 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
apps/showcase/doc/selectbutton/AccessibilityDoc.vue
View File

@ -1,10 +1,7 @@
<template> <template>
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs"> <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3> <h3>Screen Reader</h3>
<p> <p>SelectButton component uses ToggleButton internally and has <i>group</i> role. Value to describe the component can be provided via <i>aria-labelledby</i> property.</p>
SelectButton component uses hidden native checkbox role for multiple selection and hidden radio role for single selection that is only visible to screen readers. Value to describe the component can be provided via
<i>aria-labelledby</i> property.
</p>
<h3>Keyboard Support</h3> <h3>Keyboard Support</h3>
<p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p> <p>Keyboard interaction is derived from the native browser handling of checkboxs in a group.</p>
@ -19,25 +16,11 @@
<tbody> <tbody>
<tr> <tr>
<td><i>tab</i></td> <td><i>tab</i></td>
<td>Moves focus to the first selected option, if there is none then first option receives the focus.</td> <td>Moves focus to the next the focusable element in the page tab sequence.</td>
</tr> </tr>
<tr> <tr>
<td> <td><i>shift</i> + <i>tab</i></td>
<span class="inline-flex flex-col"> <td>Moves focus to the previous the focusable element in the page tab sequence.</td>
<i class="mb-1">right arrow</i>
<i>up arrow</i>
</span>
</td>
<td>Moves focus to the previous option.</td>
</tr>
<tr>
<td>
<span class="inline-flex flex-col">
<i class="mb-1">left arrow</i>
<i>down arrow</i>
</span>
</td>
<td>Moves focus to the next option.</td>
</tr> </tr>
<tr> <tr>
<td><i>space</i></td> <td><i>space</i></td>

6
apps/showcase/doc/togglebutton/AccessibilityDoc.vue
View File

@ -2,9 +2,9 @@
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs"> <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3> <h3>Screen Reader</h3>
<p> <p>
ToggleButton component uses a hidden native checkbox element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props, ToggleButton component uses a native button element as the switch element internally that is only visible to screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props, it is
it is highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label highly suggested to use either of these props as the component changes the label displayed which will result in screen readers to read different labels when the component receives focus. To prevent this, always provide an aria label that
that does not change related to state. does not change related to state.
</p> </p>
<DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" /> <DocSectionCode :code="code" hideToggleCode hideStackBlitz v-bind="$attrs" />