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
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
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 {
| Key | -Function | -
|---|---|
| space | -Opens popup and moves focus to the selected date, if there is none focuses on today. | -
| enter | -Opens popup and moves focus to the selected date, if there is none focuses on today. | -
| Key | +Function | +
|---|---|
| space | +Opens popup and moves focus to the selected date, if there is none focuses on today. | +
| enter | +Opens popup and moves focus to the selected date, if there is none focuses on today. | +
| Key | -Function | -
|---|---|
| escape | -Closes the popup and moves focus to the input element. | -
| tab | -Moves focus to the next focusable element within the popup. | -
| shift + tab | -Moves focus to the next focusable element within the popup. | -
| Key | +Function | +
|---|---|
| escape | +Closes the popup and moves focus to the input element. | +
| tab | +Moves focus to the next focusable element within the popup. | +
| shift + tab | +Moves focus to the next focusable element within the popup. | +
| Key | -Function | -
|---|---|
| enter | -Triggers the button action. | -
| space | -Triggers the button action. | -
| Key | +Function | +
|---|---|
| enter | +Triggers the button action. | +
| space | +Triggers the button action. | +
| Key | -Function | -
|---|---|
| enter | -Selects the date, closes the popup and moves focus to the input element. | -
| space | -Selects the date, closes the popup and moves focus to the input element. | -
| up arrow | -Moves focus to the same day of the previous week. | -
| down arrow | -Moves focus to the same day of the next week. | -
| right arrow | -Moves focus to the next day. | -
| left arrow | -Moves focus to the previous day. | -
| home | -Moves focus to the first day of the current week. | -
| end | -Moves focus to the last day of the current week. | -
| page up | -Changes 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 up | -Changes the date to previous year in date picker mode. Has no effect in month or year picker | -
| page down | -Changes 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 down | -Changes the date to next year in date picker mode. Has no effect in month or year picker | -
| Key | +Function | +
|---|---|
| enter | +Selects the date, closes the popup and moves focus to the input element. | +
| space | +Selects the date, closes the popup and moves focus to the input element. | +
| up arrow | +Moves focus to the same day of the previous week. | +
| down arrow | +Moves focus to the same day of the next week. | +
| right arrow | +Moves focus to the next day. | +
| left arrow | +Moves focus to the previous day. | +
| home | +Moves focus to the first day of the current week. | +
| end | +Moves focus to the last day of the current week. | +
| page up | +Changes 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 up | +Changes the date to previous year in date picker mode. Has no effect in month or year picker | +
| page down | +Changes 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 down | +Changes the date to next year in date picker mode. Has no effect in month or year picker | +
| Key | -Function | -
|---|---|
| enter | -Triggers the button action. | -
| space | -Triggers the button action. | -
| Key | +Function | +
|---|---|
| enter | +Triggers the button action. | +
| space | +Triggers the button action. | +
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 {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.
+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 {
| Key | -Function | -
|---|---|
| tab | -Moves focus to the checkbox. | -
| space | -Toggles the checked state. | -
| Key | +Function | +
|---|---|
| tab | +Moves focus to the checkbox. | +
| space | +Toggles the checked state. | +
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';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.
+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';
| Key | -Function | -
|---|---|
| tab | -Moves focus to the input element | -
| enter | -Adds a new chips using the input field value. | -
| backspace | -Deletes the previous chip if the input field is empty. | -
| left arrow | -Moves focus to the previous chip if available and input field is empty. | -
| Key | +Function | +
|---|---|
| tab | +Moves focus to the input element | +
| enter | +Adds a new chips using the input field value. | +
| backspace | +Deletes the previous chip if the input field is empty. | +
| left arrow | +Moves focus to the previous chip if available and input field is empty. | +
| Key | +Function | +
|---|---|
| left arrow | +Moves focus to the previous chip if available. | +
| right arrow | +Moves focus to the next chip, if there is none then input field receives the focus. | +
| backspace | +Deletes the chips and adds focus to the input field. | +
| Key | -Function | -
|---|---|
| left arrow | -Moves focus to the previous chip if available. | -
| right arrow | -Moves focus to the next chip, if there is none then input field receives the focus. | -
| backspace | -Deletes the chips and adds focus to the input field. | -
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 {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.
+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.
-| Key | -Function | -
|---|---|
| tab | -Moves focus to the color picker button. | -
| space | -Opens the popup and moves focus to the color slider. | -
| Key | +Function | +
|---|---|
| tab | +Moves focus to the color picker button. | +
| space | +Opens the popup and moves focus to the color slider. | +
| Key | -Function | -
|---|---|
| enter | -Selects the color and closes the popup. | -
| space | -Selects the color and closes the popup. | -
| escape | -Closes the popup, moves focus to the input. | -
| Key | +Function | +
|---|---|
| enter | +Selects the color and closes the popup. | +
| space | +Selects the color and closes the popup. | +
| escape | +Closes the popup, moves focus to the input. | +
| Key | -Function | -
|---|---|
| arrow keys | -Changes color. | -
| Key | +Function | +
|---|---|
| arrow keys | +Changes color. | +
| Key | +Function | +
|---|---|
| + + up arrow + down arrow + + | +Changes hue. | +
| Key | -Function | -
|---|---|
| - - up arrow - down arrow - - | -Changes hue. | -
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';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.
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';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.
+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';
| Key | -Function | -
|---|---|
| tab | -Moves focus to the input. | -
| Key | +Function | +
|---|---|
| tab | +Moves focus to the input. | +
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 @@ VerticalValue 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.
+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
| Key | -Function | -
|---|---|
| tab | -Moves focus to the input. | -
| up arrow | -Increments the value. | -
| down arrow | -Decrements the value. | -
| home | -Set the minimum value if provided. | -
| end | -Set the maximum value if provided. | -
| Key | +Function | +
|---|---|
| tab | +Moves focus to the input. | +
| up arrow | +Increments the value. | +
| down arrow | +Decrements the value. | +
| home | +Set the minimum value if provided. | +
| end | +Set the maximum value if provided. | +
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 {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.
+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 {
| Key | -Function | -
|---|---|
| tab | -Moves focus to the switch. | -
| space | -Toggles the checked state. | -
| Key | +Function | +
|---|---|
| tab | +Moves focus to the switch. | +
| space | +Toggles the checked state. | +
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';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.
+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';
| Key | -Function | -
|---|---|
| tab | -Moves focus to the input. | -
| Key | +Function | +
|---|---|
| tab | +Moves focus to the input. | +
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() {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.
+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() {
| Key | -Function | -
|---|---|
| tab | -Moves focus to the slider. | -
| - - left arrow - down arrow - - | -Decrements the value. | -
| - - right arrow - up arrow - - | -Increments the value. | -
| home | -Set the minimum value. | -
| end | -Set the maximum value. | -
| page up | -Increments the value by 10 steps. | -
| page down | -Decrements the value by 10 steps. | -
| Key | +Function | +
|---|---|
| tab | +Moves focus to the slider. | +
| + + left arrow + down arrow + + | +Decrements the value. | +
| + + right arrow + up arrow + + | +Increments the value. | +
| home | +Set the minimum value. | +
| end | +Set the maximum value. | +
| page up | +Increments the value by 10 steps. | +
| page down | +Decrements the value by 10 steps. | +
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';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.
+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';
| Key | -Function | -
|---|---|
| tab | -Moves focus to the input. | -
| escape | -Hides the strength meter if open. | -
| Key | +Function | +
|---|---|
| tab | +Moves focus to the input. | +
| escape | +Hides the strength meter if open. | +
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 {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.
+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 {
| Key | -Function | -
|---|---|
| tab | -Moves 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. | -
| space | -If the focused radio button is unchecked, changes the state to checked. | -
| Key | +Function | +
|---|---|
| tab | +Moves 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. | +
| space | +If the focused radio button is unchecked, changes the state to checked. | +
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';Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the
Rating component internally uses radio buttons that are only visible to screen readers. The value to read for item is retrieved from the
Keyboard interaction is derived from the native browser handling of radio buttons in a group.
-| Key | -Function | -
|---|---|
| tab | -Moves 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. | -
| space | -If the focused star does not represent the value, changes the value to the star value. | -
Keyboard interaction is derived from the native browser handling of radio buttons in a group.
+| Key | +Function | +
|---|---|
| tab | +Moves 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. | +
| space | +If the focused star does not represent the value, changes the value to the star value. | +
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 {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.
+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 interaction is derived from the native browser handling of checkboxs in a group.
-| Key | -Function | -
|---|---|
| tab | -Moves 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. | -
| space | -Toggles the checked state of a button. | -
Keyboard interaction is derived from the native browser handling of checkboxs in a group.
+| Key | +Function | +
|---|---|
| tab | +Moves 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. | +
| space | +Toggles the checked state of a button. | +
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 {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.
+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 {
| Key | -Function | -
|---|---|
| tab | -Moves focus to the slider. | -
| - - left arrow - up arrow - - | -Decrements the value. | -
| - - right arrow - down arrow - - | -Increments the value. | -
| home | -Set the minimum value. | -
| end | -Set the maximum value. | -
| page up | -Increments the value by 10 steps. | -
| page down | -Decrements the value by 10 steps. | -
| Key | +Function | +
|---|---|
| tab | +Moves focus to the slider. | +
| + + left arrow + up arrow + + | +Decrements the value. | +
| + + right arrow + down arrow + + | +Increments the value. | +
| home | +Set the minimum value. | +
| end | +Set the maximum value. | +
| page up | +Increments the value by 10 steps. | +
| page down | +Decrements the value by 10 steps. | +
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';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.
+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';
| Key | -Function | -
|---|---|
| tab | -Moves focus to the input. | -
| Key | +Function | +
|---|---|
| tab | +Moves focus to the input. | +
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 {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.
+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 interaction is derived from the native browser handling of checkboxs in a group.
-| Key | -Function | -
|---|---|
| tab | -Moves focus to the button. | -
| space | -Toggles the checked state. | -
Keyboard interaction is derived from the native browser handling of checkboxs in a group.
+| Key | +Function | +
|---|---|
| tab | +Moves focus to the button. | +
| space | +Toggles the checked state. | +
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';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
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
<span id="chkbox1">Remember Me</span>
@@ -104,32 +103,31 @@ import TriStateCheckbox from 'primevue/tristatecheckbox';
| Key | -Function | -
|---|---|
| tab | -Moves focus to the checkbox. | -
| space | -Toggles between the values. | -
| enter | -Toggles between the values. | -
| Key | +Function | +
|---|---|
| tab | +Moves focus to the checkbox. | +
| space | +Toggles between the values. | +
| enter | +Toggles between the values. | +
None.