Fixed #2819 - Improve Listbox implementation for Accessibility

This commit is contained in:
mertsincan 2022-07-31 03:41:05 +01:00
parent a96a133a98
commit a67befc047
3 changed files with 634 additions and 152 deletions

View file

@ -101,6 +101,42 @@ const ListboxProps = [
default: "null",
description: "Fields used when filtering the options, defaults to optionLabel."
},
{
name: "filterInputProps",
type: "object",
default: "null",
description: "Uses to pass all properties of the HTMLInputElement to the filter input inside the component."
},
{
name: "virtualScrollerOptions",
type: "object",
default: "null",
description: "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
},
{
name: "autoOptionFocus",
type: "boolean",
default: "true",
description: "Whether to focus on the first visible or selected element."
},
{
name: "filterMessage",
type: "string",
default: "{0} results are available",
description: "Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration."
},
{
name: "selectionMessage",
type: "string",
default: "{0} items selected",
description: "Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration."
},
{
name: "emptySelectionMessage",
type: "string",
default: "No selected item",
description: "Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration."
},
{
name: "emptyFilterMessage",
type: "string",
@ -112,6 +148,24 @@ const ListboxProps = [
type: "string",
default: "No results found",
description: "Text to display when there are no options available. Defaults to value from PrimeVue locale configuration."
},
{
name: "tabindex",
type: "number",
default: "0",
description: "Index of the element in tabbing order."
},
{
name: "ariaLabel",
type: "string",
default: "null",
description: "Defines a string value that labels an interactive element."
}
{
name: "ariaLabelledby",
type: "string",
default: "null",
description: "Identifier of the underlying input element."
}
];
@ -132,6 +186,28 @@ const ListboxEvents = [
}
]
},
{
name: "focus",
description: "Callback to invoke when component receives focus.",
arguments: [
{
name: "event",
type: "object",
description: "Browser event"
}
]
},
{
name: "blur",
description: "Callback to invoke when component loses focus.",
arguments: [
{
name: "event",
type: "object",
description: "Browser event"
}
]
},
{
name: "filter",
description: "Callback to invoke on filter input.",
@ -147,12 +223,6 @@ const ListboxEvents = [
description: "Filter value"
}
]
},
{
name: "virtualScrollerOptions",
type: "object",
default: "null",
description: "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
}
];