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

remove DevelopmentSection from form components' docs

pull/2835/head
Tuğçe Küçükoğlu 2022-08-04 17:38:16 +03:00
parent 5091c4ac6f
commit 238ca06d02
18 changed files with 762 additions and 795 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/calendar/CalendarDoc.vue
View File

@ -641,7 +641,6 @@ export default {
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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
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>
@ -823,7 +822,6 @@ export default {
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

3
src/views/checkbox/CheckboxDoc.vue
View File

@ -204,7 +204,6 @@ export default {
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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>
@ -240,7 +239,7 @@ export default {
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

3
src/views/chips/ChipsDoc.vue
View File

@ -187,7 +187,6 @@ import Chips from 'primevue/chips';
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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.
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>
@ -258,7 +257,7 @@ import Chips from 'primevue/chips';
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

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

@ -204,7 +204,6 @@ export default {
</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>
@ -297,7 +296,7 @@ export default {
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

2
src/views/editor/EditorDoc.vue
View File

@ -159,10 +159,8 @@ import Editor from 'primevue/editor';
</div>
<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
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>
<p><a href="http://quilljs.com">Quill</a> Editor 1.3+.</p>

2
src/views/inputmask/InputMaskDoc.vue
View File

@ -125,7 +125,6 @@ import InputMask from 'primevue/inputmask';
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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>
@ -157,7 +156,6 @@ import InputMask from 'primevue/inputmask';
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

2
src/views/inputnumber/InputNumberDoc.vue
View File

@ -406,7 +406,6 @@ Vertical
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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 uses <i>spinbutton</i> role in addition to the <i>aria-valuemin</i>, <i>aria-valuemax</i> and <i>aria-valuenow</i> attributes.</p>
@ -455,7 +454,6 @@ Vertical
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

2
src/views/inputswitch/InputSwitchDoc.vue
View File

@ -156,7 +156,6 @@ export default {
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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>
@ -192,7 +191,6 @@ export default {
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

2
src/views/inputtext/InputTextDoc.vue
View File

@ -144,7 +144,6 @@ import InputText from 'primevue/inputtext';
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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>
@ -176,7 +175,6 @@ import InputText from 'primevue/inputtext';
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

2
src/views/knob/KnobDoc.vue
View File

@ -210,7 +210,6 @@ data() {
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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
<i>aria-labelledby</i> and <i>aria-label</i> props.</p>
@ -274,7 +273,6 @@ data() {
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

2
src/views/password/PasswordDoc.vue
View File

@ -252,7 +252,6 @@ import Password from 'primevue/password';
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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
is notified about the changes to the strength of the password using a section that has <i>aria-live</i> while typing.</p>
@ -289,7 +288,6 @@ import Password from 'primevue/password';
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

2
src/views/radiobutton/RadioButtonDoc.vue
View File

@ -155,7 +155,6 @@ export default {
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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>
@ -209,7 +208,6 @@ export default {
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

2
src/views/rating/RatingDoc.vue
View File

@ -140,7 +140,6 @@ import Rating from 'primevue/rating';
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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>
@ -184,7 +183,6 @@ import Rating from 'primevue/rating';
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

2
src/views/selectbutton/SelectButtonDoc.vue
View File

@ -179,7 +179,6 @@ export default {
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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.
Value to describe the component can be provided via <i>aria-labelledby</i> property.</p>
@ -224,7 +223,6 @@ export default {
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

2
src/views/slider/SliderDoc.vue
View File

@ -176,7 +176,6 @@ export default {
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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
<i>aria-labelledby</i> and <i>aria-label</i> props.</p>
@ -240,7 +239,6 @@ export default {
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

2
src/views/textarea/TextareaDoc.vue
View File

@ -79,7 +79,6 @@ import Textarea from 'primevue/textarea';
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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>
@ -111,7 +110,6 @@ import Textarea from 'primevue/textarea';
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

2
src/views/togglebutton/ToggleButtonDoc.vue
View File

@ -180,7 +180,6 @@ export default {
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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
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>
@ -215,7 +214,6 @@ export default {
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>

2
src/views/tristatecheckbox/TriStateCheckboxDoc.vue
View File

@ -90,7 +90,6 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
</div>
<h5>Accessibility</h5>
<DevelopmentSection>
<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
<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>
@ -129,7 +128,6 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
</tbody>
</table>
</div>
</DevelopmentSection>
<h5>Dependencies</h5>
<p>None.</p>