From 238ca06d025686151cf3efa5b9e9570311f4d6da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Thu, 4 Aug 2022 17:38:16 +0300 Subject: [PATCH] remove DevelopmentSection from form components' docs --- src/views/calendar/CalendarDoc.vue | 324 +++++++++--------- src/views/checkbox/CheckboxDoc.vue | 49 ++- src/views/chips/ChipsDoc.vue | 117 ++++--- src/views/colorpicker/ColorPickerDoc.vue | 179 +++++----- src/views/editor/EditorDoc.vue | 6 +- src/views/inputmask/InputMaskDoc.vue | 40 +-- src/views/inputnumber/InputNumberDoc.vue | 74 ++-- src/views/inputswitch/InputSwitchDoc.vue | 48 ++- src/views/inputtext/InputTextDoc.vue | 40 +-- src/views/knob/KnobDoc.vue | 110 +++--- src/views/password/PasswordDoc.vue | 50 ++- src/views/radiobutton/RadioButtonDoc.vue | 84 +++-- src/views/rating/RatingDoc.vue | 86 +++-- src/views/selectbutton/SelectButtonDoc.vue | 88 +++-- src/views/slider/SliderDoc.vue | 110 +++--- src/views/textarea/TextareaDoc.vue | 40 +-- src/views/togglebutton/ToggleButtonDoc.vue | 52 ++- .../tristatecheckbox/TriStateCheckboxDoc.vue | 60 ++-- 18 files changed, 762 insertions(+), 795 deletions(-) diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue index d9d7ca7ef..6187d4ff6 100755 --- a/src/views/calendar/CalendarDoc.vue +++ b/src/views/calendar/CalendarDoc.vue @@ -641,23 +641,22 @@ export default {
Accessibility
- -
Screen Reader
-

Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role - in addition to aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the popup.

-

The optional calendar button requires includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button. The value to read is retrieved from the chooseDate - key of the aria property from the locale API. This label is also used for the aria-label 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.

+
Screen Reader
+

Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element has combobox role + in addition to aria-autocomplete as "none", aria-haspopup as "dialog" and aria-expanded attributes. The relation between the input and the popup is created with aria-controls attribute that refers to the id of the popup.

+

The optional calendar button requires includes aria-haspopup, aria-expanded for states along with aria-controls to define the relation between the popup and the button. The value to read is retrieved from the chooseDate + key of the aria property from the locale API. This label is also used for the aria-label 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.

-

Popup has a dialog role along with aria-modal and aria-label. The navigation buttons at the header has an aria-label retrieved from the prevYear, nextYear, prevMonth, nextMonth, - prevDecade and nextDecade keys of the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys.

+

Popup has a dialog role along with aria-modal and aria-label. The navigation buttons at the header has an aria-label retrieved from the prevYear, nextYear, prevMonth, nextMonth, + prevDecade and nextDecade keys of the locale aria API. Similarly month picker button uses the chooseMonth and year picker button uses the chooseYear keys.

-

Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date value. - Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute.

+

Main date table uses grid role that contains th elements with col as the scope along with abbr tag resolving to the full name of the month. Each date cell has an aria-label referring to the full date value. + Buttons at the footer utilize their readable labels as aria-label as well. Selected date also receives the aria-selected attribute.

-

Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour, nextHour, prevMinute, nextMinute, prevSecond, nextSecond, am and pm keys.

+

Timepicker spinner buttons get their labels for aria-label from the aria locale API using the prevHour, nextHour, prevMinute, nextMinute, prevSecond, nextSecond, am and pm keys.

-

Calendar also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.

+

Calendar also includes a hidden section that is only available to screen readers with aria-live as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.


 <label for="date1">Date</label>
@@ -670,160 +669,159 @@ export default {
-
Choose Date Button Keyboard Support
-
- - - - - - - - - - - - - - - - - -
KeyFunction
spaceOpens popup and moves focus to the selected date, if there is none focuses on today.
enterOpens popup and moves focus to the selected date, if there is none focuses on today.
-
+
Choose Date Button Keyboard Support
+
+ + + + + + + + + + + + + + + + + +
KeyFunction
spaceOpens popup and moves focus to the selected date, if there is none focuses on today.
enterOpens popup and moves focus to the selected date, if there is none focuses on today.
+
-
Popup Keyboard Support
-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
escapeCloses the popup and moves focus to the input element.
tabMoves focus to the next focusable element within the popup.
shift + tabMoves focus to the next focusable element within the popup.
-
+
Popup Keyboard Support
+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
escapeCloses the popup and moves focus to the input element.
tabMoves focus to the next focusable element within the popup.
shift + tabMoves focus to the next focusable element within the popup.
+
-
Header Buttons Keyboard Support
-
- - - - - - - - - - - - - - - - - -
KeyFunction
enterTriggers the button action.
spaceTriggers the button action.
-
+
Header Buttons Keyboard Support
+
+ + + + + + + + + + + + + + + + + +
KeyFunction
enterTriggers the button action.
spaceTriggers the button action.
+
-
Date Grid Keyboard Support
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
enterSelects the date, closes the popup and moves focus to the input element.
spaceSelects the date, closes the popup and moves focus to the input element.
up arrowMoves focus to the same day of the previous week.
down arrowMoves focus to the same day of the next week.
right arrowMoves focus to the next day.
left arrowMoves focus to the previous day.
homeMoves focus to the first day of the current week.
endMoves focus to the last day of the current week.
page upChanges the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.
shift + page upChanges the date to previous year in date picker mode. Has no effect in month or year picker
page downChanges the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.
shift + page downChanges the date to next year in date picker mode. Has no effect in month or year picker
-
+
Date Grid Keyboard Support
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
enterSelects the date, closes the popup and moves focus to the input element.
spaceSelects the date, closes the popup and moves focus to the input element.
up arrowMoves focus to the same day of the previous week.
down arrowMoves focus to the same day of the next week.
right arrowMoves focus to the next day.
left arrowMoves focus to the previous day.
homeMoves focus to the first day of the current week.
endMoves focus to the last day of the current week.
page upChanges the date to previous month in date picker mode. Moves to previous year in month picker mode and previous decade in year picker.
shift + page upChanges the date to previous year in date picker mode. Has no effect in month or year picker
page downChanges the date to next month in date picker mode. Moves to next year in month picker mode and next decade in year picker.
shift + page downChanges the date to next year in date picker mode. Has no effect in month or year picker
+
-
Footer Buttons Keyboard Support
-
- - - - - - - - - - - - - - - - - -
KeyFunction
enterTriggers the button action.
spaceTriggers the button action.
-
- +
Footer Buttons Keyboard Support
+
+ + + + + + + + + + + + + + + + + +
KeyFunction
enterTriggers the button action.
spaceTriggers the button action.
+
Dependencies

None.

diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue index f39b328ce..dcaf294d3 100755 --- a/src/views/checkbox/CheckboxDoc.vue +++ b/src/views/checkbox/CheckboxDoc.vue @@ -204,9 +204,8 @@ export default {
Accessibility
- -
Screen Reader
-

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 label tag combined with id prop or using aria-labelledby, aria-label props.

+
Screen Reader
+

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 label tag combined with id prop or using aria-labelledby, aria-label props.


 <label for="chkbox1">Remember Me</label>
@@ -219,28 +218,28 @@ export default {
-
Keyboard Support
-
- - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the checkbox.
spaceToggles the checked state.
-
- +
Keyboard Support
+
+ + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the checkbox.
spaceToggles the checked state.
+
+
Dependencies

None.

diff --git a/src/views/chips/ChipsDoc.vue b/src/views/chips/ChipsDoc.vue index 03581e66b..57383fe8c 100755 --- a/src/views/chips/ChipsDoc.vue +++ b/src/views/chips/ChipsDoc.vue @@ -187,10 +187,9 @@ import Chips from 'primevue/chips';
Accessibility
- -
Screen Reader
-

Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. - Chip list uses listbox role with aria-orientation set to horizontal whereas each chip has the option role with aria-label set to the label of the chip.

+
Screen Reader
+

Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. + Chip list uses listbox role with aria-orientation set to horizontal whereas each chip has the option role with aria-label set to the label of the chip.


 <label for="chips1">Tags</label>
@@ -203,62 +202,62 @@ import Chips from 'primevue/chips';
-
Input Field Keyboard Support
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the input element
enterAdds a new chips using the input field value.
backspaceDeletes the previous chip if the input field is empty.
left arrowMoves focus to the previous chip if available and input field is empty.
-
+
Input Field Keyboard Support
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the input element
enterAdds a new chips using the input field value.
backspaceDeletes the previous chip if the input field is empty.
left arrowMoves focus to the previous chip if available and input field is empty.
+
+ +
Chip Keyboard Support
+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
left arrowMoves focus to the previous chip if available.
right arrowMoves focus to the next chip, if there is none then input field receives the focus.
backspaceDeletes the chips and adds focus to the input field.
+
-
Chip Keyboard Support
-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
left arrowMoves focus to the previous chip if available.
right arrowMoves focus to the next chip, if there is none then input field receives the focus.
backspaceDeletes the chips and adds focus to the input field.
-
-
Dependencies

None.

diff --git a/src/views/colorpicker/ColorPickerDoc.vue b/src/views/colorpicker/ColorPickerDoc.vue index a5facc3ce..715975a50 100755 --- a/src/views/colorpicker/ColorPickerDoc.vue +++ b/src/views/colorpicker/ColorPickerDoc.vue @@ -204,100 +204,99 @@ export default {
Accessibility
- -
Screen Reader
-

Specification does not cover a color picker yet 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.

+
Screen Reader
+

Specification does not cover a color picker yet 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.

-
Closed State Keyboard Support of Popup ColorPicker
-
- - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the color picker button.
spaceOpens the popup and moves focus to the color slider.
-
+
Closed State Keyboard Support of Popup ColorPicker
+
+ + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the color picker button.
spaceOpens the popup and moves focus to the color slider.
+
-
Popup Keyboard Support
-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
enterSelects the color and closes the popup.
spaceSelects the color and closes the popup.
escapeCloses the popup, moves focus to the input.
-
+
Popup Keyboard Support
+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
enterSelects the color and closes the popup.
spaceSelects the color and closes the popup.
escapeCloses the popup, moves focus to the input.
+
-
Color Picker Slider
-
- - - - - - - - - - - - - -
KeyFunction
arrow keysChanges color.
-
+
Color Picker Slider
+
+ + + + + + + + + + + + + +
KeyFunction
arrow keysChanges color.
+
+ +
Hue Slider
+
+ + + + + + + + + + + + + +
KeyFunction
+ + up arrow + down arrow + + Changes hue.
+
-
Hue Slider
-
- - - - - - - - - - - - - -
KeyFunction
- - up arrow - down arrow - - Changes hue.
-
-
Dependencies

None.

diff --git a/src/views/editor/EditorDoc.vue b/src/views/editor/EditorDoc.vue index 5487dcbe7..ef613e6be 100755 --- a/src/views/editor/EditorDoc.vue +++ b/src/views/editor/EditorDoc.vue @@ -159,10 +159,8 @@ import Editor from 'primevue/editor';
Accessibility
- -

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 dropdowns in the toolbar that may be overcome with a custom toolbar.

- +

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 dropdowns in the toolbar that may be overcome with a custom toolbar.

Dependencies

Quill Editor 1.3+.

diff --git a/src/views/inputmask/InputMaskDoc.vue b/src/views/inputmask/InputMaskDoc.vue index 02ca65b99..35d7ef971 100755 --- a/src/views/inputmask/InputMaskDoc.vue +++ b/src/views/inputmask/InputMaskDoc.vue @@ -125,9 +125,8 @@ import InputMask from 'primevue/inputmask';
Accessibility
- -
Screen Reader
-

InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.

+
Screen Reader
+

InputMask component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.


 <label for="date">Date</label>
@@ -140,24 +139,23 @@ import InputMask from 'primevue/inputmask';
-
Keyboard Support
-
- - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the input.
-
- +
Keyboard Support
+
+ + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the input.
+
Dependencies

None.

diff --git a/src/views/inputnumber/InputNumberDoc.vue b/src/views/inputnumber/InputNumberDoc.vue index 72010cb0b..a3b8307fb 100755 --- a/src/views/inputnumber/InputNumberDoc.vue +++ b/src/views/inputnumber/InputNumberDoc.vue @@ -406,10 +406,9 @@ Vertical
Accessibility
- -
Screen Reader
-

Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. - The input element uses spinbutton role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes.

+
Screen Reader
+

Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. + The input element uses spinbutton role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes.


 <label for="price">Price</label>
@@ -422,40 +421,39 @@ Vertical
-
Keyboard Support
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the input.
up arrowIncrements the value.
down arrowDecrements the value.
homeSet the minimum value if provided.
endSet the maximum value if provided.
-
- +
Keyboard Support
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the input.
up arrowIncrements the value.
down arrowDecrements the value.
homeSet the minimum value if provided.
endSet the maximum value if provided.
+
Dependencies

None.

diff --git a/src/views/inputswitch/InputSwitchDoc.vue b/src/views/inputswitch/InputSwitchDoc.vue index 9782eee7c..5484d0b5a 100755 --- a/src/views/inputswitch/InputSwitchDoc.vue +++ b/src/views/inputswitch/InputSwitchDoc.vue @@ -156,9 +156,8 @@ export default {
Accessibility
- -
Screen Reader
-

InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.

+
Screen Reader
+

InputSwitch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.


 <label for="switch1">Remember Me</label>
@@ -171,28 +170,27 @@ export default {
-
Keyboard Support
-
- - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the switch.
spaceToggles the checked state.
-
- +
Keyboard Support
+
+ + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the switch.
spaceToggles the checked state.
+
Dependencies

None.

diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue index 13640eb78..9ea5db448 100755 --- a/src/views/inputtext/InputTextDoc.vue +++ b/src/views/inputtext/InputTextDoc.vue @@ -144,9 +144,8 @@ import InputText from 'primevue/inputtext';
Accessibility
- -
Screen Reader
-

InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.

+
Screen Reader
+

InputText component renders a native input element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.


 <label for="firstname">Firstname</label>
@@ -159,24 +158,23 @@ import InputText from 'primevue/inputtext';
-
Keyboard Support
-
- - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the input.
-
- +
Keyboard Support
+
+ + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the input.
+
Dependencies

None.

diff --git a/src/views/knob/KnobDoc.vue b/src/views/knob/KnobDoc.vue index c8a087fa5..8701d8dc1 100644 --- a/src/views/knob/KnobDoc.vue +++ b/src/views/knob/KnobDoc.vue @@ -210,10 +210,9 @@ data() {
Accessibility
- -
Screen Reader
-

Knob element component uses slider role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using - aria-labelledby and aria-label props.

+
Screen Reader
+

Knob element component uses slider role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using + aria-labelledby and aria-label props.


 <span id="label_number">Number</span>
@@ -223,58 +222,57 @@ data() {
-
Keyboard Support
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the slider.
- - left arrow - down arrow - - Decrements the value.
- - right arrow - up arrow - - Increments the value.
homeSet the minimum value.
endSet the maximum value.
page upIncrements the value by 10 steps.
page downDecrements the value by 10 steps.
-
- +
Keyboard Support
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the slider.
+ + left arrow + down arrow + + Decrements the value.
+ + right arrow + up arrow + + Increments the value.
homeSet the minimum value.
endSet the maximum value.
page upIncrements the value by 10 steps.
page downDecrements the value by 10 steps.
+
Dependencies

None.

diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue index 2ff667cef..d196f9f78 100755 --- a/src/views/password/PasswordDoc.vue +++ b/src/views/password/PasswordDoc.vue @@ -252,10 +252,9 @@ import Password from 'primevue/password';
Accessibility
- -
Screen Reader
-

Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props. Screen reader - is notified about the changes to the strength of the password using a section that has aria-live while typing.

+
Screen Reader
+

Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props. Screen reader + is notified about the changes to the strength of the password using a section that has aria-live while typing.


 <label for="pwd1">Password</label>
@@ -268,28 +267,27 @@ import Password from 'primevue/password';
-
Keyboard Support
-
- - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the input.
escapeHides the strength meter if open.
-
- +
Keyboard Support
+
+ + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the input.
escapeHides the strength meter if open.
+
Dependencies

None.

diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue index 92b8d9ca0..e1e65bfcc 100755 --- a/src/views/radiobutton/RadioButtonDoc.vue +++ b/src/views/radiobutton/RadioButtonDoc.vue @@ -155,9 +155,8 @@ export default {
Accessibility
- -
Screen Reader
-

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 label tag combined with id prop or using aria-labelledby, aria-label props.

+
Screen Reader
+

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 label tag combined with id prop or using aria-labelledby, aria-label props.


 <label for="rb1">One</label>
@@ -170,46 +169,45 @@ export default {
-
Keyboard Support
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the checked radio button, if there is none within the group then first radio button receives the focus.
- - left arrow - up arrow - - Moves focus to the previous radio button, if there is none then last radio button receives the focus.
- - right arrow - down arrow - - Moves focus to the next radio button, if there is none then first radio button receives the focus.
spaceIf the focused radio button is unchecked, changes the state to checked.
-
- +
Keyboard Support
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the checked radio button, if there is none within the group then first radio button receives the focus.
+ + left arrow + up arrow + + Moves focus to the previous radio button, if there is none then last radio button receives the focus.
+ + right arrow + down arrow + + Moves focus to the next radio button, if there is none then first radio button receives the focus.
spaceIf the focused radio button is unchecked, changes the state to checked.
+
Dependencies

None.

diff --git a/src/views/rating/RatingDoc.vue b/src/views/rating/RatingDoc.vue index eb7cbe365..82263b402 100755 --- a/src/views/rating/RatingDoc.vue +++ b/src/views/rating/RatingDoc.vue @@ -140,51 +140,49 @@ import Rating from 'primevue/rating';
Accessibility
- -
Screen Reader
-

Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the locale API via star and stars of the aria property.

+
Screen Reader
+

Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the locale API via star and stars of the aria property.

-
Keyboard Support
-

Keyboard interaction is derived from the native browser handling of radio buttons in a group.

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the star representing the value, if there is none then first star receives the focus.
- - left arrow - up arrow - - Moves focus to the previous star, if there is none then last radio button receives the focus.
- - right arrow - down arrow - - Moves focus to the next star, if there is none then first star receives the focus.
spaceIf the focused star does not represent the value, changes the value to the star value.
-
- +
Keyboard Support
+

Keyboard interaction is derived from the native browser handling of radio buttons in a group.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the star representing the value, if there is none then first star receives the focus.
+ + left arrow + up arrow + + Moves focus to the previous star, if there is none then last radio button receives the focus.
+ + right arrow + down arrow + + Moves focus to the next star, if there is none then first star receives the focus.
spaceIf the focused star does not represent the value, changes the value to the star value.
+
Dependencies

None.

diff --git a/src/views/selectbutton/SelectButtonDoc.vue b/src/views/selectbutton/SelectButtonDoc.vue index f608bb731..152ec6b9f 100755 --- a/src/views/selectbutton/SelectButtonDoc.vue +++ b/src/views/selectbutton/SelectButtonDoc.vue @@ -179,52 +179,50 @@ export default {
Accessibility
- -
Screen Reader
-

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 aria-labelledby property.

+
Screen Reader
+

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 aria-labelledby property.

-
Keyboard Support
-

Keyboard interaction is derived from the native browser handling of checkboxs in a group.

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the first selected option, if there is none then first option receives the focus.
- - right arrow - up arrow - - Moves focus to the previous option.
- - left arrow - down arrow - - Moves focus to the next option.
spaceToggles the checked state of a button.
-
- +
Keyboard Support
+

Keyboard interaction is derived from the native browser handling of checkboxs in a group.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the first selected option, if there is none then first option receives the focus.
+ + right arrow + up arrow + + Moves focus to the previous option.
+ + left arrow + down arrow + + Moves focus to the next option.
spaceToggles the checked state of a button.
+
Dependencies

None.

diff --git a/src/views/slider/SliderDoc.vue b/src/views/slider/SliderDoc.vue index ae8ca1c5a..c39cdaa24 100755 --- a/src/views/slider/SliderDoc.vue +++ b/src/views/slider/SliderDoc.vue @@ -176,10 +176,9 @@ export default {
Accessibility
- -
Screen Reader
-

Slider element component uses slider role on the handle in addition to the aria-orientation, aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using - aria-labelledby and aria-label props.

+
Screen Reader
+

Slider element component uses slider role on the handle in addition to the aria-orientation, aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using + aria-labelledby and aria-label props.


 <span id="label_number">Number</span>
@@ -189,58 +188,57 @@ export default {
-
Keyboard Support
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the slider.
- - left arrow - up arrow - - Decrements the value.
- - right arrow - down arrow - - Increments the value.
homeSet the minimum value.
endSet the maximum value.
page upIncrements the value by 10 steps.
page downDecrements the value by 10 steps.
-
- +
Keyboard Support
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the slider.
+ + left arrow + up arrow + + Decrements the value.
+ + right arrow + down arrow + + Increments the value.
homeSet the minimum value.
endSet the maximum value.
page upIncrements the value by 10 steps.
page downDecrements the value by 10 steps.
+
Dependencies

None.

diff --git a/src/views/textarea/TextareaDoc.vue b/src/views/textarea/TextareaDoc.vue index eb68dca20..af37814dd 100755 --- a/src/views/textarea/TextareaDoc.vue +++ b/src/views/textarea/TextareaDoc.vue @@ -79,9 +79,8 @@ import Textarea from 'primevue/textarea';
Accessibility
- -
Screen Reader
-

Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.

+
Screen Reader
+

Textarea component renders a native textarea element that implicitly includes any passed prop. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.


 <label for="address1">Address 1</label>
@@ -94,24 +93,23 @@ import Textarea from 'primevue/textarea';
-
Keyboard Support
-
- - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the input.
-
- +
Keyboard Support
+
+ + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the input.
+
Dependencies

None.

diff --git a/src/views/togglebutton/ToggleButtonDoc.vue b/src/views/togglebutton/ToggleButtonDoc.vue index 15109da74..dcd7b3570 100755 --- a/src/views/togglebutton/ToggleButtonDoc.vue +++ b/src/views/togglebutton/ToggleButtonDoc.vue @@ -180,10 +180,9 @@ export default {
Accessibility
- -
Screen Reader
-

ToggleButton component uses an element with button role and updates aria-pressed state for screen readers. Value to describe the component can be defined with aria-labelledby or aria-label 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.

+
Screen Reader
+

ToggleButton component uses an element with button role and updates aria-pressed state for screen readers. Value to describe the component can be defined with aria-labelledby or aria-label 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.


 <span id="rememberme">Remember Me</span>
@@ -193,29 +192,28 @@ export default {
-
Keyboard Support
-

Keyboard interaction is derived from the native browser handling of checkboxs in a group.

-
- - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the button.
spaceToggles the checked state.
-
- +
Keyboard Support
+

Keyboard interaction is derived from the native browser handling of checkboxs in a group.

+
+ + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the button.
spaceToggles the checked state.
+
Dependencies

None.

diff --git a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue index 183a9f74d..d3e80ad9d 100755 --- a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue +++ b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue @@ -90,11 +90,10 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
Accessibility
- -
Screen Reader
-

TriStateCheckbox component uses an element with checkbox role. Value to describe the component can either be provided with aria-labelledby or aria-label props. Component adds an element with - aria-live attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the trueLabel, falseLabel and nullLabel keys of the aria - property from the locale 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.

+
Screen Reader
+

TriStateCheckbox component uses an element with checkbox role. Value to describe the component can either be provided with aria-labelledby or aria-label props. Component adds an element with + aria-live attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the trueLabel, falseLabel and nullLabel keys of the aria + property from the locale 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.


 <span id="chkbox1">Remember Me</span>
@@ -104,32 +103,31 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
-
Keyboard Support
-
- - - - - - - - - - - - - - - - - - - - - -
KeyFunction
tabMoves focus to the checkbox.
spaceToggles between the values.
enterToggles between the values.
-
- +
Keyboard Support
+
+ + + + + + + + + + + + + + + + + + + + + +
KeyFunction
tabMoves focus to the checkbox.
spaceToggles between the values.
enterToggles between the values.
+
Dependencies

None.