remove DevelopmentSection from form components' docs
Tuğçe Küçükoğlu
parent
5091c4ac6f
commit
238ca06d02
|
|
@ -641,23 +641,22 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role
|
||||||
<p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. The input element has <i>combobox</i> role
|
in addition to <i>aria-autocomplete</i> as "none", <i>aria-haspopup</i> as "dialog" and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup.</p>
|
||||||
in addition to <i>aria-autocomplete</i> as "none", <i>aria-haspopup</i> as "dialog" and <i>aria-expanded</i> attributes. The relation between the input and the popup is created with <i>aria-controls</i> attribute that refers to the id of the popup.</p>
|
<p>The optional calendar button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the <i>chooseDate</i>
|
||||||
<p>The optional calendar button requires includes <i>aria-haspopup</i>, <i>aria-expanded</i> for states along with <i>aria-controls</i> to define the relation between the popup and the button. The value to read is retrieved from the <i>chooseDate</i>
|
key of the aria property from the <router-link to="/locale">locale</router-link> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and appended to the label to be able to notify users
|
||||||
key of the aria property from the <router-link to="/locale">locale</router-link> API. This label is also used for the <i>aria-label</i> of the popup as well. When there is a value selected, it is formatted and appended to the label to be able to notify users
|
about the current value.</p>
|
||||||
about the current value.</p>
|
|
||||||
|
|
||||||
<p>Popup has a <i>dialog</i> role along with <i>aria-modal</i> and <i>aria-label</i>. The navigation buttons at the header has an <i>aria-label</i> retrieved from the <i>prevYear</i>, <i>nextYear</i>, <i>prevMonth</i>, <i>nextMonth</i>,
|
<p>Popup has a <i>dialog</i> role along with <i>aria-modal</i> and <i>aria-label</i>. The navigation buttons at the header has an <i>aria-label</i> retrieved from the <i>prevYear</i>, <i>nextYear</i>, <i>prevMonth</i>, <i>nextMonth</i>,
|
||||||
<i>prevDecade</i> and <i>nextDecade</i> keys of the locale aria API. Similarly month picker button uses the <i>chooseMonth</i> and year picker button uses the <i>chooseYear</i> keys.</p>
|
<i>prevDecade</i> and <i>nextDecade</i> keys of the locale aria API. Similarly month picker button uses the <i>chooseMonth</i> and year picker button uses the <i>chooseYear</i> keys.</p>
|
||||||
|
|
||||||
<p>Main date table uses <i>grid</i> role that contains th elements with <i>col</i> as the scope along with <i>abbr</i> tag resolving to the full name of the month. Each date cell has an <i>aria-label</i> referring to the full date value.
|
<p>Main date table uses <i>grid</i> role that contains th elements with <i>col</i> as the scope along with <i>abbr</i> tag resolving to the full name of the month. Each date cell has an <i>aria-label</i> referring to the full date value.
|
||||||
Buttons at the footer utilize their readable labels as <i>aria-label</i> as well. Selected date also receives the <i>aria-selected</i> attribute.</p>
|
Buttons at the footer utilize their readable labels as <i>aria-label</i> as well. Selected date also receives the <i>aria-selected</i> attribute.</p>
|
||||||
|
|
||||||
<p>Timepicker spinner buttons get their labels for <i>aria-label</i> from the aria locale API using the <i>prevHour</i>, <i>nextHour</i>, <i>prevMinute</i>, <i>nextMinute</i>, <i>prevSecond</i>, <i>nextSecond</i>, <i>am</i> and <i>pm</i> keys.</p>
|
<p>Timepicker spinner buttons get their labels for <i>aria-label</i> from the aria locale API using the <i>prevHour</i>, <i>nextHour</i>, <i>prevMinute</i>, <i>nextMinute</i>, <i>prevSecond</i>, <i>nextSecond</i>, <i>am</i> and <i>pm</i> keys.</p>
|
||||||
|
|
||||||
<p>Calendar also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p>
|
<p>Calendar also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.</p>
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<label for="date1">Date</label>
|
<label for="date1">Date</label>
|
||||||
|
|
@ -670,160 +669,159 @@ export default {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Choose Date Button Keyboard Support</h6>
|
<h6>Choose Date Button Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>space</i></td>
|
<td><i>space</i></td>
|
||||||
<td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
|
<td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>enter</i></td>
|
<td><i>enter</i></td>
|
||||||
<td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
|
<td>Opens popup and moves focus to the selected date, if there is none focuses on today.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h6>Popup Keyboard Support</h6>
|
<h6>Popup Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>escape</i></td>
|
<td><i>escape</i></td>
|
||||||
<td>Closes the popup and moves focus to the input element.</td>
|
<td>Closes the popup and moves focus to the input element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the next focusable element within the popup.</td>
|
<td>Moves focus to the next focusable element within the popup.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>shift</i> + <i>tab</i></td>
|
<td><i>shift</i> + <i>tab</i></td>
|
||||||
<td>Moves focus to the next focusable element within the popup.</td>
|
<td>Moves focus to the next focusable element within the popup.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h6>Header Buttons Keyboard Support</h6>
|
<h6>Header Buttons Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>enter</i></td>
|
<td><i>enter</i></td>
|
||||||
<td>Triggers the button action.</td>
|
<td>Triggers the button action.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>space</i></td>
|
<td><i>space</i></td>
|
||||||
<td>Triggers the button action.</td>
|
<td>Triggers the button action.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h6>Date Grid Keyboard Support</h6>
|
<h6>Date Grid Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>enter</i></td>
|
<td><i>enter</i></td>
|
||||||
<td>Selects the date, closes the popup and moves focus to the input element.</td>
|
<td>Selects the date, closes the popup and moves focus to the input element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>space</i></td>
|
<td><i>space</i></td>
|
||||||
<td>Selects the date, closes the popup and moves focus to the input element.</td>
|
<td>Selects the date, closes the popup and moves focus to the input element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>up arrow</i></td>
|
<td><i>up arrow</i></td>
|
||||||
<td>Moves focus to the same day of the previous week.</td>
|
<td>Moves focus to the same day of the previous week.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>down arrow</i></td>
|
<td><i>down arrow</i></td>
|
||||||
<td>Moves focus to the same day of the next week.</td>
|
<td>Moves focus to the same day of the next week.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>right arrow</i></td>
|
<td><i>right arrow</i></td>
|
||||||
<td>Moves focus to the next day.</td>
|
<td>Moves focus to the next day.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>left arrow</i></td>
|
<td><i>left arrow</i></td>
|
||||||
<td>Moves focus to the previous day.</td>
|
<td>Moves focus to the previous day.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>home</i></td>
|
<td><i>home</i></td>
|
||||||
<td>Moves focus to the first day of the current week.</td>
|
<td>Moves focus to the first day of the current week.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>end</i></td>
|
<td><i>end</i></td>
|
||||||
<td>Moves focus to the last day of the current week.</td>
|
<td>Moves focus to the last day of the current week.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>page up</i></td>
|
<td><i>page up</i></td>
|
||||||
<td>Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.</td>
|
<td>Changes the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>shift</i> + <i>page up</i></td>
|
<td><i>shift</i> + <i>page up</i></td>
|
||||||
<td>Changes the date to previous year in date picker mode. Has no effect in month or year picker</td>
|
<td>Changes the date to previous year in date picker mode. Has no effect in month or year picker</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>page down</i></td>
|
<td><i>page down</i></td>
|
||||||
<td>Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.</td>
|
<td>Changes the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>shift</i> + <i>page down</i></td>
|
<td><i>shift</i> + <i>page down</i></td>
|
||||||
<td>Changes the date to next year in date picker mode. Has no effect in month or year picker</td>
|
<td>Changes the date to next year in date picker mode. Has no effect in month or year picker</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h6>Footer Buttons Keyboard Support</h6>
|
<h6>Footer Buttons Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>enter</i></td>
|
<td><i>enter</i></td>
|
||||||
<td>Triggers the button action.</td>
|
<td>Triggers the button action.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>space</i></td>
|
<td><i>space</i></td>
|
||||||
<td>Triggers the button action.</td>
|
<td>Triggers the button action.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -204,9 +204,8 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
|
||||||
<p>Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
|
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<label for="chkbox1">Remember Me</label>
|
<label for="chkbox1">Remember Me</label>
|
||||||
|
|
@ -219,28 +218,28 @@ export default {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the checkbox.</td>
|
<td>Moves focus to the checkbox.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>space</i></td>
|
<td><i>space</i></td>
|
||||||
<td>Toggles the checked state.</td>
|
<td>Toggles the checked state.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -187,10 +187,9 @@ import Chips from 'primevue/chips';
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
|
||||||
<p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
|
Chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.</p>
|
||||||
Chip list uses <i>listbox</i> role with <i>aria-orientation</i> set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.</p>
|
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<label for="chips1">Tags</label>
|
<label for="chips1">Tags</label>
|
||||||
|
|
@ -203,62 +202,62 @@ import Chips from 'primevue/chips';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Input Field Keyboard Support</h6>
|
<h6>Input Field Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the input element</td>
|
<td>Moves focus to the input element</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>enter</i></td>
|
<td><i>enter</i></td>
|
||||||
<td>Adds a new chips using the input field value.</td>
|
<td>Adds a new chips using the input field value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>backspace</i></td>
|
<td><i>backspace</i></td>
|
||||||
<td>Deletes the previous chip if the input field is empty.</td>
|
<td>Deletes the previous chip if the input field is empty.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>left arrow</i></td>
|
<td><i>left arrow</i></td>
|
||||||
<td>Moves focus to the previous chip if available and input field is empty.</td>
|
<td>Moves focus to the previous chip if available and input field is empty.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h6>Chip 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>left arrow</i></td>
|
||||||
|
<td>Moves focus to the previous chip if available.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><i>right arrow</i></td>
|
||||||
|
<td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><i>backspace</i></td>
|
||||||
|
<td>Deletes the chips and adds focus to the input field.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h6>Chip 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>left arrow</i></td>
|
|
||||||
<td>Moves focus to the previous chip if available.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><i>right arrow</i></td>
|
|
||||||
<td>Moves focus to the next chip, if there is none then input field receives the focus.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><i>backspace</i></td>
|
|
||||||
<td>Deletes the chips and adds focus to the input field.</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -204,100 +204,99 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<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.
|
||||||
<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>
|
||||||
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>
|
<h6>Closed State Keyboard Support of Popup ColorPicker</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the color picker button.</td>
|
<td>Moves focus to the color picker button.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>space</i></td>
|
<td><i>space</i></td>
|
||||||
<td>Opens the popup and moves focus to the color slider.</td>
|
<td>Opens the popup and moves focus to the color slider.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h6>Popup Keyboard Support</h6>
|
<h6>Popup Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>enter</i></td>
|
<td><i>enter</i></td>
|
||||||
<td>Selects the color and closes the popup.</td>
|
<td>Selects the color and closes the popup.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>space</i></td>
|
<td><i>space</i></td>
|
||||||
<td>Selects the color and closes the popup.</td>
|
<td>Selects the color and closes the popup.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>escape</i></td>
|
<td><i>escape</i></td>
|
||||||
<td>Closes the popup, moves focus to the input.</td>
|
<td>Closes the popup, moves focus to the input.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h6>Color Picker Slider</h6>
|
<h6>Color Picker Slider</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>arrow keys</i></td>
|
<td><i>arrow keys</i></td>
|
||||||
<td>Changes color.</td>
|
<td>Changes color.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<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>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -159,10 +159,8 @@ import Editor from 'primevue/editor';
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<p>Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support
|
||||||
<p>Quill performs generally well in terms of accessibility. The elements in the toolbar can be tabbed and have the necessary ARIA roles/attributes for screen readers. One known limitation is the lack of arrow key support
|
for <a href="https://github.com/quilljs/quill/issues/1031">dropdowns</a> in the toolbar that may be overcome with a custom toolbar.</p>
|
||||||
for <a href="https://github.com/quilljs/quill/issues/1031">dropdowns</a> in the toolbar that may be overcome with a custom toolbar.</p>
|
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p>
|
<p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p>
|
||||||
|
|
|
||||||
|
|
@ -125,9 +125,8 @@ import InputMask from 'primevue/inputmask';
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
|
||||||
<p>InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
|
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<label for="date">Date</label>
|
<label for="date">Date</label>
|
||||||
|
|
@ -140,24 +139,23 @@ import InputMask from 'primevue/inputmask';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the input.</td>
|
<td>Moves focus to the input.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -406,10 +406,9 @@ Vertical
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
|
||||||
<p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
|
The input element uses <i>spinbutton</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes.</p>
|
||||||
The input element uses <i>spinbutton</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes.</p>
|
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<label for="price">Price</label>
|
<label for="price">Price</label>
|
||||||
|
|
@ -422,40 +421,39 @@ Vertical
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the input.</td>
|
<td>Moves focus to the input.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>up arrow</i></td>
|
<td><i>up arrow</i></td>
|
||||||
<td>Increments the value.</td>
|
<td>Increments the value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>down arrow</i></td>
|
<td><i>down arrow</i></td>
|
||||||
<td>Decrements the value.</td>
|
<td>Decrements the value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>home</i></td>
|
<td><i>home</i></td>
|
||||||
<td>Set the minimum value if provided.</td>
|
<td>Set the minimum value if provided.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>end</i></td>
|
<td><i>end</i></td>
|
||||||
<td>Set the maximum value if provided.</td>
|
<td>Set the maximum value if provided.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -156,9 +156,8 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>InputSwitch component uses a hidden native checkbox element with <i>switch</i> role internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
|
||||||
<p>InputSwitch component uses a hidden native checkbox element with <i>switch</i> role internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
|
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<label for="switch1">Remember Me</label>
|
<label for="switch1">Remember Me</label>
|
||||||
|
|
@ -171,28 +170,27 @@ export default {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the switch.</td>
|
<td>Moves focus to the switch.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>space</i></td>
|
<td><i>space</i></td>
|
||||||
<td>Toggles the checked state.</td>
|
<td>Toggles the checked state.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -144,9 +144,8 @@ import InputText from 'primevue/inputtext';
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
|
||||||
<p>InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
|
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<label for="firstname">Firstname</label>
|
<label for="firstname">Firstname</label>
|
||||||
|
|
@ -159,24 +158,23 @@ import InputText from 'primevue/inputtext';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the input.</td>
|
<td>Moves focus to the input.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -210,10 +210,9 @@ data() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>Knob element component uses <i>slider</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using
|
||||||
<p>Knob element component uses <i>slider</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using
|
<i>aria-labelledby</i> and <i>aria-label</i> props.</p>
|
||||||
<i>aria-labelledby</i> and <i>aria-label</i> props.</p>
|
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<span id="label_number">Number</span>
|
<span id="label_number">Number</span>
|
||||||
|
|
@ -223,58 +222,57 @@ data() {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the slider.</td>
|
<td>Moves focus to the slider.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="inline-flex flex-column">
|
<span class="inline-flex flex-column">
|
||||||
<i class="mb-1">left arrow</i>
|
<i class="mb-1">left arrow</i>
|
||||||
<i>down arrow</i>
|
<i>down arrow</i>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>Decrements the value.</td>
|
<td>Decrements the value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="inline-flex flex-column">
|
<span class="inline-flex flex-column">
|
||||||
<i class="mb-1">right arrow</i>
|
<i class="mb-1">right arrow</i>
|
||||||
<i>up arrow</i>
|
<i>up arrow</i>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>Increments the value.</td>
|
<td>Increments the value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>home</i></td>
|
<td><i>home</i></td>
|
||||||
<td>Set the minimum value.</td>
|
<td>Set the minimum value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>end</i></td>
|
<td><i>end</i></td>
|
||||||
<td>Set the maximum value.</td>
|
<td>Set the maximum value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>page up</i></td>
|
<td><i>page up</i></td>
|
||||||
<td>Increments the value by 10 steps.</td>
|
<td>Increments the value by 10 steps.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>page down</i></td>
|
<td><i>page down</i></td>
|
||||||
<td>Decrements the value by 10 steps.</td>
|
<td>Decrements the value by 10 steps.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -252,10 +252,9 @@ import Password from 'primevue/password';
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Screen reader
|
||||||
<p>Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props. Screen reader
|
is notified about the changes to the strength of the password using a section that has <i>aria-live</i> while typing.</p>
|
||||||
is notified about the changes to the strength of the password using a section that has <i>aria-live</i> while typing.</p>
|
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<label for="pwd1">Password</label>
|
<label for="pwd1">Password</label>
|
||||||
|
|
@ -268,28 +267,27 @@ import Password from 'primevue/password';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the input.</td>
|
<td>Moves focus to the input.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>escape</i></td>
|
<td><i>escape</i></td>
|
||||||
<td>Hides the strength meter if open.</td>
|
<td>Hides the strength meter if open.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -155,9 +155,8 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
|
||||||
<p>RadioButton component uses a hidden native radio button element internally that is only visible to screen readers. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
|
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<label for="rb1">One</label>
|
<label for="rb1">One</label>
|
||||||
|
|
@ -170,46 +169,45 @@ export default {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus.</td>
|
<td>Moves focus to the checked radio button, if there is none within the group then first radio button receives the focus.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="inline-flex flex-column">
|
<span class="inline-flex flex-column">
|
||||||
<i class="mb-1">left arrow</i>
|
<i class="mb-1">left arrow</i>
|
||||||
<i>up arrow</i>
|
<i>up arrow</i>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>Moves focus to the previous radio button, if there is none then last radio button receives the focus.</td>
|
<td>Moves focus to the previous radio button, if there is none then last radio button receives the focus.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="inline-flex flex-column">
|
<span class="inline-flex flex-column">
|
||||||
<i class="mb-1">right arrow</i>
|
<i class="mb-1">right arrow</i>
|
||||||
<i>down arrow</i>
|
<i>down arrow</i>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>Moves focus to the next radio button, if there is none then first radio button receives the focus.</td>
|
<td>Moves focus to the next radio button, if there is none then first radio button receives the focus.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>space</i></td>
|
<td><i>space</i></td>
|
||||||
<td>If the focused radio button is unchecked, changes the state to checked.</td>
|
<td>If the focused radio button is unchecked, changes the state to checked.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -140,51 +140,49 @@ import Rating from 'primevue/rating';
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <router-link to="/locale">locale</router-link> API via <i>star</i> and <i>stars</i> of the <i>aria</i> property.</p>
|
||||||
<p>Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the <router-link to="/locale">locale</router-link> API via <i>star</i> and <i>stars</i> of the <i>aria</i> property.</p>
|
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<p>Keyboard interaction is derived from the native browser handling of radio buttons in a group.</p>
|
<p>Keyboard interaction is derived from the native browser handling of radio buttons in a group.</p>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the star representing the value, if there is none then first star receives the focus.</td>
|
<td>Moves focus to the star representing the value, if there is none then first star receives the focus.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="inline-flex flex-column">
|
<span class="inline-flex flex-column">
|
||||||
<i class="mb-1">left arrow</i>
|
<i class="mb-1">left arrow</i>
|
||||||
<i>up arrow</i>
|
<i>up arrow</i>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>Moves focus to the previous star, if there is none then last radio button receives the focus.</td>
|
<td>Moves focus to the previous star, if there is none then last radio button receives the focus.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="inline-flex flex-column">
|
<span class="inline-flex flex-column">
|
||||||
<i class="mb-1">right arrow</i>
|
<i class="mb-1">right arrow</i>
|
||||||
<i>down arrow</i>
|
<i>down arrow</i>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>Moves focus to the next star, if there is none then first star receives the focus.</td>
|
<td>Moves focus to the next star, if there is none then first star receives the focus.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>space</i></td>
|
<td><i>space</i></td>
|
||||||
<td>If the focused star does not represent the value, changes the value to the star value.</td>
|
<td>If the focused star does not represent the value, changes the value to the star value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -179,52 +179,50 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<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.
|
||||||
<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>
|
||||||
Value to describe the component can be provided via <i>aria-labelledby</i> property.</p>
|
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<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>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<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 first selected option, if there is none then first option receives the focus.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="inline-flex flex-column">
|
<span class="inline-flex flex-column">
|
||||||
<i class="mb-1">right arrow</i>
|
<i class="mb-1">right arrow</i>
|
||||||
<i>up arrow</i>
|
<i>up arrow</i>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>Moves focus to the previous option.</td>
|
<td>Moves focus to the previous option.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="inline-flex flex-column">
|
<span class="inline-flex flex-column">
|
||||||
<i class="mb-1">left arrow</i>
|
<i class="mb-1">left arrow</i>
|
||||||
<i>down arrow</i>
|
<i>down arrow</i>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>Moves focus to the next option.</td>
|
<td>Moves focus to the next option.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>space</i></td>
|
<td><i>space</i></td>
|
||||||
<td>Toggles the checked state of a button.</td>
|
<td>Toggles the checked state of a button.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -176,10 +176,9 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>Slider element component uses <i>slider</i> role on the handle in addition to the <i>aria-orientation</i>, <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using
|
||||||
<p>Slider element component uses <i>slider</i> role on the handle in addition to the <i>aria-orientation</i>, <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes. Value to describe the component can be defined using
|
<i>aria-labelledby</i> and <i>aria-label</i> props.</p>
|
||||||
<i>aria-labelledby</i> and <i>aria-label</i> props.</p>
|
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<span id="label_number">Number</span>
|
<span id="label_number">Number</span>
|
||||||
|
|
@ -189,58 +188,57 @@ export default {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the slider.</td>
|
<td>Moves focus to the slider.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="inline-flex flex-column">
|
<span class="inline-flex flex-column">
|
||||||
<i class="mb-1">left arrow</i>
|
<i class="mb-1">left arrow</i>
|
||||||
<i>up arrow</i>
|
<i>up arrow</i>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>Decrements the value.</td>
|
<td>Decrements the value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<span class="inline-flex flex-column">
|
<span class="inline-flex flex-column">
|
||||||
<i class="mb-1">right arrow</i>
|
<i class="mb-1">right arrow</i>
|
||||||
<i>down arrow</i>
|
<i>down arrow</i>
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>Increments the value.</td>
|
<td>Increments the value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>home</i></td>
|
<td><i>home</i></td>
|
||||||
<td>Set the minimum value.</td>
|
<td>Set the minimum value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>end</i></td>
|
<td><i>end</i></td>
|
||||||
<td>Set the maximum value.</td>
|
<td>Set the maximum value.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>page up</i></td>
|
<td><i>page up</i></td>
|
||||||
<td>Increments the value by 10 steps.</td>
|
<td>Increments the value by 10 steps.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>page down</i></td>
|
<td><i>page down</i></td>
|
||||||
<td>Decrements the value by 10 steps.</td>
|
<td>Decrements the value by 10 steps.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -79,9 +79,8 @@ import Textarea from 'primevue/textarea';
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
|
||||||
<p>Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via <i>label</i> tag combined with <i>id</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.</p>
|
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<label for="address1">Address 1</label>
|
<label for="address1">Address 1</label>
|
||||||
|
|
@ -94,24 +93,23 @@ import Textarea from 'primevue/textarea';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the input.</td>
|
<td>Moves focus to the input.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -180,10 +180,9 @@ export default {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>ToggleButton component uses an element with <i>button</i> role and updates <i>aria-pressed</i> state for screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props, it is highly suggested to use
|
||||||
<p>ToggleButton component uses an element with <i>button</i> role and updates <i>aria-pressed</i> state for screen readers. Value to describe the component can be defined with <i>aria-labelledby</i> or <i>aria-label</i> props, 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 that does not change related to state.</p>
|
||||||
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 does not change related to state.</p>
|
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<span id="rememberme">Remember Me</span>
|
<span id="rememberme">Remember Me</span>
|
||||||
|
|
@ -193,29 +192,28 @@ export default {
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<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>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the button.</td>
|
<td>Moves focus to the button.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>space</i></td>
|
<td><i>space</i></td>
|
||||||
<td>Toggles the checked state.</td>
|
<td>Toggles the checked state.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
|
|
@ -90,11 +90,10 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5>Accessibility</h5>
|
<h5>Accessibility</h5>
|
||||||
<DevelopmentSection>
|
<h6>Screen Reader</h6>
|
||||||
<h6>Screen Reader</h6>
|
<p>TriStateCheckbox component uses an element with <i>checkbox</i> role. Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Component adds an element with
|
||||||
<p>TriStateCheckbox component uses an element with <i>checkbox</i> role. Value to describe the component can either be provided with <i>aria-labelledby</i> or <i>aria-label</i> props. Component adds an element with
|
<i>aria-live</i> attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the <i>trueLabel</i>, <i>falseLabel</i> and <i>nullLabel</i> keys of the <i>aria</i>
|
||||||
<i>aria-live</i> attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the <i>trueLabel</i>, <i>falseLabel</i> and <i>nullLabel</i> keys of the <i>aria</i>
|
property from the <router-link to="/locale">locale</router-link> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.</p>
|
||||||
property from the <router-link to="/locale">locale</router-link> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.</p>
|
|
||||||
|
|
||||||
<pre v-code><code>
|
<pre v-code><code>
|
||||||
<span id="chkbox1">Remember Me</span>
|
<span id="chkbox1">Remember Me</span>
|
||||||
|
|
@ -104,32 +103,31 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
|
||||||
|
|
||||||
</code></pre>
|
</code></pre>
|
||||||
|
|
||||||
<h6>Keyboard Support</h6>
|
<h6>Keyboard Support</h6>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Key</th>
|
<th>Key</th>
|
||||||
<th>Function</th>
|
<th>Function</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>tab</i></td>
|
<td><i>tab</i></td>
|
||||||
<td>Moves focus to the checkbox.</td>
|
<td>Moves focus to the checkbox.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>space</i></td>
|
<td><i>space</i></td>
|
||||||
<td>Toggles between the values.</td>
|
<td>Toggles between the values.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i>enter</i></td>
|
<td><i>enter</i></td>
|
||||||
<td>Toggles between the values.</td>
|
<td>Toggles between the values.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</DevelopmentSection>
|
|
||||||
|
|
||||||
<h5>Dependencies</h5>
|
<h5>Dependencies</h5>
|
||||||
<p>None.</p>
|
<p>None.</p>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue