diff --git a/src/views/listbox/ListboxDemo.vue b/src/views/listbox/ListboxDemo.vue
index 5bea7f0bc..fa5cdbdd6 100755
--- a/src/views/listbox/ListboxDemo.vue
+++ b/src/views/listbox/ListboxDemo.vue
@@ -34,7 +34,7 @@
Virtual Scroll (100000 Items)
-
+
diff --git a/src/views/listbox/ListboxDoc.vue b/src/views/listbox/ListboxDoc.vue
index 011da00c5..e1ecee0df 100755
--- a/src/views/listbox/ListboxDoc.vue
+++ b/src/views/listbox/ListboxDoc.vue
@@ -231,6 +231,42 @@ export default {
null |
Fields used when filtering the options, defaults to optionLabel. |
+
+ | filterInputProps |
+ object |
+ null |
+ Uses to pass all properties of the HTMLInputElement to the filter input inside the component. |
+
+
+ | virtualScrollerOptions |
+ object |
+ null |
+ Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. |
+
+
+ | autoOptionFocus |
+ boolean |
+ true |
+ Whether to focus on the first visible or selected element. |
+
+
+ | filterMessage |
+ string |
+ {0} results are available |
+ Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration. |
+
+
+ | selectionMessage |
+ string |
+ {0} items selected |
+ Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration. |
+
+
+ | emptySelectionMessage |
+ string |
+ No selected item |
+ Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration. |
+
| emptyFilterMessage |
string |
@@ -244,10 +280,22 @@ export default {
Text to display when there are no options available. Defaults to value from PrimeVue locale configuration. |
- | virtualScrollerOptions |
- object |
+ tabindex |
+ number |
+ 0 |
+ Index of the element in tabbing order. |
+
+
+ | ariaLabel |
+ string |
null |
- Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it. |
+ Defines a string value that labels an interactive element. |
+
+
+ | ariaLabelledby |
+ string |
+ null |
+ Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
@@ -270,6 +318,16 @@ export default {
event.value: Selected option value
Callback to invoke on value change. |
+
+ | focus |
+ event |
+ Callback to invoke when the component receives focus. |
+
+
+ | blur |
+ event |
+ Callback to invoke when the component loses focus. |
+
| filter |
event.originalEvent: Original event
@@ -368,6 +426,147 @@ export default {
+ Accessibility
+ Screen Reader
+ Value to describe the component can be provided aria-labelledby or aria-label props. The list element has a listbox role with the aria-multiselectable attribute that sets to true when multiple selection is enabled.
+ Each list item has an option role with aria-selected and aria-disabled as their attributes.
+ If filtering is enabled, filterInputProps can be defined to give aria-* props to the input element. Alternatively filterPlaceholder is usually utilized by the screen readers as well.
+
+<span id="lb">Options</span>
+<ListBox aria-labelledby="lb" />
+
+<ListBox aria-label="City" />
+
+
+
+ Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | tab |
+ Moves focus to the first selected option, if there is none then first option receives the focus. |
+
+
+ | up arrow |
+ Moves focus to the previous option. |
+
+
+ | down arrow |
+ Moves focus to the next option. |
+
+
+ | enter |
+ Toggles the selected state of the focused option. |
+
+
+ | space |
+ Toggles the selected state of the focused option. |
+
+
+ | home |
+ Moves focus to the first option. |
+
+
+ | end |
+ Moves focus to the last option. |
+
+
+ | shift + down arrow |
+ Moves focus to the next option and toggles the selection state. |
+
+
+ | shift + up arrow |
+ Moves focus to the previous option and toggles the selection state. |
+
+
+ | shift + space |
+ Selects the items between the most recently selected option and the focused option. |
+
+
+ | control + shift + home |
+ Selects the focused options and all the options up to the first one. |
+
+
+ | control + shift + end |
+ Selects the focused options and all the options down to the last one. |
+
+
+ | control + a |
+ Selects all options. |
+
+
+ | pageUp |
+ Jumps visual focus to first option. |
+
+
+ | pageDown |
+ Jumps visual focus to last option. |
+
+
+ | any printable character |
+ Moves focus to the option whose label starts with the characters being typed. |
+
+
+
+ Filter Input Keyboard Support
+
+
+
+
+ | Key |
+ Function |
+
+
+
+
+ | down arrow |
+ Moves focus to the next option, if there is none then visual focus does not change. |
+
+
+ | up arrow |
+ Moves focus to the previous option, if there is none then visual focus does not change. |
+
+
+ | left arrow |
+ Removes the visual focus from the current option and moves input cursor to one character left. |
+
+
+ | right arrow |
+ Removes the visual focus from the current option and moves input cursor to one character right. |
+
+
+ | home |
+ Moves input cursor at the end, if not then moves focus to the first option. |
+
+
+ | end |
+ Moves input cursor at the beginning, if not then moves focus to the last option. |
+
+
+ | enter |
+ Closes the popup and moves focus to the multiselect element. |
+
+
+ | escape |
+ Closes the popup and moves focus to the multiselect element. |
+
+
+ | tab |
+ Moves focus to the next focusable element in the component. If there is none, moves focus to next element in page. |
+
+
+
+ Dependencies
None.
@@ -407,7 +606,7 @@ export default {
Virtual Scroll (1000 Items)
-
+
@@ -501,7 +700,7 @@ export default {
Virtual Scroll (1000 Items)
-
+
@@ -599,7 +798,7 @@ export default {
Virtual Scroll (1000 Items)
-
+
|