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

Accessibility for ColorPicker

pull/2770/head
Tuğçe Küçükoğlu 2022-07-08 13:00:55 +03:00
parent 35556009ca
commit ce89db66f3
1 changed files with 96 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/views/colorpicker/ColorPickerDoc.vue
View File

@ -209,6 +209,102 @@ export default {
</table>
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<h6>Screen Reader</h6>
<p>Specification does not cover a color picker <a href="https://github.com/w3c/aria/issues/930">yet</a> and using a semantic native color picker is not consistent across browsers so currently component is not compatible with screen readers.
In the upcoming versions, text fields will be introduced below the slider section to be able to pick a color using accessible text boxes in hsl, rgba and hex formats.</p>
<h6>Closed State Keyboard Support of Popup ColorPicker</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 color picker button.</td>
</tr>
<tr>
<td><i>space</i></td>
<td>Opens the popup and moves focus to the color slider.</td>
</tr>
</tbody>
</table>
</div>
<h6>Popup 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>enter</i></td>
<td>Selects the color and closes the popup.</td>
</tr>
<tr>
<td><i>space</i></td>
<td>Selects the color and closes the popup.</td>
</tr>
<tr>
<td><i>escape</i></td>
<td>Closes the popup, moves focus to the input.</td>
</tr>
</tbody>
</table>
</div>
<h6>Color Picker Slider</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td><i>arrow keys</i></td>
<td>Changes color.</td>
</tr>
</tbody>
</table>
</div>
<h6>Hue Slider</h6>
<div class="doc-tablewrapper">
<table class="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="inline-flex flex-column">
<i class="mb-1">up arrow</i>
<i>down arrow</i>
</span>
</td>
<td>Changes hue.</td>
</tr>
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>
</AppDoc>